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.