Memahami Linear Layout pada Android Studio

Edisi tutorial Android Studio kali akan membicarakan tentang salah satu Layout manager pada Android, yaitu : Linear Layout.

Linear Layout menempatkan semua elemen anak (child element) kedalam satu kolom atau baris dimana penyusunan baris secara horizontal atau vertical bergantung pada atribut android:orientation.

Dalam contoh ini, kita akan menampilkan tiga buah button yang disusun secara horizontal dan vertical pada Linear Layout.

Linear Layout : Horizontal

1. Create project baru 
Berinama Linear Layout pada Application name. Pada Target Android Device pilih Phone and Tablet, kemudian set Minimum SDK : API 10 : Android 2.3.3 (Gingerbread). Lalu pilih Blank Activity, dan biarkan default untuk Activity Name : MainActivity.

2. Buka file res/layout/content_main.xml
Untuk setiap pembuatan project baru, secara default akan terbuat Relative Layout dan TextView yang mengandung string "Hello World". Pilih mode Text, kemudian gantilah Relative Layout pada dengan Linear Layout serta hapus kode TextView.

Untuk mengatur agar nantinya elemen-elemen yang berada didalam Linear Layout tersusun secara horizontal, tambahkan android:orientation="horizontal".

3. Membuat tombol
Masih dalam file content_main.xml, tambahkan tiga (3) button, sehingga file content_main.xml berisikan kode lengkap sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.linearlayout.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />

</LinearLayout>

Sehingga tampilan interfacenya akan ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Linear Layout : Vertical

Ikuti langkah-langkah 1 dan 2 seperti dalam pembuatan Linear Layout : Horizontal diatas,namun disini kita set secara vertical dengan menambahkan android:orientation="vertical".

Kemudian pada file content_main.xml, kita tambahkan tiga button seperti cara diatas. Kode lengkap untuk file content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.linearlayout.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />

</LinearLayout>

Sehingga akan terbuat interfacenya seperti yang ditunjukkan oleh Gambar.2 dibawah ini :

Gambar.2

Catatan :
Jika kita tambahkan “android:layout_weight“, maka komponen button akan mengisi sisi space yang tersedia dalam ruang Linear Layout

File content_main.xml yang mengandung android:layout_weight

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.linearlayout.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 3" />

</LinearLayout>

Output interfacenya ditunjukkan oleh Gambar.3 :

Gambar.3

Tweet

Subscribe to receive free email updates: