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: