Android Layout

Versi 1.0

1. Mengenal Layout

Layout merupakan salah satu komponen user interface pada aplikasi Android yang berperan sebagai suatu grup yang terstruktur dari beberapa komponen user interface (view). Layout ini menggabungkan beberapa view seperti Button dan Text Fields atau yang lain yang disusun menjadi sebuah halaman aplikasi Android. Layout ada dua yaitu Linear Layout dan Relative Layout.

1.1. Linear Layout
Linear Layout adalah layout yang menggabungkan view dalam satu urutan secara vertikal atau horizontal. Linear Layout dibuat dengan elemen xlm <Linearlayout>. Urutan dari LinearLayout didefinisikan pada atribut android:orientation dengan value vertical atau horizontal. Contoh Linear Layout adalah sebagai berikut.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
1.2. Relative Layout
Relative Layout adalah layout yang menyusun view-view di dalamnya sebagai view anak secara relatif. Penyusunan view-view anak, dilakukan secara relatif terhadap sesama view anak atau relatif terhadap view induk. Relative Layout lebih fleksibel digunakan untuk membuat halaman user interface dibandingkan dengan Linear Layout.
Pengaturan posisi view yang relatif terhadap view lain, antara lain menggunakan atribut berikut ini:

  • android:layout_toRightOf
  • android:layout_toLeftOf
  • android:layout_below
  • android:layout_above

Pengaturan posisi view yang relatif terhadap view induk, antara lain menggunakan atribut berikut ini:

  • android:layout_alignParentTop
  • android:layout_alignParentBottom
  • android:layout_centerVertical
  • android:layout_centerHorizontal

Contoh penggunaan Relative Layout :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <EditText
        android:id="@+id/input1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/input2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/input1"
        android:layout_toLeftOf="@+id/button1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/input1" />

    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1" />

</RelativeLayout>

2. Menampilkan Layout

Layout ditampailkan pada aplikasi dengan memanggil setContentView() di dalam fungsi onCreate() dengan memberikan parameter layout yang akan ditampilkan. Misalnya kita tampilkan Linear Layout dari contoh pada poin 1.1. di atas yang telah kita simpan pada file xml linear_layout.xml pada folder layout,  maka code dari fungsi onCreate() adalah sebagai berikut :
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
1
Untuk menampilkan Relative Layout pada contoh poin 2.2. di atas yang telah kita simpan pada file xml relative_layout.xml pada folder layout, maka code dari fungsi onCreate() adalah sebagai berikut :
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.relative_layout);
    }
2
Iklan