Mengenal Linear Layout dan Relative Layout pada Android

Mengenal Linear Layout dan Relative Layout pada Android - Sebelum kita lebih jauh mengenal linear layout dan relative layout, alangkah baiknya kita paham apa yang dimaksud dari Layout itu sendiri. Layout adalah display tata letak yang digunakan untuk mengatur penempatan komponen / elemen desain seperti gambar, teks , tombol dan komponen lain. Tujuan dari Layouting yaitu untuk menghasilkan sebuah tampilan yang sesuai dengan yang diinginkan pada sebuah aplikasi baik Web maupun Android.

Setelah kita tau pengertian dari layout, di Android khususnya Layout sendiri terdiri dari beberapa jenis antara lain Linear Layout, Relative Layout, Frame Layout, Constraint Layout, dan Table Layout. Tentunya, semua jenis layout ini mempunya kegunaannya masing. Umumnya, kita menggunakan linear dan relative sebagai tumpuan layout kita. Udah pada tau belum dengan perbedaan antara Linear Layout dan Relative Layout.

Mengenal Linear Layout

Linear Layout merupakan layout yang menempatkan komponen anaknya sejajar dengan arah orientasi Vertikal atau Horizontal.

Untuk menentukan arah orientasi dari Linear Layout, kita bisa menggunakan perintah android:orientation:. Kemudian, untuk menentukan penempatan elemen anak dari Linear Layout ini, kita bisa menggunakan perintah android:gravity:.

Contoh Kode / Program

Script :

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

    tools:context=".MainActivity">

    <LinearLayout

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:orientation="vertical"

        android:background="@color/colorAccent">

        <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Linear Layout 1"/>

    </LinearLayout>

    <LinearLayout

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:orientation="vertical"

        android:background="@color/colorPrimary"

        android:gravity="center">

        <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Linear Layout 2"/>

    </LinearLayout>

    <LinearLayout

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:orientation="vertical"

        android:background="@color/colorAccent2"

        android:gravity="center">

        <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Linear Layout 3"/>

    </LinearLayout>

</LinearLayout>

Kelebihan

Kelebihan dari Linear Layout yaitu layouting yang lebih mudah karena arah dari elemen anaknya ( Child View ) sudah ditentukan oleh parentnya. Dengan begitu, kita cukup menambahkan arah orientasi (Vertikal / Horizontal) pada parent untuk menentukan arah dari Child Viewnya.

Setelah kita mengenal Linear Layout, mari kita lanjut ke Relative Layout.

Mengenal Relative Layout

Relative Layout merupakan layout yang menempatkan elemen / widget di dalamnya seperti sebuah layer / lapisan. Berbeda dengan Linear Layout yang ditentukan arah orientasi parentnya, child view dari Relative Layout akan tertumpuk satu sama lain secara default. Posisi dari child view ini akan relatif / tergantung pada tag pembantu, margin dan padding pada elemen itu sendiri.

Untuk itu, relative layout sendiri mempunyai tag-tag pembantu untuk mempermudah penempatan elemen-elemennya.

Oh iya, saya mau jelasin lagi ya kalau di artikel ini

Elemen = Child View = Widget = Elemen Anak = Komponen

Mungkin saya kurang jelas hehe. Lanjut.

Tag Pembantu Relative Layout

Tag – tag pembantu dari relative layout antara lain :

• android:layout_alignParentBottom = Menempatkan komponen di bagian paling bawah parent.
• android:layout_alignParentTop  = Menempatkan komponen di bagian paling atas parent.
• android:layout_alignParentLeft  = Menempatkan komponen di bagian paling kiri parent.
• android:layout_alignParentRight =  Menempatkan komponen di bagian paling kanan parent.
• android:layout_below  = Menempatkan komponen di bagian bawah komponen lainnya.
• android:layout_above  = Menempatkan komponen di bagian atas komponen lainnya.
• android:layout_toLeftOf  = Menempatkan komponen di bagian kiri komponen lainnya.
• android:layout_toRightOf  = Menempatkan komponen di bagian kanan komponen lainnya.

Dengan tag-tag pembantu ini, tentunya membuat kita sebagai front-end developer akan jauh lebih leluasa dalam menempatkan elemen di dalam relative layout. Memang tujuan dari relative layout sendiri yaitu memudahkan pemakainya dalam hal layouting.

Contoh Kode / Program

Script :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_margin="5dp">

    <RelativeLayout

        android:layout_marginTop="200dp"

        android:layout_centerHorizontal="true"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="@color/colorAccent">

        <TextView

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Relative Layout 3"/>

    </RelativeLayout>

    <RelativeLayout

        android:layout_alignParentStart="true"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="@color/colorAccent2">

        <TextView

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Relative Layout 1"/>

    </RelativeLayout>

    <RelativeLayout

        android:layout_alignParentEnd="true"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="@color/colorPrimary">

        <TextView

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Relative Layout 2"/>

    </RelativeLayout>

    <RelativeLayout

        android:layout_alignParentBottom="true"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="@color/colorAccent">

        <TextView

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="Relative Layout 4"/>

    </RelativeLayout>

    <RelativeLayout

        android:layout_alignParentEnd="true"

        android:layout_alignParentBottom="true"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="@color/colorPrimaryDark">

        <TextView

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:textColor="@color/White"

            android:text="Relative Layout 5"/>

    </RelativeLayout>

</RelativeLayout>

Kelebihan :

Kelebihan dari relative layout antara lain Kita sebagai front-end developer akan lebih leluasa untuk menempatkan widget / komponen di layout kita. Untuk mencoba relative layout, alangkah baiknya anda pahami dulu tag-tag pembantunya.

Setelah kita mengenal linear layout dan relative layout, kita akan rangkum beberapa poin pentingnya di bawah ya.

Kesimpulan dan Rangkuman

Linear Layout merupakan layout yang menempatkan komponen anaknya sejajar dengan arah orientasi Vertikal / Horizontal (Baris / Kolom) . Sedangkan, Relative Layout merupakan layout yang menempatkan elemen / widget di dalamnya seperti sebuah layer / lapisan

Nah, bagaimana? Apa kalian sudah Mengenal Linear Layout dan Relative Layout lebih jauh ? Setelah kalian mengenal tentu tidak susah bagi kalian untuk mengetahui perbedaan dari linear dan relative layout.

Terima Kasih, sudah membaca artikel dari Funtechsy. Jangan lupa tinggalkan komentar ya, kalau kalian suka dengan artikel ini.

Share This :