Posts

Bismillah, pada kali ini kita akan membahas tentang Data Binding,

Data Binding merupakan salah satu bagian dari support library yang fungsinya untuk memudahkan kita dalam menyambungkan/mengikat sebuah data ke bagian UInya, sehingga kita tidak perlu melakukan set data secara manual melalui bagian kode programnya.

Untuk menggunakan Data Binding kita harus mengaktifkannya terlebih dahulu pada Build.gradle, dengan cara menambahkan potongan baris konfigurasi berikut :

android {
    ...
    dataBinding {
        enabled = true
    }
}

Jika gradlenya sudah di sinkronisasi maka kita sudah bisa menggunakan Data Binding.

Untuk memahami penggunaan Data Binding, kita akan membuat sebuah project sederhana, pada project ini kita akan membuat sebuah model User, lalu kita akan mencoba binding datanya ke UI.

Binding Sederhana

Buat sebuah project baru

Langkah selanjutnya kita buat class model User seperti berikut:

package id.rdev.databindingexample.model

data class User (
    val username: String,
    var email: String,
    var realname: String,
    var numberPhone: String
)

Langkah selanjutnya kita akan mengedit Layout activity_main.xml agar bisa menggunakan Data Binding, kita edit menjadi seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    
    <data>
        <variable
            name="user"
            type="id.rdev.databindingexample.model.User" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Profile"
            android:textSize="26sp"
            android:textStyle="bold"
            android:padding="8dp"
            android:textAlignment="center"
            android:layout_marginBottom="8dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{`Username : ` + user.username}"
            android:textSize="24sp"
            android:padding="8dp"
            android:layout_marginBottom="8dp"
            tools:text="Name : exampleusername"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{`Email: ` + user.email}"
            android:textSize="24sp"
            android:padding="8dp"
            android:layout_marginBottom="8dp"
            tools:text="Email : Example@mail.com"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{`Name : ` + user.realname}"
            android:textSize="24sp"
            android:padding="8dp"
            android:layout_marginBottom="8dp"
            tools:text="Name : Example Name"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{`Number phone : ` + user.numberPhone}"
            android:textSize="24sp"
            android:padding="8dp"
            android:layout_marginBottom="8dp"
            tools:text="Number phone : +62 8093 2340 22"/>

    </LinearLayout>

</layout>

Kita telah membuat viewnya, selanjutnya kita akan mencoba binding datanya dari MainActivity

package id.rdev.databindingexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import id.rdev.databindingexample.databinding.ActivityMainBinding
import id.rdev.databindingexample.model.User

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // example user
        val user = User("rizal", "syahrizal@mail.com", "Syahrizal Akbar", "+62 91238 19283")

        binding.user = user
    }
}

kita coba run maka hasilnya seperti berikut :

Selanjutnya kita akan coba menjalankan method pada MainActivity melalui layoutnya, kita tambahkan variable di layoutnya seperti berikut :

<data>
        ...
        <variable
            name="act"
            type="id.rdev.databindingexample.MainActivity" />
    </data>

lalu dia layoutnya kita tambahkan Button seperti berikut :

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SHOW USER"
            android:onClick="@{() -> act.printUser(user)}"/>

terakhir kita set variabelnya

override fun onCreate(savedInstanceState: Bundle?) {
        ...
        binding.act = this
    }

dan kita run

Selain itu kita juga bisa membuat exspression pada layoutnya, untuk membuatnya kita tambahkan isAdmin di modelnya seperti berikut :

data class User ( 
    ...
    var isAdmin: Boolean
)

lalu pada MainActivity kita tambahkan true diconstructor usernya

// example user
        val user = User("rizal", "syahrizal@mail.com", "Syahrizal Akbar", "+62 91238 19283", true)

jika sudah kita tambahkan TextView dilayoutnya untuk kita tampilkan jika dia sebagai admin

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@{user.username + ` is Admin`}"
    android:textSize="18sp"
    android:padding="8dp"
    android:background="@color/colorPrimary"
    android:textColor="@android:color/white"
    android:layout_marginBottom="8dp"
    android:visibility="@{user.isAdmin() ? View.VISIBLE : View.GONE}"
    tools:text="username is Admin"/>

jangan lupa import juga Viewnya

<data>
     <import type="android.view.View"/>
     ...
</data>

dan kita run lagi maka hasilnya seperti berikut :