Clean Code with Data Binding

3 min readDec 21, 2019

Kecepatan dalam mengcoding Android sangat dan bahkan mutlak di perlukan, karena rumitnya pemrograman Android sehingga dapat memakan waktu yang sedikit lama, daripada dibandingkan dengan membuat suatu aplikasi web. Nah di tahun 2017, Google I/O memperkenalkan bahasa pemrograman Kotlin berbasis JVM dan dapat menyingkat waktu ketika memprogram Android dengan bahasa ini.

Tetapi programmer masih merasakan beberapa masalah dengan binding data. Nah, dari sini banyak programmer yang menggunakan library butter-knife. Setelah itu, di tahun 2018 Google I/O memperkenalkan Data Binding yang tergabung di dalam Android Jetpack Component. Lagi, kenapa sih dinamai Android Jetpack ? Karena, dengan menggunakan komponen Android Jetpack salah satunya data binding programmer bisa mempercepat proses coding. Untuk lebih lengkapnya silakan cek link dibawah.

Pada kali ini, saya akan membuat tutorial bagaimana cara membuat Data Binding.

Get Started

Buat Data Class ( data class yang berisi data yang ingin ditampilkan )

data class Data(
       val nama:String,
       val gambar:String
)

Bata class tersebut sebagai POKO untuk menset data di xml.

Buat file extension.kt dan tambahkan kode berikut tanpa dibungkus class.

@BindingAdapter("loadImage")fun ImageView.loadImage(imageUrl: String) {this.load(imageUrl)}

Kode di atas, berfungsi untuk menampilkan gambar menggunakan depedency seperti coil, picasso, glide, dsb. Saat ini saya menggunakan coil karena coil dibuat menggunakan bahasa kotlin dan sudah coroutine.

Selanjutnya, buat class Handler.kt yang berfungsi untuk menghandle event pada Data Binding.

class Handler(val ctx: Context) {fun onClick(){Toast.makeText(ctx,"DOT Indonesia", Toast.LENGTH_SHORT).show()}}

Jadi, xml akan memanggil fungsi onClick(), sebelumnya file handler terlebih dahulu di intance di class main.

Layouting

Rebuild project dengan tekan pada menu build > rebuild project.

Get Farhan Roy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Hasil dari rebuild akan menghasilkan class databinding. Coba lihat di directory generated(java). Anda akan melihat kelas yang namanya mirip dengan nama xml yang di binding.

Perbedaan layout biasa dengan layout data binding adalah adanya beberapa tag seperti <layout>, <data>, < variable> , dsb.

Setiap layout pada data binding harus dibungkus tag <layout>. Untuk mengambil variable dari POJO cukup tambahkan variable berikut, nama dan type ( berisi tipe data atau package untuk POJO class ).

Nah dengan variable tersebut kita dapat menset datanya melalui class main.

Nah terakhir jika sudah rebuild project, pastikan tidak ada error. Tambahkan code berikut di class main.

class MainActivity : AppCompatActivity() {lateinit var binding: ActivityMainBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = DataBindingUtil.setContentView(this,R.layout.activity_main)val handler = Handler(this)binding.handler = handlerval data = Data("DOT Indonesia", "https://www.dot.co.id/wp-content/themes/web-dot/assets/images/icon-dot.png")binding.data = data}}

Perbedaan di class main yaitu setContentView. setContentView disini menjadi method dari DataBindingUtil yang dimasukan ke variable binding yang bertipe Objek dari hasil data binding dari kelas activity_main.xml tadi.

Semoga tutorial yang singkat ini dapat bermanfaat bagi anda.

Berikut link referensi data binding