Belajar Menggunakan Linear Layout di Android Studio

Dalam artikel ini saya akan membahas mengenai Linear Layout di Android Studio. Sebelumnya saya juga sudah membahas sedikit mengenai Linear Layout ini pada artikel Belajar Memahami ViewGroup di Android Studio. Anda bisa membaca artikel tersebut untuk mengenal ViewGroup di Android Studio.

ViewGroup Linear Layout di Android Studio

Seperti yang saya sebutkan dalam artikel sebelumnya bahwa Linear Layout adalah ViewGroup yang digunakan untuk membuat tampilan/view yang di dalamnya secara lurus berupa kolom atau baris. Untuk memahami pernyataan ini cobalah anda lihat contoh di bawah ini.

<?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="200dp"
    android:orientation="vertical"
    android:background="#F44336"
    android:padding="15dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"
        android:textColor="#FFF"
        android:textSize="30sp"
        android:background="#3F51B5"
        android:layout_margin="10dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 2"
        android:textColor="#FFF"
        android:textSize="30sp"
        android:background="#3F51B5"
        android:layout_margin="10dp"/>
</LinearLayout>

Dan berikut adalah tampilan aplikasi ketika di jalankan.

Contoh Linear Layout

Saya menggunakan background berwarna merah untuk memperjelas bahwa, tampilan TextView tersebut berada di dalam ViewGroup Linear Layout.

Dalam contoh diatas, ada satu atribut yang penting digunakan dalam Linear Layout ini. Atribut tersebut adalah android:orientation. Atribut ini adalah atribut yang digunakan untuk menentukan apakah layout yang ingin kita gunakan berupa baris atau kolom. Nilai untuk atribut ini hanya ada dua yaitu horizontal untuk baris dan vertical untuk kolom.

Seperti yang terlihat dalam contoh diatas, saya menggunakan nilai atribut vertical sehingga layout yang didapatkan adalah berupa kolom. Nah, supaya anda tahu, cobalah anda untuk mengubah orientasinya menjadi horizontal, dan lihatlah apa yang terjadi.

Tentu saja, penggunaan nilai atribut vertical dan horizontal ini perlu digunakan sesuai kebutuhan. Misalkan kita membuat tata letak aplikasi untuk menampilkan daftar siswa. Untuk menampilkan daftar siswa, akan lebih bagus jika kita menggunakan orientasi vertical dibandingkan horizontal. Dengan orientasi vertical ini, orang akan lebih mudah untuk membacanya.

Untuk menambah sedikit pengetahuan anda mengenai Linear Layout ini, saya menambahkan satu contoh lagi yang sedikit kompleks. Berikut ini adalah contohnya.

<?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="vertical"
    android:background="#F44336"
    android:padding="15dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView 1"
            android:textColor="#FFF"
            android:textSize="30sp"
            android:background="#3F51B5"
            android:layout_margin="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView 2"
            android:textColor="#FFF"
            android:textSize="30sp"
            android:background="#3F51B5"
            android:layout_margin="10dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button 1"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button 2"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button 3"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="Button 3"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView 3"
            android:textColor="#FFF"
            android:textSize="30sp"
            android:background="#3F51B5" />
        <Button
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="Button 4"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/flavicon"
            android:scaleType="fitCenter"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView 4"
                android:textColor="#FFF"
                android:textSize="30sp"
                android:background="#3F51B5" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView 5"
                android:textColor="#FFF"
                android:textSize="30sp"
                android:background="#3F51B5" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Dan berikut adalah tampilan ketika aplikasi akan dijalankan.

Contoh Linear Layout 2

OK saya rasa artikel mengenai Cara Menggunakan Linear Layout di Android Studio ini sudah cukup. Meski artikel ini cukup sederhana, tapi saya yakin anda pasti bisa membuat tata letak aplikasi dengan menggunakan Linear Layout, karena ViewGroup yang satu ini merupakan ViewGroup yang sangat mudah digunakan dan jika menurut anda artikel ini sangat bermanfaat, tidak ada salahnya untuk membagikannya kepada teman-teman anda yang sedang belajar pemrograman android dengan android studio.

Terima Kasih.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.