Let’s talk about RecyclerView!
This is a very important design element for Android and almost every application should implement it. If you were ever thinking that you need to implement a list of items, like recent transactions, or a grid, like photos on Instagram, then RecyclerView should definitely be your friend. The video below will cover it in details.
To follow along you can download or fork my starter code from Github.
There are twelve steps altogether:
Step 1. Import dependency
| compile 'com.android.support:recyclerview-v7:25.3.1' |
Step 2. Replace ListView with RecyclerView.
| <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" | |
| xmlns:tools="http://schemas.android.com/tools" | |
| android:id="@+id/list" | |
| android:layout_width="match_parent" | |
| android:layout_height="match_parent" | |
| android:divider="@null" | |
| tools:context="com.spreys.viewholderexample.ListViewActivity" /> |
Step 3. Replace ListView with RecyclerView in the Java file.
| RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list); |
Step 4. Update the adapter.
| public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ViewHolder> { |
Step 5. Update the ViewHolder.
| public class ViewHolder extends RecyclerView.ViewHolder { | |
| private TextView nameTextView; | |
| private TextView mobileTextView; | |
| private TextView landlineTextView; | |
| public ViewHolder(@NonNull View view) { | |
| super(view); | |
| this.nameTextView = (TextView)view | |
| .findViewById(R.id.name_text_view); | |
| this.mobileTextView = (TextView)view | |
| .findViewById(R.id.mobile_text_view); | |
| this.landlineTextView = (TextView)view | |
| .findViewById(R.id.landline_text_view); | |
| } | |
| } |
Step 6. Update the constructor.
| this.context = context; |
Step 7. Override onCreateViewHolder method.
| @Override | |
| public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { | |
| return new ViewHolder( | |
| LayoutInflater | |
| .from(context) | |
| .inflate(R.layout.contact_item, parent, false) | |
| ); | |
| } |
Step 8. Override onBindViewHolder method.
| @Override | |
| public void onBindViewHolder(ViewHolder holder, int position) { | |
| Contact contact = contacts.get(position); | |
| holder.nameTextView.setText(contact.getName()); | |
| holder.mobileTextView.setText(contact.getMobile()); | |
| holder.landlineTextView.setText(contact.getLandline()); | |
| } |
Step 9. Modify getCount() method.
| @Override | |
| public int getItemCount() { | |
| return this.contacts.size(); | |
| } |
Step 10. Attach the new adapter.
| recyclerView.setAdapter(new ContactsAdapter(this, contacts)); |
Step 11. Attach LayoutManager.
| recyclerView.setLayoutManager(new LinearLayoutManager(this)); |
Step 12. Attach new OnClickListener.
| holder.parentView.setOnClickListener(new View.OnClickListener() { | |
| @Override | |
| public void onClick(View view) { | |
| Intent intent = new Intent(context, DetailsActivity.class); | |
| intent.putExtra(DetailsActivity.EXTRA_CONTACT, contact); | |
| context.startActivity(intent); | |
| } | |
| }); |
Great work 🙂
In Step 12, it should be view.setOnClickListener rather than holder.parentView.setOnClickListener.
In Step 4, we need to add
private Context context;
private List contacts;
In Step 6, it should be
NewsAdapter(@NonNull Context context, @NonNull List contacts) {
this.context = context;
this.contacts = contacts;
It also makes more sense to make Step 6 right after Step 4 and make Step 5 right before Step 12 and make Steps 10 & 11 come in the end.
Finally, I’d like to thank you so much. Although I didn’t watch the video, but this page helped me a lot. Thanks again and regards.
thanks Vlad! Really helpful.