Mengenal LinearLayout

LinearLayout merupakan ViewGroup yang mengatur widget lainnya untuk menampilkan satu arah, secara vertikal dan horizontal. Kita dapat mengatur arah layout dengan mendefinisikan atribut android:orientation di widget LinearLayout. Jika kita mendefinisikan android:orientation=”vertical”, anak (widget) di dalam LinearLayout akan ditumpuk satu sama lainnya secara vertikal. Berikut gambaran dari LinearLayout dengan orientasi secara vertikal.

linear-layout-vertikal.png (10 KB)

Jika kita mendefinisikan android:orientation=”horizontal”, anak (widget) dalam LinearLayout akan ditampilkan satu baris secara horizontal. Berikut gambaran dari LinearLayout dengan orientasi horizontal.

linear-layout-horizontal.png (17 KB)

Sekarang kita mencoba membuat project android studio baru untuk mempelajari LinearLayout dengan orientasi secara vertikal dan horizontal. Buat project baru seperti biasa, di window choose your project pilih Empty Activity dan selanjutnya di window Configure your project ikuti seperti berikut :

  • Name: "Belajar Layout Android"
  • Package name: "com.teknorial.belajarlayoutandroid"
  • Language: Java
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik Finish.

Setelah project berhasil dibuat, kita akan membuat layout baru berupa halaman login seperti pada gambar di bawah dengan menggunakan beberapa widget seperti : TextView, EditText, ImageButton, dan Button.

Linear Layout

Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada jendela New Resource File masukan data seperti berikut :

  • File name : "activity_login"
  • Root element : "LinearLayout"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.

menambah layout baru

new resource file

Buka layout activity_login.xml yang telah dibuat. Sekarang kita dapat melihat LinearLayout dengan orientasi vertikal menjadi element root. Sekarang akan menambahkan widget TextView, EditText dan Button menjadi anak dari Linearlayout. Silahkan ketik kode dibawah ke dalam activity_login.xml.

<?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">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Password"
        android:inputType="textPassword" />


    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Sign In" />

</LinearLayout>

Sekarang buka tab design untuk melihat tampilan layout activity_login.xml. Kita dapat melihat dengan mendefinisikan android:orientation=”vertical” maka anak/widget di dalam linear layout akan satu sama lainnya secara vertikal. Kamu dapat modifikasi beberapa atribut seperti android:gravity, android:margin dan beberapa atribut lainnya untuk kamu pelajari dan lihat apa yang terjadi di tab design.

linear layout horizontal android studio

Selanjutnya kita akan menambah beberapa widget ImageButton berupa tombol login via social media di dalam LinearLayout secara horizontal. Untuk Gambar ikon social media, kamu bisa download [di sini]. Copy ketiga gambar dan paste di folder drawable.

menambah icon di drawable

menambah icon di drawable

menambah icon di drawable

menambah icon di drawable

Tambahkan kode di bawah tepat di atas Button Sign In, kita akan menambahkan LinearLayout secara horizontal dengan widget ImageButton di dalamnya.

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <ImageButton
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_margin="5dp"
        android:background="@drawable/googleplus" />

    <ImageButton
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_margin="5dp"
        android:background="@drawable/fb" />

    <ImageButton
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_margin="5dp"
        android:background="@drawable/twitter" />

</LinearLayout>

Dengan atribut android:orientation=”horizontal” di LinearLayout akan membuat anak/widget di dalam LinearLayout akan ditampilkan satu baris secara horizontal. Buka kembali tab design dan lihat desain layout sudah kita buat.

hasil akhir linear layout

Kita telah menggunakan LinearLayout secara vertikal dan horizontal dalam satu layout. Berikut source code keseluruhan dari activity_login.xml yang telah kita buat.

<?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">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Password"
        android:inputType="textPassword" />


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="@drawable/googleplus" />

        <ImageButton
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="@drawable/fb" />

        <ImageButton
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="@drawable/twitter" />

    </LinearLayout>


    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Sign In" />

</LinearLayout>

Setelah ini, Coba memodifikasi beberapa atribut di dalam widget untuk mempelajari apa saja pengaruhnya terhadap widget tersebut. Demikian tutorial Mengenal LinearLayout. Kita telah berhasil membuat layout dengan menggunakan LinearLayout. Jika kamu mengalami kesulitan dalam mengikuti tutorial ini, jangan ragu untuk bertanya di grup telegram. Selanjutnya kita akan belajar Mengenal RelativeLayout. Tetap semangat belajar ya :) . Terima kasih.