RecyclerView tested!

The RecyclerView widget is meant to replace functionalities of ListView and GridView.

Let’s get down to business!

1. Gradle dependency

First we will add a few dependencies to our gradle.build.

2. Basic setup

Now that we have access to RecyclerView, let’s add it to our main activity.

activity_main.xml

2. LayoutManager

RecyclerView.LayoutManager is a class responsible for laying out the RecyclerView children. ‘com.android.support:recyclerview-v7:21.0.3’ gives us access to 3 different layout policies:

• LinearLayoutManager – lays out items in similar way to ListView
• GridLayoutManager – lays out items in a grid (GridView)
• StaggeredGridLayoutManager – similar to GridLayoutManager, but in this case cells don’t have to keep the same size

If the presented LayoutManagers are not enough for you, consider using some third-party library like TwoWayView.

3. Adapter

RecyclerView.Adapter is responsible for chaining the model to its visual representation. It may sound similar to adapter class and its extensions used for ListView or GridView, however, there are few differences.

Let’s create our own adapter which will operate on a list of tasks.

As you can see, we had to implement 3 methods.

• getItemCount() – returns amount of tasks in our application
• onCreateViewHolder() – creates and returns row ViewHolder
• onBindViewHolder() – updates ViewHolder with the item on given position

Here is how our TaskRowHolder and its layout will look like:

view_task_row.xml

Remember to add CardView dependency to build.gradle.

So let’s check the result.

4. ItemDecoration

As you can see, the rows on the list are separated by CardView look. The other option would be to use RecyclerView.ItemDecoration.

First we will prepare our TaskRowItemDecoration (code used below is available in Android demos).

CardView also needs to be removed temporarily to show the effect of using ItemDecoration.

task_divider.xml

To add dividers, we had to implement public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state). method

• canvas – destination canvas
• parent – our recyclerView instance
• state – state of RecyclerView

Result

Once again, you can find some libraries which will help you with the item decoration (e.g FlexibleDivider)

5. Checkable items

So far, our list doesn’t have any behaviour. We will change that by making the rows checkable.
First, we will add a CheckBox widget to our view_task_row.xml
view_task_row.xml

Now we need to prepare our TaskRowHolder to send events upon checkbox state change. For this purpose we will use Otto event bus.

Add gradle dependecy for Otto.

Define the event class which will hold information about the changed item.

Define BUS instance in our MainActivity.

Post event upon TaskViewHolder checkbox state change.

Respond to Otto events with taskAdapter.

Result

6. Removing items

As the possibility to check/uncheck tasks is done, we will work on the removal feature.

Let’s start by defining xml file with our menu.

main_menu.xml

Now the code for items removal.

7. Animating RecycleView item addition

We have the possibility to remove items but their addition to the ReyclerView is still hardcoded. Let’s change that.

We will use an additional library for FloatingButoon.

Add floating button to main activity.

activity_main.xml

MainActivity

Now that we have the possibility to add items manually, we can remove this code.

Finally we are going to add an animation for ‘add task’ action.

Gradle dependency

Now all we need to do is to set our ItemAnimator

Result

8. Further extensions

As a final step we will add one more extension: the possibility to remove items with swipe gesture.

Get swipe to dismiss class SwipeToDismissTouchListener and add it to project with implementation shown below.

Result

Check my Github repo for full code of the Task Manager.

Thanks for reading!