Tutorial Layout Android

  

Pada postingan kali ini, saya akan memberikan penjelasan tentang layout pada android. Terdapat 6 jenis layout pada aplikasi android, yaitu :

1.    Linear Layout

2.    Relative Layout

3.    Table Layout

4.    Grid View

5.    Tab Layout

6.    List View

Pada android untuk membuat layout file yang digunakan adalah xml, (tapi bisa juga membuat layout langsung pada file java). Untuk direktori layout ada pada folder layout.

1.    Linear Layout

Dalam linear layout, seperti namanya layout yang akan ditampilkan akan teratur secara linear, baik secara horizontal ataupun vertical.

Untuk vertical layout :

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

Untuk horizontal layout :

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

Gambar diatas merupakan 2 jenis perbedaan pada horizontal dan vertical layout. Berikut langkah -langkah untuk membuat linear layout.

1.    buat project baru

2.    pada project, klik kanan folder layout, dan buat file xml baru, beri nama linearlayout.
res/layout -> Right Click -> New -> Layout resource file

3.    kemudian buka file linearlayout yang telah dibuat, dan masuk kedalam code form (Text). lalu copy code dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        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="@color/colorPrimary"
        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 membuat linearlayout sebagai layout yang akan tampil ketika android di run, buka file MainActivity.java dan ubah R.layout.activity_main menjadi R.layout.linearlayout

5.    Untuk run aplikasi ini, klik run menu dan kemudian run app, pilih emulator atau hp anda

2.    Relative Layout

Pada relative layout setiap elemen mengatur sendiri terhadap elemen lain atau elemen induk. Untuk lebih jelasnya dapat melihat gambar berikut :

Berikut adalah langkah - langkah untuk membuat relative layout :

1.    buat project baru

2.    pada project, klik kanan folder layout, dan buat file xml baru, beri nama relativelayout.
res/layout -> Right Click -> New -> Layout resource file

3.    kemudian buka file relativelayout yang telah dibuat, dan masuk kedalam code form (Text).

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android

    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"
            android:layout_centerHorizontal="true"/>
</RelativeLayout>

4.    Untuk membuat linearlayout sebagai layout yang akan tampil ketika android di run, buka file MainActivity.java dan ubah R.layout.activity_main menjadi R.layout. relativelayout

5.    Untuk run aplikasi ini, klik run menu dan kemudian run app, pilih emulator atau hp anda

3.    Table Layout

Dalam table layout di android cara kerjanya sama dengan table layout pada html. Kita bisa membagi layout menjadi Rows dan Columns. Berikut adalah contoh gambaran dari table layout :

Berikut adalah langkah - langkah untuk membuat table layout :

1.    buat project baru

2.    pada project, klik kanan folder layout, dan buat file xml baru, beri nama tablelayout.
res/layout -> Right Click -> New -> Layout resource file

3.    kemudian buka file tablelayout yang telah dibuat, dan masuk kedalam code form (Text).

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:text="Row 2 column 1"
            android:layout_weight="1"
            android:background="#dcdcdc"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
        <TextView
            android:text="Row 2 column 2"
            android:layout_weight="1"
            android:background="#d3d3d3"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
        <TextView
            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:text="Row 3 column 1"
            android:layout_weight="1"
            android:background="#b0b0b0"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
        <TextView
            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.    Untuk membuat linearlayout sebagai layout yang akan tampil ketika android di run, buka file MainActivity.java dan ubah R.layout.activity_main menjadi R.layout. tablelayout

5.    Untuk run aplikasi ini, klik run menu dan kemudian run app, pilih emulator atau hp anda