Menggunakan ViewBinding di Activity

Artikel ini akan membahas cara menggunakan ViewBinding di Activity sebagai alternatif penggunaan findViewById.

Bagus Aji Santoso by Bagus Aji Santoso on 19 May 2023

Dahulu kala, menghubungkan kode Java/Kotlin dengan UI (XML), dilakukan dengan menggunakan findViewById. Saat Kotlin telah resmi masuk sebagai salah satu bahasa pemrograman alternatif, diperkenalkan satu teknik lagi bernama Kotlin Synthetic sebagai alternatif yang kemudian di-deprecated-kan. ViewBinding merupakan fitur yang ditawarkan Google untuk mempermudah penulisan kode yang berkaitan dengan View dan bisa dikatakan sebagai pengganti findViewById.

Persiapan

Untuk menggunakan ViewBinding di aplikasi yang dibuat, kita harus mengaktifkannya lewat module-level build.gradle. Tambahkan opsi viewBinding dengan nilai true ke dalam blok buildFeatures. Blok lain ditulis dengan ringkas sebagai patokan menulis buildFeatures.

android {
    defaultConfig {
    }
    buildTypes {
    }
    compileOptions {
    }
    kotlinOptions {
    }

    buildFeatures {
        viewBinding true
    }
}

Jangan lupa untuk melakukan sync saat menambahkan baris di atas ke file build.gradle, jika tidak ViewBinding belum akan aktif.

Setiap file yang berada di folder res > layout akan dibuatkan sebuah file binding secara otomatis oleh Android Studio. Nama file yang dibuatkan tersebut akan mengikuti nama file XML-nya, namun dalam format camel case dengan tambahan Binding di belakang. Misalnya, file activity_main.xml akan memiliki file binding bernama ActivityMainBinding atau file row_item.xml akan memiliki fle binding bernama RowItemBinding. File Binding ini, jika di CTRL + Click akan mengarahkan kita ke file XML yang bersangkutan.

Penggunaan di Activity

Untuk menggunakan ViewBinding di Activity, pertama deklarasikan sebuah properti baru dan lakukan inisiasi pada properti tersebut.

class MainActivity : AppCompatActivity() {

    // 1
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 2
        binding = ActivityMainBinding.inflate(layoutInflater)

        setContentView(R.layout.activity_main)
    }
}

Tahap 1 dan 2 dilakukan untuk menyiapkan properti binding yang akan dipakai di Activity.

Inisiasi objek binding dilakukan di method onCreate setelah pemanggilan super karena objek binding ini akan digunakan sesegera mungkin, maka kita siapkan objek tersebut seawal mungkin.

Perhatikan bahwa kita juga perlu mengupdate method setContentView(). Pada contoh di atas method tersebut masih menggunakan id file layout dari file activity_main.xml. Kita bisa ganti dengan binding.root karena properti root dari suatu binding sama dengan layout XML dari layout yang diarahkan oleh binding tersebut.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
}

Mengkases View

Secara otomatis semua View yang ada di dalam file XML akan dibuatkan sebuah properti. Untuk mengakses View yang diinginkan, pastikan untuk memberikan sebuah id.

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

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Mengacu pada layout XML di atas, kita bisa mengakses button dengan memanggil binding.button atau mengakses TextView dengan binding.text.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)

    setContentView(binding.root)

    binding.button.setOnClickListener { 
        
    }

    binding.textview.text = "Text baru"
}

Banner image by JJ Ying on Unsplash


Other Recent Articles

Mengatasi Error ‘No version of NDK matched the requested version’

Artikel ini membahas cara mengatasi error yang mungkin muncul di Android Studio bila versi NDK yang diminta project tidak tersedia.

Baca Artikel

Memisahkan Emulator dari Android Studio

Versi Android Studio yang baru akan memuat Emulator yang terintegrasi didalamnya. Artikel ini akan membahas cara memisahkan Emulator dari Android Studio.

Baca Artikel

More This Way