Menggunakan Linear Layout dengan Mudah pada Android

Panduan Membuat Aplikasi untuk Pemula

Selain intent salah satu hal yang paling penting dan harus diperhatikan dalam membuat aplikasi android adalah pengaturan layout aplikasi.

Ada beberapa layout yang bisa kita gunakan untuk membangun User interface (UI) yang menarik pengguna, diantaranya yaitu :

  • Linear Layout
  • Relative Layout
  • Absolute Layout
  • Frame Layout

Linear Layout pada Android

Linear Layout merupakan layout yang berfungsi untuk menampilkan komponen-komponen aplikasi contohnya : teks, tombol, gambar dan lainnya dengan cara vertikal ataupun horizontal. 

Kesederhanaan Linear Layout memudahkan penggunaan namun membatasi fleksibilitasnya. Untuk aplikasi yang memiliki design tidak terlalu kompleks maka linear layout sangat cocok untuk digunakan. 

Sumber : Androidinterview

 

Beberapa tag pada xml yang digunakan pada Linear Layout yaitu :

1. Tag LinearLayout

Pada saat kita membuat project baru menggunakan android studio defaul layout yang digunakan adalah RelativeLayout.

Maka kita harus merubahnya menggunakan Tag LinearLayout yaitu tag pembuka dari Linear Layout, juga harus dilengkap dengan layout_width dan height jika tidak maka akan terjadi error. Untuk orientationnya sendiri defaultnya horizontal.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    

2. Tag Orientation

Kita dapat mengatur orientasi untuk ditampilkan secara horisontal atau vertikal, sehingga item muncul dalam satu kolom atau satu baris. Lengkapi kode diatas dengan menambahkan tag :

android:orientation="horizontal"

sehingga menjadi :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:orientation="horizontal">

Orientation Horizontal

Contoh pengguna tag orientation horizontal yaitu :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold" />

</LinearLayout>

Maka hasilnya seperti gambar dibawah ini :

Menggunakan Linear Layout dengan Mudah pada Android
Orientation Horizontal

 

Orientation Vertical

Contoh pengguna tag orientation vertical yaitu :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
</LinearLayout>

 

Maka hasilnya akan seperti gambar dibawah ini :

Menggunakan Linear Layout dengan Mudah pada Android
Orientation Vertical

 

3. Tag Layout Gravity

Tag gravity digunakan untuk mengatur tata letak komponen yang ada pada linear layout. Contohnya :

android:layout_gravity="center "

Tag tersebut digunakan untuk mengatur tata letak komponen agar berada di tengah. Penerapannya yaitu :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical" >

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:background="@color/colorAccent"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>
</LinearLayout>

Maka hasilnya :

layout_gravity center

 

layout_gravity right

Yang lainnya bisa kamu coba sendiri layout_gravity : center, right, left, dan bottom. 

 

4. Tag Weight

Weight digunakan untuk memberikan bobot pada komponen layout. Contohnya sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="teks 1"
        android:background="@color/colorAccent"
        android:layout_weight="5"/>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="teks 2"
        android:background="@color/colorPrimary"
        android:layout_weight="5"/>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="teks 3"
        android:background="@color/colorPrimaryDark"
        android:layout_weight="5"/>

</LinearLayout>

Maka hasilnya akan seperti gambar dibawah ini :

Weight pada orientation horizontal

 

Itulah cara penerapan Linear Layout. Kamu bisa mencobanya lebih dalam lagi agar saat membuat UI aplikasi android menjadi lebih mudah dan indah.

 

Bagian berikutnya >