Tutorial Android Studio : #3 Cara Menggunakan Linear Layout pada Android Studio

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 

Pada tutorial ini akan dibahas cara menggunakan Linear Layout pada Android Studio. Linear Layout merupakan layout yang berfungsi untuk menampilkan komponen-komponen aplikasi (widget) contohnya : teks, tombol, gambar dan lainnya dengan cara berurutan secara 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. 

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 ConstraintLayout. Maka kita harus merubahnya menggunakan Tag LinearLayout yaitu tag pembuka dari Linear Layout, juga harus dilengkapi 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

</LinearLayout>

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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height=wrap_content"
    android:orientation="horizontal"
    tools:context=".MainActivity">

</LinearLayout>

a. Orientation Horizontal

Berikut contoh pengguna tag orientation horizontal, buat layout baru misal dengan cara File->New->Activity->Empty Activity beri nama misal dengan nama LinearLayoutHorizontal :

<?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"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    tools:context=".LinearLayoutHorizontal">

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:background="@color/purple_200"
        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/purple_200"
        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/purple_200"
        android:layout_margin="2dp"
        android:textColor="#fff"
        android:textStyle="bold"/>

</LinearLayout>

Maka hasilnya seperti gambar dibawah ini :

b. Orientation Vertical

Berikut contoh pengguna tag orientation verticalal, buat layout baru misal dengan cara File->New->Activity->Empty Activity beri nama misal dengan nama LinearLayoutVertical :

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".LinearLayoutVertical">

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/purple_200"
        android:text="Button 1"
        android:textColor="#5E35B1"
        android:textStyle="bold" />

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/purple_200"
        android:text="Button 2"
        android:textColor="#5E35B1"
        android:textStyle="bold" />

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/purple_200"
        android:text="Button 3"
        android:textColor="#5E35B1"
        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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center"
    tools:context=".LinearLayoutVertical">

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/purple_200"
        android:text="Button 1"
        android:textColor="#5E35B1"
        android:textStyle="bold"

        />

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/purple_200"
        android:text="Button 2"
        android:textColor="#5E35B1"
        android:textStyle="bold" />

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/purple_200"
        android:text="Button 3"
        android:textColor="#5E35B1"
        android:textStyle="bold" />

</LinearLayout>

Maka hasilnya :

Value yang lainnya bisa dicoba sendiri seperti : 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"
    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"
    tools:context=".TagWeight">

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

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

</LinearLayout>

Maka hasilnya akan seperti gambar dibawah ini :

Demikian cara penerapan Linear Layout. Silahkan mencobanya lebih dalam lagi agar saat membuat UI aplikasi android menjadi lebih mudah dan indah.

Semoga bermanfaat, jika ada pertanyaan silahkan tuliskan di kolom komentar.