Menggunakan Linear Layout dengan Mudah pada Android

Bagaimana cara menggunakan Linear Layout pada aplikasi android ? Inilah tutorialnya.

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
• Constrait Layout 

Cara Menggunakan Linear Layout pada Android Studio

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

Baca Juga :

• Antarmuka dan Struktur project folder android studio 
• Menggunakan intent dengan mudah pada android studio 

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

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 :

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 :

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 :

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

Baca juga :

• Cara menggunakan drawable, string, dan style 
• Cara Menjalankan Project Android Langsung di Smartphone

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 :

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