Android Layouts Tutorial

Hai sobat, pada artikel sebelumnya tentang perbedaan UI dan UX saya telah menjelaskan pengertian UI dan UX, perbedaan UI dan UX, penerapan dan pengaruhnya. Dan pada kesempatan kali ini saya akan menjelaskan tentang Layout pada Android.

Menurut website official Android, Layout dalam android mendefinisikan struktur visual untuk antarmuka pengguna seperti UI sebuah aktivitas atau widget aplikasi. Layout adalah class yang menampung komponen yang ada pada layar, mengatur komonen dan membuatnya menjadi satu.

Layout android memiliki bermacam macam tipe seperti linear layout, reative layout, dan scrollview layout. Berikut penjelasan masing-masing tipe :

Linear Layout

Linear layout adalah view group yang menyusun komponen di dalamnya di satu tata letak secara garis lurus, horizontal maupun vertical. Untuk mengaturnya, sobat bisa menggunakan atribut android:orientation. Komponen yang ada di dalamnya akan tersusun satu demi satu secara horizontal maupun vertical. Berikut adalah contoh kode untuk membuat linear layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.blogsetyaaji.linearlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Baris Pertama"
            android:textSize="20sp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Baris Kedua"
            android:textSize="20sp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Baris Pertama"
            android:textSize="20sp"
            android:paddingRight="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Baris Kedua"
            android:textSize="20sp"/>

    </LinearLayout>

</LinearLayout>

Untuk kode di atas, maka tampilannya akan seperti gambar di bawah ini:

Dalam linear layout, terdapat konfigurasi atau atribut di dalamnya seperti berikut ini :

Orientation; untuk mengonfigurasi tampilan layout berdasarkan baris atau kolom atau horizontal atau vertical. Contoh sintaksnya yaitu : android:orientation=”vertical”
Weight; atribut ini mengatur seberapa pentig komponen untuk berapa banyak ruang yang dibutuhkan untuk tampil di layar. Komponen yang memiliki kepentingan paling banyak dapat mengisi ruang yang tersisa.

Relative layout

Dengan relative layout, kita bisa mengatur objek sesuai atau mengikuti objek lain, berbeda dengan linear layout yang objeknya saling berurutan, relative layout bersifat lebih bebas. Berikut contoh sintaks untuk relative layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.blogsetyaaji.relativelayout.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="ATAS" />

    <Button
        android:id="@+id/btnbawah"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="BAWAH" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btnbawah"
        android:layout_alignParentRight="true"
        android:text="KANAN" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btnbawah"
        android:layout_alignParentLeft="true"
        android:text="KIRI" />

</RelativeLayout>

Hasi dari kode di atas akan menjadi seperti gambar di bawah ini:

Untuk objek yang berada di linear layout, sobat bisa menggunakan atribut layout sesuai kebutuhan seperti atribut android:layout_alignParentLeft, android:layout_above, android:layout_toLeftOf dan sebagainya.

Frame Layout

Frame layout biasanya digunakan untuk menampilkan satu komponen, apabila sobat ingin menampilkan satu komponen lebih, maka frame layout akan menampilkannya secara tumpang tindih. Berikut contoh sintaksnya :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.blogsetyaaji.framelayout.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="I am in here"
        android:gravity="center"
        android:textSize="24sp" />
        
</FrameLayout>

Hasil dari kode di atas akan menjadi seperti gambar berikut ini :

Absolute layout

Absolute layout digunakan untuk mengatur objek berdasarkan koordinat x dan y, x untuk ke samping dan y untuk ke bawah. Contoh sintaksnya seperti berikut ini :

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.blogsetyaaji.absolutelayout.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 1"
        android:textSize="20sp"
        android:layout_x="30dp"
        android:layout_y="10dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 2"
        android:textSize="20sp"
        android:layout_x="50dp"
        android:layout_y="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 3"
        android:textSize="20sp"
        android:layout_x="70dp"
        android:layout_y="100dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tombol"
        android:layout_x="100dp"
        android:layout_y="150dp" />

</AbsoluteLayout>

Dan hasilnya akan seperti berikut ini :

Scrollview layout

Scrollview layout digunakan untuk mengatur atau menampikan kumpulan objek yang banyak dan detail serta objek yang melebihi ukuran layar. Dengan menggunakan scrollview, sobat bisa menggeser layar ke bawah atau ke samping tergantung atribut orientasi yang digunakan, vertcal atau horizontal. Berikut contoh sintaksnya :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.blogsetyaaji.scrollviewlayout.MainActivity">

    <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="Baris Satu" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Baris Dua" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Baris Tiga" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tombol"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Baris Lima" />

    </LinearLayout>

</ScrollView>

Dan hasilnya akan seperti berikut ini :

Dari beberapa layout di atas, maka sobat juga bisa menggabungkannya menjadi satu tampilan sesuai kebutuhan sobat. Sebagai contoh yang saya buat di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical"
    tools:context="com.blogsetyaaji.layout.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:text="KIRI" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:text="KANAN" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="100dp"
            android:text="TENGAH" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="250dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="#03A9F4"
                    android:gravity="center_horizontal"
                    android:text="Baris Kesatu"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="#00BCD4"
                    android:gravity="center_horizontal"
                    android:text="Baris Kedua"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/Linear2"
                android:layout_width="fill_parent"
                android:layout_height="350dp"
                android:layout_weight="1"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="#F48FB1"
                    android:gravity="center_horizontal"
                    android:text="Baris Pertama"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="#F06292"
                    android:gravity="center_horizontal"
                    android:text="Baris Kedua"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="#EC407A"
                    android:gravity="center_horizontal"
                    android:text="Baris Ketiga"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="#E91E63"
                    android:gravity="center_horizontal"
                    android:text="Baris Keempat"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

            </LinearLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="#FFEB3B"
                    android:gravity="center"
                    android:text="Farame Layout"
                    android:textColor="#212121"
                    android:textSize="30sp" />

            </FrameLayout>

            <AbsoluteLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#009688">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_x="10dp"
                    android:layout_y="20dp"
                    android:text="Text Absolut 1"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_x="95dp"
                    android:layout_y="100dp"
                    android:text="Text Absolut 2"
                    android:textColor="#ffffff"
                    android:textSize="30sp" />

            </AbsoluteLayout>

        </LinearLayout>

    </RelativeLayout>

</ScrollView>

Hasil dari contoh kode di atas akan seperti gambar berikut ini :

Pada intinya semua jenis layout memiliki fungsi dan bagian masing-masing, tergantung kebutuhan kita. Sekian penjelasan singkat saya tentang tutorial dan macam layout pada android, semoga membantu sobat yang sedang belajar seperti saya.