Layout Android Studio | ConstraintLayout (Bagi 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.

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

      Layout merupakan bidang yang didalamnya
terdapat komponen-komponen. 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 diantara tag pembuka dan tag penutup.

Tujuan Pembuatan Layout

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

ConstraintLayout

    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 hierarki 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 analogkan 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 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.

Penutup

    Nah, itulah sekilas tengang layout ConstraintLayout. Bagaimana apa anda sudah dapat memahaminya?!