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'

view raw
step1.gradle
hosted with ❤ by GitHub

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

view raw
step2.xml
hosted with ❤ by GitHub

Step 3. Replace ListView with RecyclerView in the Java file.

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list);

view raw
step3.java
hosted with ❤ by GitHub

Step 4. Update the adapter.

public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ViewHolder> {

view raw
step4.java
hosted with ❤ by GitHub

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);
}
}

view raw
step5.java
hosted with ❤ by GitHub

Step 6. Update the constructor.

this.context = context;

view raw
step6.java
hosted with ❤ by GitHub

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)
);
}

view raw
step7.java
hosted with ❤ by GitHub

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());
}

view raw
step8.java
hosted with ❤ by GitHub

Step 9. Modify getCount() method.

@Override
public int getItemCount() {
return this.contacts.size();
}

view raw
step9.java
hosted with ❤ by GitHub

Step 10. Attach the new adapter.

recyclerView.setAdapter(new ContactsAdapter(this, contacts));

view raw
step10.java
hosted with ❤ by GitHub

Step 11. Attach LayoutManager.

recyclerView.setLayoutManager(new LinearLayoutManager(this));

view raw
step11.java
hosted with ❤ by GitHub

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);
}
});

view raw
step12.java
hosted with ❤ by GitHub

%d bloggers like this: