LAYOUT | Desain Antarmuka Dengan Memanfaatkan Gabungan Layout

    

Pendahuluan

    Seperti yang sudah dibahas sebelumnya pada bagian :

• ConstrainLayout
• RelativeLayout
• LinearLayout

    Bahwa masing-masing layout memiliki keutamaan tersendiri namun juga memiliki kekurangannya tersendiri. Tapi disini kita tidak akan mengupas tentang kelebihan dan kekurangan dari masing-masing layout tersebut. 

Menggabungkan Beberapa Layout 

    Timbul satu pertanyaan, Apakah ke 3 layout tersebut bisa digabung didalam satu GUI?

    Jawab: Bisa. Ketiga layout tersebut dapat digabung didalam satu GUI. Bahkan satu atau lebih layout dapat juga diletakkan didalam layout yang lain. Maksudnya?

Mari kita praktekkan

1. Buatlah projek baru dengan activity Empty Activity dan settingannya sebagai berikut:

name : AppLayout:

language : java

    Masuk ke halaman activity_main.xml. Di halaman tersebut kita sudah memiliki sebuah layout, yaitu ConstraintLayout. Di dalam layout tersebut kita tambahkan dua layout, yaitu Relative layout dan LinearLayout. Berikut bentuk source nya:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/purple_200" -> Merubah warna Background.
    tools:context=".MainActivity">
    <RelativeLayout
        android:id="@+id/layoutRelative"
        android:layout_width="match_parent"
        android:background="@color/white"
        android:layout_height="200dp">
        //Komponen Disini
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="@color/white"
        app:layout_constraintTop_toBottomOf="@+id/layoutRelative"
        android:layout_marginTop="50dp">
        //Komponen Disini
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

    Perhatikan layout ConstraintLayout. Layout tersebut kita tambahkan satu atribut untuk memberikan warna latar belakang => android:background="@color/purple_200".

   Sedangkan Pada layout RelativeLayout kita tambahkan satu atribut, yaitu atribut id. Bentuk atribut itu adalah  android:id="@+id/layoutRelative". 

    Selanjutnya kita mauk ke layout LinearLayout. LayoutLinear terdapat dua buah atribut. yang pertama atribut  app:layout_constraintTop_toBottomOf="@+id/layoutRelative". Atribut ini memberikan satu perintah agar layout berada dibawah layout RelativeLayout. Sedangkan atribut android:layout_marginTop  merupakan artibut yang memberikan jarak antara RelativeLayout dengan LinearLayout.

    Tambahkan 3 buah TextView. Berikut Bentuk penulisannya:

<RelativeLayout
    android:id="@+id/layoutRelative"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="200dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Relative 1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="150dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="100dp"
        android:text="Relative 2"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Relative 3"/>

</RelativeLayout>

   

Selanjutnya tambah juga 3 TextView pada Linear Layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical"
    android:background="@color/white"
    app:layout_constraintTop_toBottomOf="@+id/layoutRelative"
    android:layout_marginTop="50dp">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/teal_200"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"/>

</LinearLayout>

Penutup

    Nah, Dari praktek diatas apa yang dapat anda pelajari? silahkan tulis di kolom komentar...