(Tutorial Android) Data Binding In Android

Data Binding merupakan sebuah teknik yang menyatukan dan menghubungkan antara komponen UI dengan data source. Konsep dari Data Binding yaitu setiap kali terdapat perubahan pada data source, maka komponen UI otomatis akan berubah. Data Binding Library di Android mulai diperkenalkan oleh Google pada event Google I/O 2015.

Sebelumnya adanya Data Binding Library, memanggil komponen UI Layout ke Activity atau Fragment dengan cara sederhana yang biasanya kita gunakan menyerupai memanggil komponen UI dengan findViewById, menciptakan variabel local untuk view terlebih dahulu lalu mengambil nilai ataupun mengeset nilai.

Cara yang sederhana ini memang terkesan manual dan menciptakan banyak code yang diulang sehingga source code menjadi banyak dan tidak efisien, apalagi bila berafiliasi dengan layout yang kompleks.

Nah, dengan teknik Data Binding kita menciptakan aplikasi dengan cepat dan ringkas.

Bye... findViewById().

Pada tutorial kali ini aku akan menjelaskan implementasi Data Binding Library di Android. Data Binding Library merupakan support library yang sangat fleksibel, kita sanggup menerapkannya mulai dari versi Android 2.1.

Pertama kita mulai mengkonfigurasikan data binding di gradle dengan code berikut :

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

Membuat Layout

Layout dengan memakai Data Binding berbeda dengan layout tanpa Data Binding. Tag root pada layout di awali dengan tag <layout> dan untuk mendefinisikan data model memakai tag <data> dan tag <variable> di dalamnya. Mengubah ataupun Mengeset properti pada layout dengan memakai sintak "@{}".

Berikut misalnya :

<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" >      <data>       <variable             name="user"             type="example.andronut.androiddatabinding.model.User" />          <variable             name="handler"             type="example.andronut.androiddatabinding.EventHandler" />     </data>      <LinearLayout         xmlns:tools="http://schemas.android.com/tools"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical"         tools:context="example.andronut.androiddatabinding.MainActivity">          <ImageView             android:id="@+id/img_profile"             android:layout_width="match_parent"             android:layout_height="200dp"             android:scaleType="centerCrop"             android:src="@{user.picture}"/>          <TextView             android:id="@+id/tv_name"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:textAppearance="?android:attr/textAppearanceLarge"             android:layout_marginTop="8dp"             android:layout_marginLeft="8dp"             android:layout_marginRight="8dp"             android:text="@{user.name}"/>          <TextView             android:id="@+id/tv_email"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:textAppearance="?android:attr/textAppearanceMedium"             android:layout_margin="8dp"             android:text="@{user.email}"/>          <Button             android:id="@+id/btn"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="More"             android:layout_margin="8dp"             android:onClick="@{handler.clicked}"/>      </LinearLayout> </layout> 

Data Model

Berikutnya yakni mendefinisikan data modelnya. Pada umumnya, kelas POJO (Plain Old Java Object) sanggup dipakai untuk Data Binding. Akan tetapi, kita harus memodifikasi bab tertentu semoga data sanggup kuat pada UI.

Android menyediakan kelas BaseObservable yang sanggup kita extend ke kelas POJO sehingga sanggup menyesuaikan saat terjadi perubahan pada data.

Berikut pola kelas User.java

package example.andronut.androiddatabinding.model;  import android.databinding.BaseObservable; import android.databinding.Bindable; import android.databinding.BindingAdapter; import android.graphics.drawable.Drawable; import android.widget.ImageView; import example.andronut.androiddatabinding.BR;  /**  * Created by Wim on 8/21/16.  */ public class User extends BaseObservable {      private Drawable picture;     private String name;     private String email;      @Bindable     public Drawable getPicture() {         return picture;     }      public void setPicture(Drawable picture) {         this.picture = picture;         notifyPropertyChanged(BR.picture);     }      @Bindable     public String getName() {         return name;     }      public void setName(String name) {         this.name = name;         notifyPropertyChanged(BR.name);     }      @Bindable     public String getEmail() {         return email;     }      public void setEmail(String email) {         this.email = email;         notifyPropertyChanged(BR.email);     }  } 

Binding Data 

Kelas Binding otomatis di generate sesuai dengan nama layout. Misalnya nama layoutnya “activity_main.xml” maka kelas Binding terbentuk dengan nama “ActivityMainBinding”. Kelas Binding ini ditandai dengan suffix “Binding”. Berikut implemetasinya di MainActivity.java.

package example.andronut.androiddatabinding; import android.databinding.DataBindingUtil; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import example.andronut.androiddatabinding.databinding.ActivityMainBinding; import example.andronut.androiddatabinding.model.User;  public class MainActivity extends AppCompatActivity {      ActivityMainBinding binding;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         binding = DataBindingUtil.setContentView(this, R.layout.activity_main);         binding.setUser(user());         binding.setHandler(new EventHandler());     }      private User user() {         User user = new User();         user.setName("Wim Sonevel");         user.setEmail("wim.sonevel93@gmail.com");         user.setPicture(ContextCompat.getDrawable(this, R.drawable.photo));          return user;     } } 

Event Handling 

Data Binding sanggup dipakai untuk menangani event handling. Misalnya pada atribut onclick.

<Button     android:id="@+id/btn"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="More"     android:layout_margin="8dp"     android:onClick="@{handler.clicked}"/> 

Kemudian mendefinisikan kelas Handlernya :

package example.andronut.androiddatabinding;  import android.view.View; /**  * Created by Wim on 8/27/16.  */ public class EventHandler {      public void clicked(View view) {         // Do something here     }  } 

Binding in RecyclerView

Data Binding juga sanggup dipakai di RecyclerView. Kita sanggup menciptakan Custom Adapter memakai Data Binding menyerupai berikut :

package example.andronut.androiddatabinding.adapter;  import android.databinding.DataBindingUtil; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import java.util.List; import example.andronut.androiddatabinding.R; import example.andronut.androiddatabinding.databinding.ItemListBinding; import example.andronut.androiddatabinding.model.Item;    /**  * Created by Wim on 8/27/16.  */ public class ListAdapter extends RecyclerView.Adapter<ListAdapter.ListViewHolder>{      private List<Item> itemList;      public ListAdapter(List<Item> itemList) {         this.itemList = itemList;     }      @Override     public ListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {         View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_list, parent, false);         return new ListViewHolder(view);     }      @Override     public void onBindViewHolder(ListViewHolder holder, int position) {         holder.bind(itemList.get(position));     }      @Override     public int getItemCount() {         return itemList.size();     }      static class ListViewHolder extends RecyclerView.ViewHolder {         ItemListBinding binding;          public ListViewHolder(View itemView) {             super(itemView);             binding = DataBindingUtil.bind(itemView);         }          void bind(Item item) {             binding.setList(item);             binding.executePendingBindings();         }     }  } 

Pada ListViewHolder disini daerah kita menginstance kelas ItemListBinding.

With Picasso or Glide

Salah satu fitur penting di Data Binding Library yakni BindingAdapter. BindingAdapter yakni sebuah annotation yang memungkinkan kita untuk menciptakan custom atribut xml. Pada kasus ini misalkan kita ingin menampilkan image dari url memakai library image loader(Picasso atau Glide). Penggunaan BindingAdapter yakni dengan menciptakan sebuah method static lalu mendefinisikan annotation @BindingAdapter. Contohnya berikut :

private String imgUrl;  public String getImgUrl() {     return imgUrl; }  @BindingAdapter({"bind:imageUrl"}) public static void setImageUrlWithPicasso(ImageView imageView, String imageUrl) {     Picasso.with(imageView.getContext())             .load(imageUrl)             .into(imageView); } 

bind:imageUrl merupakan custom atribut xml yang akan dipanggil di layout.

Lalu, di layout kita tinggal memanggil atribut tersebut sepert ini :

... <ImageView     android:id="@+id/img_profile"     android:layout_width="match_parent"     android:layout_height="200dp"     android:scaleType="centerCrop"     app:imageUrl="@{user.imgUrl}"/> ... 

Terakhir yakni mencoba menjalankan app yang kita buat dengan Data Binding. Maka jadinya menyerupai berikut :

Untuk Source code lengkapnya sanggup dilihat di https://github.com/andronut/AndroidDataBinding

Sekian dari aku dan semoga bermanfaat.
Terima Kasih ^^