LAYOUT | Cara Menggunakan ConstraintLayout (PART 1)

Pendahuluan

      Membuat desain halaman antarmuka android studio tidak akan terlepas dari komponen-komponen yang diletakkan ke UI android. Komponen ini sebagai garis tegas bagi user bagaimana user dapat berinteraksi dengan aplikasi. Ada banyak komponen yang di sediakan oleh Android Studio, seperti TextView, EditTExt, Button, ImageView dan lain sebagainya. Masing-masing komponen tersebut memiliki Atribut seperti komponen TextView, atributnya text, textColor, TextSize, dan lain sebagainya.

     Layout merupakan teknik penyusunan dari elemen-elemen atau komponen yang berhubungan dengan sebuah bidang sehingga membentuk susunan artistik. Dengan adanya layout maka semua komponen yang di letakkan di dalam UI android dapat disusun sesuai dengan keinginan. User yang berinteraksi dengan aplikasi akan mudah memahami dan mengoperasikan aplikasi.

      Layout mempunyai tinggi (Layout_height)dan dan lebar (Layout_width). Nilai yang dikandung oleh tinggi dan lebar ada dua jenis:

1. Nilai standar seperti. Nilai ini dapat dtentukan besarnya. Satuannya adalah dp. Contoh penulisan

    android:layout_width="200dp"
    android:layout_height="100dp"

2. Nilai Default, nilai yang mengikuti lebar sebuah perangkat dan tinggi sebuah perangkat atau komponen. ada 2 jenis pemakainnya, berikut contohnya

    android:layout_width="match_parent" -> Nilai menyesuaikan perangkat
    android:layout_height="match_parent"->nilai menyesuaikan komponen yang dikandungnya

Math_Parent        => menyesuaikan tinggi/lebar sesuai dengan emulator.

Wrap_content      => menyesuaikan tinggi/lebar sesuai dengan komponen

    

    Penulisan sebuah layout terdiri dari tag penutup dan tag pembuka. Berikut contoh penulisan sebuah layout:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"> Tag Pembuka
        //Komponen disini
</android.support.constraint.ConstraintLayout> ->Tag Penutup

    

    Sedangkan komponen yang dimiliki oleh layout diletakkan di antara tag pembuka dan tag penutup. Berikut Contohnya:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>

    

    Tujuan utama layout adalah menampilkan elemen gambar, komponen atau teks agar menjadi komunikatif, sehingga memudahkan pembaca menerima informasi yang disajikan. 

    Ada beberapa jenis layout yang umum di gunakan di android studio:

1. ConstraintLayout

    Layout ini merupakan layout yang di rekomendasikan oleh android studio. Saat pertama kali anda membuat sebuah projek, android studio telah menawarkan layout berupa ConstrainLayout. Perhatikan code di activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

</android.support.constraint.ConstraintLayout>

    ConstraintLayout memungkinkan Anda membuat tata letak yang kompleks dan besar dengan hirarki tampilan datar (tidak ada kelompok tampilan bertingkat). ConstraintLayout merupakan kelanjutan dari RelativeLayout, tetapi lebih fleksibel dari RelativeLayout dan lebih mudah digunakan dengan Layout Editor Android Studio.

    Atribut yang harus ditambahkan pada komponen yang ada didalam constrainLayout adalah

app:layout_constraintBottom_toBottomOf="parent"    =>posisi komponen bagian bawah
app:layout_constraintEnd_toEndOf="parent"          =>posisi komponen bagian kanan
app:layout_constraintStart_toStartOf="parent"      =>posisi komponen bagian kiri
app:layout_constraintTop_toTopOf="parent"          =>posisi komponen bagian atas

    Sedangkan masing-masing atribut diatas memiliki pasangan margin:  MarginTop, Margin Bottom, MarginLeft, MarginRight.   

Kita analogikan bahwa layout adalah sebuah bidang kelas yang didalamnya terdapat 4 buah meja seperti gambar dibawah in:

    Antara meja 1 kedinding maka atribut adalah:

app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="100dp"

dengan nilai dari consstrainTop adalah parent, artinya jarak antara komponen dengan tepi perangkat. Sedangkan pasangannya adalah marginTop. Jika kita komponen berada dibawah atau disamping komponen lain maka nilai untuk constrain adalah id dari komponen tersebut.

Contoh kasus:

        Buatlah projek baru dengan nama Latihan_app. Bahasa yang digunakan adalah java/Kotlin dengan activity empty_activiyy. Masuk ke halaman activity_main.xml dan lengkapi code seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/meja1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Meja 1"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="100dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginLeft="180dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Meja 2"
        app:layout_constraintTop_toBottomOf="@+id/meja1"
        android:layout_marginTop="100dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="175dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="150dp"/>
</android.support.constraint.ConstraintLayout>

    Jalankan program dengan mengklik icon persegi tiga warna hijau di toolbar. Perhatikan bentuk desainnya.

Tonton kami di youtube:

Penutup

    Nah, itulah sekilas tentang layout ConstraintLayout. Bagaimana apa anda sudah dapat memahaminya?! Ikut terus tutorial ini karena masih banyak lagi yang akan di bahas.

Kunjungi Materi Tentang Layout

1.  Constrain Layout
2. Relative Layout
3. Linear Layout