RecyclerView With Android DataBinding
In I/O 2015 Google announced a data binding library for Android. With Data Binding, you create an ongoing link between an element in the user interface and a value. Data Binding is the process that establishes a connection between the application UI and business logic.
In this post we will learn how to integrate recyclerview with android Data Binding.
Step 1 : Enable dataBinding in your module level gradle, here is how your build.gradle should look like.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "23.0.3" defaultConfig { applicationId "com.androidgig.recyclerviewbinding" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" dataBinding{ enabled true } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:recyclerview-v7:23.4.0' compile 'com.squareup.picasso:picasso:2.5.2' } |
Step 2 : Create POJO/Model class called User with 3 parameters name, profile_image & age.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
public class User { private String name, profile_image; private int age; public User(String name, String profile_image, int age) { this.name = name; this.profile_image = profile_image; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getProfile_image() { return profile_image; } public void setProfile_image(String profile_image) { this.profile_image = profile_image; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } } |
Step 3 : Create a layout for Recycler list items
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?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"> <data> <variable name="user" type="com.androidgig.recyclerviewbinding.User" /> </data> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="@drawable/round_corner_view" android:orientation="horizontal" android:padding="10dp"> <ImageView android:layout_width="50dp" android:layout_height="50dp" tools:src="@mipmap/ic_launcher" app:url="@{user.profile_image}"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.name}" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="@android:color/black" tools:text="Name" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{`` + user.age}" android:textColor="@android:color/black" tools:text="Age" /> </LinearLayout> </LinearLayout> </LinearLayout> </layout> |
Here user will be model class reference variable, you can have any number of variables as you need. <layout> will contain your model class information using which you will notify your controls about value they are going to show.
Step 4 : Create an adapter for Recyclerview called UserAdapter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder> { private ArrayList<User> list; public UserAdapter(ArrayList<User> list) { this.list = list; } @Override public UserAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View statusContainer = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false); return new UserAdapter.ViewHolder(statusContainer); } @Override public void onBindViewHolder(ViewHolder holder, int position) { User status = list.get(position); holder.bindUser(status); } @Override public int getItemCount() { return list.size(); } class ViewHolder extends RecyclerView.ViewHolder { private RecyclerItemBinding binding; public ViewHolder(View itemView) { super(itemView); binding = DataBindingUtil.bind(itemView); } public void bindUser(User user) { binding.setUser(user); } } } |
Here
binding = DataBindingUtil.bind(itemView); will create binding for your recycler_item layout and return view.
binding.setUser(user); will set User data to recycler items.
Step 5 : Write xml code for your activity/fragment layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="wrap_content" app:layoutManager="android.support.v7.widget.LinearLayoutManager"/> </RelativeLayout> </layout> |
Step 6 : Write your code in activity/fragment to attach adapter to Recyclerview.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
public class MainActivity extends AppCompatActivity { private ActivityMainBinding binding; private ArrayList<User> userList = new ArrayList<>(); private UserAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = DataBindingUtil.setContentView(this, R.layout.activity_main); fillData(); adapter = new UserAdapter(userList); binding.recycler.setAdapter(adapter); } private void fillData() { userList.add(new User("Ravi", "https://pbs.twimg.com/profile_images/446522135721164800/pdVA44as.jpeg", 26)); userList.add(new User("Ritesh", "", 30)); userList.add(new User("Naman", "", 20)); } @BindingAdapter({"bind:url"}) public static void setImage(ImageView imageView, String url) { if (url != null && url.trim().length() > 0) { Picasso.with(imageView.getContext()).load(url).error(R.mipmap.ic_launcher).into(imageView); } else imageView.setImageResource(R.mipmap.ic_launcher); } } |
Output :
Ravi Rupareliya
He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.
Latest posts by Ravi Rupareliya (see all)
- Dialogflow Entities With Actions on Google - May 7, 2020
- Actions on Google Using Cloud Functions - February 3, 2020
- Create WhatsApp Stickers Android Application - April 19, 2019