Android Data Binding : Goodbye findViewById
Contoh penggunaan Data Binding pada aplikasi Android
Ini adalah tulisan pertama saya di Medium, setelah sekian abad tidak menulis artikel (biar terkesan blogger lama :v ) akhirnya sekarang saya kembali menulis dengan tema yang berbeda dengan tulisan saya di blog sebelumya. Dulu saya pernah membuat blog tentang cerita horror dan misteri, tetapi saat itu kebayakan artikel yang dibuat hanya mengandalkan jurus copy paste dari sumber lain. Jadi tidak ada kesenangan dan gairah untuk melanjutkan menulis (karena tulisannya garing, asli). Sebelumnya saya mau mengucapkan terima kasih kepada mas Adam Ardisasmita dan Sidiq Permana yang sudah membuat saya termotivasi untuk kembali menulis, membagikan karya dan ilmu melalui tulisan (gue mah gitu orangnya). Nah, sekarang saya kembali menulis dengan passion saya saat ini, yaitu IT. Jadi kedepannya saya akan menulis seputar teknologi, khususnya Android Development baik dari dalam negeri, maupun dari luar negeri. Dan artikel yang disajikanpun bisa berupa tutorial, cerita pengalaman, maupun review. Jadi nantikan tulisan — tulisan saya selanjutnya di halaman yang dapat anda lihat di sini.
Pada kesempatan ini saya akan membahas tentang Data Binding Library. Data binding ? apa itu data binding ? untuk apa kegunaannya ? pertanyaan seperti itu sering sekali saya jumpai baik di social media maupun di kehidupan nyata (hahaha :v). Data Binding adalah proses membangun koneksi antarmuka aplikasi (application UI) dan business logic. Data binding membuat kontrol-kontrol dalam form terkoneski (terkait) dengan sumber-sumber data. Data binding library adalah sebuah library buatan Google yang berfungsi untuk mempersingkat coding yang kita buat. Jadi dengan menggunakan data binding di android, kita tidak perlu lagi menggunakan findViewById pada coding kita. Data binding sendiri adalah satu dari sekian banyak kejutan menarik yang ada di acara Google I/O 2015. Dan pada Google I/O 2016 beberapa waktu lalu, ada pembahasan khusus tentang Advance Data Binding yang bisa anda lihat di bawah ini.
Data Binding sendiri umumnya memiliki patternMVVM
Mengaktifkan data binding library
Penggunaan data binding sangatlah sederhana, kita tidak perlu menambahkan library baru di dependencies gradle, hanya perlu mengaktifkannya saja di file build.gradle, setelah itu kita dapat menggunakannya sesuai kebutuhan. Berikut langkah — langkah mengaktifkannya :
Buka file build.gradle, lalu tambahkan coding berikut ini :
android {
....
dataBinding {
enabled = true
}
}Jika anda mempunyai module lain untuk digunakan sebagai library yang menggunakan data binding, anda dapat menambahkan coding di atas persis dengan langkah — langkah yang sama seperti di atas.
Persiapan
Kita akan membuat aplikasi dengan kasus user melakukan input data buku berupa judul dan nama pengarang, lalu ketika diklik tombol submit akan membuka activity baru bernama DetailActivity.
Membuat layout di xml dengan data binding
Membuat layout dengan data binding sedikit berbeda dengan tanpa menggunakan data binding, ada beberapa coding yang harus ditambahkan. Berikut contohnya :
activity_main.xml
<?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>
<import type="android.view.View" />
<variable
name="vm"
type="id.arieridwan.androiddatabinding.viewmodels.MainActivityVM" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@color/abc_background_cache_hint_selector_material_light">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:hint="Masukan judul buku"
android:text="@={vm.bTextInputJudul}" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:hint="Masukan nama pengarang"
android:text="@={vm.bTextInputNama}" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:onClick="@{vm.onClickSubmit}"
android:text="Submit"
android:background="@color/colorAccent"
android:textColor="@color/abc_primary_text_material_dark"
android:outlineProvider="bounds"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</layout>bisa dilihat kita menggunakan <layout> sebagai layoutnya, lalu kita menambahkan tag <data> dan <variable> di dalamnya. Perlu diperhatikan di dalam tag <variable> terdapat name dan type. Name berfungsi untuk menamai variable view model dari layout tersebut. Dan type berfungsi untuk menunjukan pada file view model yang telah kita buat. Dalam project ini saya menamai variablenya dengan vm dan mengarah pada package id.arieridwan.androiddatabinding.viewmodels.MainActivityVM, yang artinya saya telah membuat sebuah file view model bernama MainActivityVM sebelumnya. Berikut isi dari file MainActivityVM :
public class MainActivityVM {
// inisialisasi variable
public ObservableField<String> bTextInputJudul = new ObservableField<>();
public ObservableField<String> bTextInputNama = new ObservableField<>();
public MainActivity mActivity;
// constructor untuk mendapatkan context yang dikirim dari activity
public MainActivityVM(MainActivity mainActivity) {
this.mActivity = mainActivity;
}
// method ketika button diklik
public void onClickSubmit(View v) {
DetailActivity.startThisActivity(mActivity, bTextInputJudul.get(), bTextInputNama.get());
}
}Lalu langkah terakhir kita ubah file MainActivitynya :
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
MainActivityVM viewModel = new MainActivityVM(this);
// set vm akan otomatis ada ketika kita menamai vaiable di xml
binding.setVm(viewModel);
}
}Perlu diperhatikan, method setVm() itu akan otomatis terbentuk sesuai nama variablenya di xml. Jadi jika kita membuat sebuah variable bernama an, maka otomatis methodnya akan menjadi setAn(), begitu juga dengan nama lain method akan berubah sesuai namanya. Jadi kita telah membuat layout, activity, dan view modelnya.
android:text="@={vm.bTextInputJudul}"Syntax di atas berarti kita akan mengambil isi dari variable bTextInputJudul. Lalu kita deklarasikan variablenya di view model dengan :
public ObservableField<String> bTextInputJudul = new ObservableField<>();Dan pada button kita menambahkan event onClick dengan cara :
android:onClick="@{vm.onClickSubmit}"Setelah itu, kita tambahkan syntax onClick di file view modelnya :
public void onClickSubmit(View v) {
DetailActivity.startThisActivity(mActivity, bTextInputJudul.get(), bTextInputNama.get());
}Jadi, kita akan mengirim isi dari variable bTextInputJudul dan bTextInputNama dengan metode get() ke DetailActivity. Langkah selanjutnya buatlah layout baru bernama activity_detail, activity bernama DetailActivity dan view model dengan nama DetailActivityVM. Berikut ini adalah isi dari file — file tersebut :
activity_detail.xml
<?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="vm"
type="id.arieridwan.androiddatabinding.viewmodels.DetailActivityVM"/>
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Judul buku"
android:textColor="@color/abc_secondary_text_material_light"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
tools:text="Android Data Binding Tutorial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{vm.bTextJudul}"
android:textSize="14sp"
android:textColor="@color/abc_primary_text_material_light" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama pengarang"
android:textStyle="bold"
android:textColor="@color/abc_secondary_text_material_light"
android:textSize="16sp" />
<TextView
tools:text="Arie Ridwansyah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{vm.bTextPengarang}"
android:textSize="14sp"
android:textColor="@color/abc_primary_text_material_light" />
</LinearLayout>
</layout>DetailActivity.java
public class DetailActivity extends AppCompatActivity {
// deklarasi variable sebagai argumen untuk memulai activity
public static final String ARG_JUDUL = "key_judul";
public static final String ARG_PENGARANG = "key_pengarang";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActivityDetailBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_detail);
// mendapatkan data dari intent
Intent i = getIntent();
String judul = i.getStringExtra(ARG_JUDUL);
String pengarang = i.getStringExtra(ARG_PENGARANG);
DetailActivityVM viewModel = new DetailActivityVM(judul,pengarang);
// set vm akan otomatis ada ketika kita menamai vaiable di xml
binding.setVm(viewModel);
}
// method untuk memulai activity ini
public static void startThisActivity(Context context, String judul, String pengarang) {
// start activity
Intent intent = new Intent(context, DetailActivity.class);
intent.putExtra(ARG_JUDUL, judul);
intent.putExtra(ARG_PENGARANG, pengarang);
context.startActivity(intent);
}
}DetailActivityVM.java
public class DetailActivityVM {
// inisialisasi variable
public ObservableField<String> bTextJudul = new ObservableField<>();
public ObservableField<String> bTextPengarang = new ObservableField<>();
// constructor untuk mendapatkan judul dan pengarang yang dikirim dari activity
public DetailActivityVM(String judul, String pengarang) {
bTextJudul.set(judul);
bTextPengarang.set(pengarang);
}
}Pada file DetailActivity kita membuat sebuah variable untuk menampung data yang dikirim dari intent untuk mendapatkan judul dan pengarang yang dikirim dari activity :
// mendapatkan data dari intent
Intent i = getIntent();
String judul = i.getStringExtra(ARG_JUDUL);
String pengarang = i.getStringExtra(ARG_PENGARANG);Dan kitapun membuat sebuah method untuk memulai DetailActivity :
public static void startThisActivity(Context context, String judul, String pengarang) {
// start activity
Intent intent = new Intent(context, DetailActivity.class);
intent.putExtra(ARG_JUDUL, judul);
intent.putExtra(ARG_PENGARANG, pengarang);
context.startActivity(intent);
}Pada method tersebut kita mengirim sebuah parameter yang akan diset datanya di view model, maka dari itu kita membuat sebuah constructor di file file DetailActivityVM:
public DetailActivityVM(String judul, String pengarang) {
bTextJudul.set(judul);
bTextPengarang.set(pengarang);
}Dalam method tersebut kita mengatur isi dari variable bTextJudul dan bTextPengarang dengan metode set() yang datanya diambil dari parameter constructor tersebut.
Kesimpulan
Pada data binding kita dituntut seminimal mungkin menggunakan id, itu tetap diperlukan pada situasi tertentu seperti contohnya merubah suatu widget mengikuti perubahan pada widget lainnya. Disitulah kita harus menggunakan id sebagai identitas dari widget yang akan dituju. Contoh :
<TextView
android:id="@+id/textCoba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Judul buku"
android:textColor="@color/abc_secondary_text_material_light"
android:textSize="16sp"
android:textStyle="bold"
android:visibility="gone"/>
<TextView
tools:text="Android Data Binding Tutorial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{vm.bTextJudul}"
android:textSize="14sp"
android:textColor="@color/abc_primary_text_material_light"
android:visibility="@{textCoba.visibility}"/>Saat ini kebanyakan developer tidak mau (malas -_-) untuk merubah codingannya ke data binding dengan alasan susah !!! . Padahal justru jika sudah terbiasa, data binding ini sangatlah memudahkan kita karena benar — benar mepersingkat coding. Untuk dapat bersaing di era perkembangan teknologi yang sangat cepat ini maka mau tidak mau kita harus siap dan mau untuk berubah mengikutinya, agar kita tidak ketinggalan zaman dan berakhir menjadi model lama yang tak terpakai (*sad :v ).
Perubahan memang bukanlah hal yang menyenangkan, tapi yakinlah bahwa perubahan bisa menjadikan kita menjadi lebih baik dari sebelumnya.
— Arie Ridwansyah
Demikianlah seri tutorial android kali ini, semoga bermanfaat dan nantikan catatan — catatan saya berikutnya. Untuk source code project ini bisa kalian clone di bawah ini :
Jika ada kesulitan dalam konfigurasinya, kalian dapat menghubungi saya di semua social media saya.
