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
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