Thursday Code : Data Binding

Credit by xda-developers.com

Hallo semuanyaa..

Selamat datang pada serial Thursday Code. Serial ini akan rilis tiap hari kamis yang berisikan tentang tutorial atau pengetahuan tentang development native Android dari beginner sampai advance. Kali ini Thurday Code akan membahas tentang Data Binding.

Definisi Data Binding

Menurut dari dokumentasi Developer Android, data binding merupakan library dukungan yang memungkinkan Anda mengikat komponen UI dalam tata letak ke sumber data di aplikasi Anda menggunakan format deklaratif, bukan secara terprogram.

Kenapa Pakai Data Binding ?

Penggunaan findviewbyid ternyata memakan resource untuk melalukan pemanggilan id view kita. Sehingga terciptanya data binding untuk meminimalir penggunaan resource android terlebih lagi juga merapikan kode.

Implementasi

Kali ini kita akan membuat aplikasi tambah kurang angka yang terdiri dari 2 button dan 1 textview untuk menampilkan score.

Tambahkan data binding pada gradle module kalian masing-masing dan sync project anda, jika terjadi error maka cek ulang.

.............
apply plugin: 'kotlin-kapt'

android {
    ....................

    dataBinding {
        enabled true
    }
    ......................
}

Pindah ke activity_main.xml kalian dan tambahkan tag layout dan masukkan semua komponen xml ke layout. Tag layout bersifat wajib untuk membungkus semua komponen layout menjadi data binding.

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
    
    </RelativeLayout>
</layout>

Pindahkan semua elemen xml yang bernama xmlns ke dalam tag layout.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <androidx.constraintlayout.widget.ConstraintLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />

    </RelativeLayout>
</layout>

ubah activity_main.xml kalian menjadi seperti dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:textSize="64sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="0" />

        <Button
            android:id="@+id/btn_increase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="Tambah"
            app:layout_constraintEnd_toStartOf="@+id/btn_decrease"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_score" />

        <Button
            android:id="@+id/btn_decrease"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="Kurang"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/btn_increase"
            app:layout_constraintTop_toBottomOf="@+id/tv_score" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

tambahkan 2 warna merah dan hijau di colors.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    ................
    <color name="colorRed">#B71C1C</color>
    <color name="colorGreen">#1B5E20</color>
</resources>

pindah ke MainActivity.kt, tambahkan variable binding kita. Untuk tipe data binding kita akan menyesuaikan dengan nama layout seperti activity_main.xml menjadi ActivityMainBinding dan fragment_home.xml menjadi FragmentHomeBinding.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

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

    }

}

Kita akan menggunakan lateinit agar kita bisa memanggil variable binding kita dimana saja. Untuk inisialisasinya menggunakan DataBindingUtil.setContentView( this, “nama layout”) jika activity dan DataBindingUtil.inflate(inflater, “nama layout” , container, false) jika fragment.

Untuk pemanggilan komponen layout kita dengan cara “nama variable data binding”.“nama id”, jika mengikuti kode dari artikel ini maka contohnya binding.tvScore untuk memanggil id tv_score.

tambahkan function untuk tambah dan kurang score.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private var num = 0

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

    }

    private fun increase(){
        num++
        binding.tvScore.text = num.toString()
        if (num > -1) binding.tvScore.setTextColor(ContextCompat.getColor(this, R.color.colorGreen))
        else binding.tvScore.setTextColor(ContextCompat.getColor(this, R.color.colorRed))
    }

    private fun decrease(){
        num--
        binding.tvScore.text = num.toString()
        if (num <= -1) binding.tvScore.setTextColor(ContextCompat.getColor(this, R.color.colorRed))
        else binding.tvScore.setTextColor(ContextCompat.getColor(this, R.color.colorGreen))
    }
}

masukkan tiap function ke masing — masing button dengan onClickListener.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private var num = 0

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

        binding.btnIncrease.setOnClickListener { increase() }
        binding.btnDecrease.setOnClickListener { decrease() }
    }
    .................
}

setelah itu coba jalankan project kalian. Jika terjadi error maka cek ulang apakah tag layout sudah ada dan membungkus semua komponen xml atau cek penulisan kode kalian.

untuk project artikel ini bisa kalian lihat pada link github dibawah ini.

resie001/DataBindingExample

Sekian dari Thurday Code kali ini dengan tema Data Binding pada Android. Pantengin terus hari kamis pada Medium kami Chevalier Lab atau media sosial kami untuk update selanjutnya. Dan jangan lupa kritik dan saran buat Thurday Code agar semakin baik lagi. Sekian dari saya, Terima kasih.

Have a Nice Day !!!