Mendesain User Interface Aplikasi Android dengan Constraint Layout


Bismillaahirrohmaanirrohiim. Android merupakan salah satu sistem operasi mobile yang saat ini banyak dipakai oleh orang-orang diseluruh dunia yang hadir dengan beragam aplikasi. Aplikasi-aplikasi yang dibuat ini menggunakan berbagai macam layout (View Group), diantaranya seperti Linear Layout, Relative Layout, Table Layout, Frame Layout dan yang terbaru adalah Constraint Layout. Tulisan kali ini akan saya jelaskan dasar-dasar dari Constraint Layout dan terakhir adalah praktek membuat user interface aplikasi android menggunakan Constraint Layout.

Konsep Dasar Views pada Android

Sebelum mulai menggunakan constraint layout, tentunya kita harus pahami dulu konsep dasar dari views. Views merupakan komponen pada android yang berhubungan langsung dengan user (pengguna), seperti textview, imageview, button dan masih banyak lagi yang lain. Selain itu terdapat pula view group, yaitu sebuah view yang didalamnya menampung atau membungkus berbagai macam view. Contoh view group itu yang tadi sudah disebutkan diawal, yaitu ada Linear Layout, Relative Layout, Constraint layout, dan lain-lain.

Bila divisualisasikan, sebuah view memiliki bentuk dan bagian seperti pada gambar berikut.

Bentuk dan Bagian dari Sebuah View pada Android

Start dan end merupakan bagian kiri dan kanan dari view. Penggunaan Start dan End menggantikan penyebutan untuk Left dan Right. Sedangkan Top dan Bottom merupakan bagian atas dan bawah dari view.

Bila terdapat dua view (biru dan hijau) yang berdampingan dan berada didalam sebuah constraint layout (warna jingga), maka dapat divisualisasikan seperti pada gambar berikut ini.

Constraint layout yang membungkus view biru dan view hijau disebut sebagai Parent. Sehingga bagian Top dan Bottom dari kedua view diatas Constraint terhadap Parent.

Sebelah kiri (Start) dari view biru constraint terhadap parent, dan sebelah kanan (End) dari view hijau constraint terhadap parent.

Atau jika dalam bentuk coding XML nya dapat ditulis seperti berikut ini (perhatikan bagian highlight).

<TextView
        android:id="@+id/biru"
        android:background="@color/biru"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="100dp"
        android:layout_height="100dp"/&gt;
    
<TextView
        android:id="@+id/hijau"
        android:background="@color/hijau"
        app:layout_constraintStart_toEndOf="@+id/biru"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="100dp"
        android:layout_height="100dp"/&gt;

Pada sintax XML diatas terdapat constraintStart_toStartOf = “parent” yang artinya bagian kiri (Start) dari view tersebut digandengkan ke bagian kiri (Start) dari parent. Lalu ada lagi constraintTop_toTopOf=”parent” artinya bagian atas (Top) dari view tersebut digandengkan ke bagian atas (Top) dari parent.

Terus saya ambil salah satu contoh lagi untuk view yang memiliki ID hijau. Disitu terdapat sintax constraintStart_toEndOf=”@+id/biru yang artinya bagian kiri (Start) dari view hijau digandengkan dengan bagian kanan (End) dari view ber-ID biru.

Hasilnya dapat dilihat seperti pada gambar berikut.

Output dari contoh penggunaan Constraint

Oh iya, perlu diingat bahwa setiap view minimal harus terdapat 2 (dua) constraint terhadap view yang lain.

Praktek Membuat User Interface Aplikasi Android

Seperti yang sudah saya jelaskan di atas, diakhir tulisan ini akan kita praktekkan sendiri penggunaan constraint layout untuk mendesain user interface dari aplikasi android. Disini kita akan membuat tampilan seperti gambar berikut ini.

Output menggunakan Constraint dan Linear Layout

Karena disitu kita akan menggunakan gambar, silakan teman-teman gunakan gambar dari tautan ini atau silakan cari gambar sesuai selera dan nantinya letakkan pada res > drawable.

Buat sebuah project baru lalu bagian activity_main.xml ketikkan sintaks XML berikut ini. Oh iya, gak tau kenapa setiap tanda “>” berubah jadi “& gt;”, jadi silakan disesuaikan ya.

<?xml version="1.0" encoding="utf-8"?&gt;
<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/background"
    tools:context=".MainActivity"&gt;

    <ImageView
        android:id="@+id/iv_poster"
        android:src="@drawable/hotel"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:contentDescription="@string/poster_hotel"
        android:layout_width="match_parent"
        android:layout_height="450dp"/&gt;
    <LinearLayout
        android:id="@+id/ll_container_harga"
        android:orientation="vertical"
        android:background="@android:color/black"
        android:alpha="0.75"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/iv_poster"
        android:layout_marginBottom="@dimen/val16"
        android:layout_marginEnd="@dimen/val16"
        android:padding="@dimen/val16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"&gt;

        <TextView
            android:id="@+id/tv_label_price"
            android:text="@string/price_539"
            android:textColor="@android:color/white"
            android:textSize="24sp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;

        <TextView
            android:id="@+id/tv_night"
            android:text="@string/night"
            android:textColor="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;

    </LinearLayout&gt;

    <LinearLayout
        android:id="@+id/ll_container_detail"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/iv_poster"
        app:layout_constraintEnd_toEndOf="parent"
        android:padding="@dimen/val16"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"&gt;

        <TextView
            android:id="@+id/tv_hotel_name"
            android:text="@string/kesuma_hotel"
            android:textSize="22sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;

        <TextView
            android:id="@+id/tv_5_stars"
            android:paddingBottom="@dimen/val16"
            android:text="@string/label_5_stars"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;

        <TextView
            android:id="@+id/tv_address"
            android:background="@android:color/white"
            android:text="@string/address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;
    </LinearLayout&gt;

    <LinearLayout
        android:id="@+id/ll_container_button"
        android:orientation="horizontal"
        android:weightSum="1"
        android:layout_marginTop="@dimen/val16"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ll_container_detail"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"&gt;

        <Button
            android:id="@+id/btn_book"
            style="@style/Widget.AppCompat.Button.Colored"
            android:text="@string/book_now"
            android:padding="@dimen/val16"
            android:layout_weight="0.5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;

        <Button
            android:id="@+id/btn_share"
            android:text="@string/share"
            android:padding="@dimen/val16"
            android:layout_weight="0.5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/&gt;

    </LinearLayout&gt;

</androidx.constraintlayout.widget.ConstraintLayout&gt;

Pada bagian res > values > color.xml isi dengan baris berikut:

<?xml version="1.0" encoding="utf-8"?&gt;
<resources&gt;
    <color name="colorPrimary"&gt;#008577</color&gt;
    <color name="colorPrimaryDark"&gt;#00574B</color&gt;
    <color name="colorAccent"&gt;#D81B60</color&gt;
    <color name="background"&gt;#F0F0F0</color&gt;
</resources&gt;

Pada bagian res > values > dimens.xml isi dengan baris berikut:

<?xml version="1.0" encoding="utf-8"?&gt;
<resources&gt;
    <dimen name="val16"&gt;16dp</dimen&gt;
</resources&gt;

Dan terakhir untuk bagian res > values > strings.xml isi dengan baris berikut:

<resources&gt;
    <string name="app_name"&gt;My Constraint Layout</string&gt;
    <string name="price_539"&gt;$ 539</string&gt;
    <string name="night"&gt;/ night</string&gt;
    <string name="poster_hotel"&gt;Poster Hotel</string&gt;
    <string name="kesuma_hotel"&gt;Kesuma Hotel</string&gt;
    <string name="label_5_stars"&gt;5 stars</string&gt;
    <string name="address"&gt;Kesuma Hotel beralamat di Jalan Raja Ali Haji No. 5 - 6, Pekanbaru. Letaknya dekat dengan masjid dan pasar tradisional sekitar 2 menit perjalanan. Dan sekitar 10 menit perjalanan menuju bandara.</string&gt;
    <string name="book_now"&gt;Book Now</string&gt;
    <string name="share"&gt;Share</string&gt;
</resources&gt;

Bagaimana, mudah bukan? Demikianlah tahapan mendesain User Interface Aplikasi Android dengan menggunakan Constraint Layout. Dengan menyelesaikan membaca tutorial ini, teman-teman sudah belajar tentang berbagai macam views dan viewgroup pada Android. Melakukan desain user interface dengan menggunakan constraint layouti yang dipadukan dengan Linear Layout.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.