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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
compile 'com.android.support:recyclerview-v7:25.3.1' |
Step 2. Replace ListView with RecyclerView.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list); |
Step 4. Update the adapter.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ViewHolder> { |
Step 5. Update the ViewHolder.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.context = context; |
Step 7. Override onCreateViewHolder method.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Override | |
public int getItemCount() { | |
return this.contacts.size(); | |
} |
Step 10. Attach the new adapter.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
recyclerView.setAdapter(new ContactsAdapter(this, contacts)); |
Step 11. Attach LayoutManager.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
recyclerView.setLayoutManager(new LinearLayoutManager(this)); |
Step 12. Attach new OnClickListener.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.