Leave a comment

Android Layouts

Kali ini ann mau coba bercerita tentang Android Layouts. Dalam posting ini ann akan membahas tentang pandangan layout yang berbeda dalam sebuah aplikasi mobile android.

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Grid View
5. Tab Layout
6. List View

Android memungkinkan Anda untuk membuat tampilan layout menggunakan file XML sederhana (kita juga bisa membuat layout menggunakan kode java). Semua layout harus ditempatkan di / res / folder.

layouts_directory1

1. Linear Layout

Dalam tata letak linear, seperti namanya, semua elemen ditampilkan secara linear (di bawah ini adalah contoh dari layout linear), baik horizontal maupun vertikal dan perilaku ini diatur dalam android: Orientasi yang merupakan atribut dari node LinearLayout.

Contoh Vertical layout snippet

<LinearLayout android:orientation="vertical"> .... </LinearLayout>

Contoh  Horizontal layout snippet

<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

linear_layout_sketch

Sekarang kita tahu dua jenis layout linear, berikut adalah langkah-langkah yang perlu Anda ikuti untuk membuatnya

1. Buat File proyek baru -> New -> Project Android
2. Dalam Explorer klik kanan pada res / folder dan buat XML file Android baru dan beri nama sesuai keinginan. ann menamakannya sebagai “linear_layout.xml”
res / folder -> Klik Kanan -> New -> Android XML file
3. Sekarang buka file xml yang baru dibuat (dalam kasus ann “linear_layout.xml”) dan ketik kode berikut.

<?xml version=”1.0″ encoding=”utf-8″?>

<!– Parent linear layout with vertical orientation –>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<TextView android:layout_width=”fill_parent” android:layout_height=”wrap_content”
android:text=”Email:” android:padding=”5dip”/>
<EditText android:layout_width=”fill_parent” android:layout_height=”wrap_content”
android:layout_marginBottom=”10dip”/>
<Button android:layout_width=”fill_parent” android:layout_height=”wrap_content”
android:text=”Login”/>
<!– Child linear layout with horizontal orientation –>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal” android:background=”#2a2a2a”
android:layout_marginTop=”25dip”>
<TextView android:layout_width=”fill_parent” android:layout_height=”wrap_content”
android:text=”Home” android:padding=”15dip” android:layout_weight=”1″
android:gravity=”center”/>
<TextView android:layout_width=”fill_parent” android:layout_height=”wrap_content”
android:text=”About” android:padding=”15dip” android:layout_weight=”1″
android:gravity=”center”/>
</LinearLayout>
</LinearLayout>

4. Untuk mengatur ini baru dibuat view sebagai view awal dari aplikasi Anda, Buka file MainActivity.java Anda. Anda akan melihat baris berikut dalam fungsi OnCreate setContentView (R.layout.main). Ubah R.layout.main ke R.layout.yourlinearviewname. Dalam kasus ann R.layout.linear_layout nya

package com.example.androidlayouts;

import android.app.Activity;
import android.os.Bundle;
 public class AndroidLayoutsActivity extends Activity {
     @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
}
5. Untuk menjalankan aplikasi, klik kanan pada proyek -> Run As -> 1. Aplikasi Android. Anda harus melihat linear layout yang baru dibuat di emulator.
linear_layout_output
2. Relative Layout

Dalam tata letak relatif setiap elemen mengatur sendiri relatif terhadap unsur-unsur lain atau elemen induk.
Sebagai contoh, mari kita mempertimbangkan tata letak didefinisikan di bawah. tombol  “Batal” ditempatkan relatif, di sebelah kanan tombol  “Login” secara paralel. Berikut adalah potongan kode yang mencapai keselarasan disebutkan (Hak tombol Login secara paralel)

Contoh code snippet

<Button android:id="@+id/btnLogin" ..></Button>

 <Button android:layout_toRightOf="@id/btnLogin"
            android:layout_alignTop="@id/btnLogin" ..></Button>
relative_layout_sketch

Berikut adalah langkah-langkah untuk membuat Relative Layout

1. Buat File proyek baru -> New -> Project Android
2. Dalam Paket Explorer klik kanan pada res / folder  dan menciptakan XML Berkas Android baru dan beri nama sesuai keinginan. ann kasih nama sebagai “relative_layout.xml”
res / folder -> Klik Kanan -> New -> Android XML file
3. Sekarang buka file xml yang baru dibuat (dalam kasus ann”relative_layout.xml”) dan ketik kode berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
<TextView android:id=”@+id/label” android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:text=”Email” />
<EditText android:id=”@+id/inputEmail” android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:layout_below=”@id/label” />
<Button android:id=”@+id/btnLogin” android:layout_width=”wrap_content”
android:layout_height=”wrap_content” android:layout_below=”@id/inputEmail”
android:layout_alignParentLeft=”true” android:layout_marginRight=”10px”
android:text=”Login” />
<Button android:layout_width=”wrap_content” android:layout_height=”wrap_content”
android:layout_toRightOf=”@id/btnLogin”
android:layout_alignTop=”@id/btnLogin” android:text=”Cancel” />
<Button android:layout_width=”wrap_content” android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true” android:text=”Register new Account”
android:layout_centerHorizontal=”true”/>
</RelativeLayout>

 

4. Sama seperti sebelum membuka file MainActivity.java Anda dan mengatur layout untuk layout  file relatif yang baru Anda dibuat . Dalam kasus ann R.layout.relative_layout nya.

setContentView(R.layout.relative_layout);

5. Untuk menjalankan aplikasi, klik kanan pada proyek -> Run As -> 1. Aplikasi Android. Anda harus melihat relatif layout yang baru dibuat di emulator.

relative_layout_output

 

3. Table Layout

Tabel layout di Android bekerja dengan cara yang sama tabel HTML layout . Anda dapat membagi layout ke dalam baris dan kolom. Yang sangat mudah dipahami. Gambar di bawah ini akan memberikan Anda sebuah ide.

table_layout_sketch

1. Buat File proyek baru -> New -> Project Android
2. Dalam Paket Explorer klik kanan pada res / folder layout dan buat file XML Android baru dan beri nama sesuai keinginan. annkasih nama sebagai “table_layout.xml”
res / folder -> Klik Kanan -> New -> Android XML file
3. Sekarang buka file xml yang baru dibuat (dalam kasus ann “table_layout.xml”) dan ketik kode berikut.

<TableLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:shrinkColumns=”*” android:stretchColumns=”*” android:background=”#ffffff”>
<!– Row 1 with single column –>
<TableRow
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”
android:gravity=”center_horizontal”>
<TextView
android:layout_width=”match_parent” android:layout_height=”wrap_content”
android:textSize=”18dp” android:text=”Row 1″ android:layout_span=”3″
android:padding=”18dip” android:background=”#b0b0b0″
android:textColor=”#000″/>
</TableRow>
<!– Row 2 with 3 columns –>
<TableRow
android:id=”@+id/tableRow1″
android:layout_height=”wrap_content”
android:layout_width=”match_parent”>
<TextView
android:id=”@+id/TextView04″ android:text=”Row 2 column 1″
android:layout_weight=”1″ android:background=”#dcdcdc”
android:textColor=”#000000″
android:padding=”20dip” android:gravity=”center”/>
<TextView
android:id=”@+id/TextView04″ android:text=”Row 2 column 2″
android:layout_weight=”1″ android:background=”#d3d3d3″
android:textColor=”#000000″
android:padding=”20dip” android:gravity=”center”/>
<TextView
android:id=”@+id/TextView04″ android:text=”Row 2 column 3″
android:layout_weight=”1″ android:background=”#cac9c9″
android:textColor=”#000000″
android:padding=”20dip” android:gravity=”center”/>
</TableRow>
<!– Row 3 with 2 columns –>
<TableRow
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”
android:gravity=”center_horizontal”>
<TextView
android:id=”@+id/TextView04″ android:text=”Row 3 column 1″
android:layout_weight=”1″ android:background=”#b0b0b0″
android:textColor=”#000000″
android:padding=”20dip” android:gravity=”center”/>
<TextView
android:id=”@+id/TextView04″ android:text=”Row 3 column 2″
android:layout_weight=”1″ android:background=”#a09f9f”
android:textColor=”#000000″
android:padding=”20dip” android:gravity=”center”/>
</TableRow>
</TableLayout>

 

4. Sama seperti sebelum membuka file MainActivity.java Anda mengatur layout untuk layout table Anda yang baru dibuat. Dalam kasus ann R.layout.table_layout nya

setContentView(R.layout.table_layout);

5. Untuk menjalankan aplikasi, klik kanan pada proyek -> Run As -> 1. Aplikasi Android. Anda harus melihat table layout yang baru dibuat di emulator.

table_layout_output

 

ann baru membahas Layout Linear, Layout relatif dan Layout Tabel di posting ini. Sisanya Grid View, Tab Layout dan Daftar View akan dibahas dalam artikel berikutnya.

Udahan deh tutorialnya hihihihi next time Insya Allah kita bahas lagi tentang yang lainnya sekian dulu dari ann klo ada pertanyaa tanyain aja klo sempet Insya Allah ann jawab, semoga bermanfaat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: