Introduction of RecyclerView is the best thing ever happen to android world. You can create stunningly beautiful lists and grids using the RecyclerView. Lot of us are very familiar in rendering the basic lists when the UI is very simple. But it comes to more complex lists that contains multiple UI elements along with animations, not everybody can achieve the final output they are looking for.
This article aims to improvise your knowledge on RecyclerView by taking an example of Gmail style inbox that contains the complex list design with interactive animations.
The desired output like Gmail app can’t be achieved just with the RecyclerView alone. It needs combination of other few android concepts. Overall we gonna use the below mentioned components to get the finest appearance and functionality.
The basic component required for this app is RecyclerView as our primary task is to display the data in list fashion. The appearance of the list is customized just like Gmail app displaying a thumbnail icon, three line message, timestamp and a star icon to mark the message as important.
In order to refresh the inbox, SwipeRefreshLayout is wrapped around the RecyclerView. This article doesn’t explains the persistence of the data. So the inbox will be reset to initial state up on refresh.
ActionMode is used to display the contextual toolbar when a row is long pressed in the list. This enables us to provide set of alternative toolbar icons when the recycler view is in multiple choice mode. Here we provide delete option to delete the selected messages.
> Object Animators
Object Animators allows us to animate a target element. In this we use the object animators to perform the Flip Animation of list thumbnail icon when a row is long pressed.
In a production app, all the inbox messages are dynamic i.e they are fetched from a REST API. To demonstrate that, I have used a JSON url to list the messages. We use Retrofit library to fetch and deserialize the JSON.
2. Sample JSON for Inbox Messages
I have created an endpoint which serves the inbox messages in a JSON format. The JSON contains the information like profile picture, from, subject, message, timestamp and other details necessary to render the list. In realtime this json should be generated from a database using any server side language.
3. Creating New Project
We’ll start by creating new project in Android Studio and do the basic setup required. Below is the final project structure I have planned for this article. This post seems to be lengthy but trust me this will enhance your knowledge and you will see surprising results when you reach to the bottom.
1. Create a new project in Android Studio from File ⇒ New Project and fill the project details. While creating the project, I have selected the Basic Activity as default activity to get the Toolbar, FAB and other elements.
2. Open build.gradle located under app module and add RecyclerView, Retrofit and Glide dependencies and Sync the project.
3. Download this res folder and paste the content in your project’s res folder. This folder contains all the necessary icons required for the RecyclerView and Toolbar.
4. Add the below colors, strings and dimens to respective files.
5. Open styles.xml and add the below styles. Here windowActionModeOverlay is added to overlap the ActionMode onto Toolbar.
6. As we are going to make network calls we need INTERNET permission in the manifest file. Open AndroidManifest.xml and add the permission.
7. Create five packages named activity, adapter, helper, model and network. We use these packages to keep the project organized. Once the packages are created, move your MainActivity to activity package.
4. Adding Retrofit – Fetching JSON
Now our project have the basic resources ready. Let’s add the network layer by using the Retrofit library. If you are new to Retrofit, I strongly suggest you go through my previous article about Retrofit.
8. Under model package, create a class named Message.java. This POJO class is used to deserialize the json while parsing.
9. Under network package, create a new class named ApiClient.java. This class creates the static retrofit instance.
10. Under network package, create a new class named ApiInterface.java. This class contains the rest api endpoints and the type of response it is expecting. In our case we have only one endpoint i.e inbox.json
This completes the retrofit integration. Now let’s add few helper classes those helps in rendering the list.
11. Under helper package, create a class named CircleTransform.java. This class is used to display the thumbnail image in circular shape using the Glide library.
12. Under helper package, create another class named DividerItemDecoration.java. This helps in adding divider lines in recycler view.
5. Generating Random Material Color
Another exciting thing you would come across here is assigning a random background color to each row icon. To achieve this we need to predefine set of material colors in an array and choose a random color while RecyclerView is prepared. Thanks to daniellevass for providing such an useful color codes.
13. Create an xml named array.xml under res ⇒ values. This xml contains few material colors thouse would be loaded randomly in list.
To load these colors randomly, the following function can be used. You will see how to use this function shortly.
6. Flip Animation using Object Animators
If you observe the gmail app, when you long press and selects a row, the thumbnail icon will be animated in a flip motion showing other side of the icon. We can do the same using the ObjectAnimator concepts. Carefully create the below mentioned files in your project.
14. Under res ⇒ values, create an xml named integer.xml. Here we define the animation durations.
15. Create a folder named animator under res folder. In this directory we place all the xml resources related to animations.
16. Under animator, create four xml files named card_flip_left_in.xml, card_flip_left_out.xml, card_flip_right_in.xml and card_flip_right_out.xml.
17. Under helper package, create a class named FlipAnimator.java. This class has a static method flipView() which performs the flip animation.
7. Finally Rendering the Inbox in RecyclerView
Oooh, finally we have reached to core part of the article i.e rendering the actual list data. Have some more patience and follow along with me.
Now let’s create the few remaining files required for the RecyclerView. All we need is xml layouts for main activity, list row, background drawables and an adapter class.
18. Under res ⇒ drawable, create two drawable resources named bg_circle.xml and bg_list_row.xml.
bg_circle.xml (This provides solid circular background color to thumbnail icon)
bg_list_row.xml (Provides background color to list item with normal and active states)
19. Open the layout file of your main activity (content_main.xml) and add the RecyclerView element.
20. Under res ⇒ layout, create an xml layout named message_list_row.xml with below code. This layout will renders each row in recycler view. The actual customization of recycler view row happens here.
We also need two menu files to render the toolbar icons. One is to display the icons when Toolbar is in normal mode. The other is to display the icons when ActionMode is enabled.
21. Under res ⇒ menu folder, create two menu files named menu_main.xml and menu_action_mode.xml.
One more important class you will have to take care is the adapter class. The functionality of the RecyclerView completely depends on how efficiently you are managing the adapter class.
22. Under adapter package, create a class named MessagesAdapter.java and paste the below code. This class is very important, take your own time to explore and understand the code. All the magic happens in onBindViewHolder() method.
> applyReadStatus() method make the text bold depending on read status. If the message is unread, it will be kept in bold.
> applyImportant() – Displays the star icon in yellow color if the message is marked as important.
> applyIconAnimation() – Method performs the flip animation on thumbnail icon.
> applyProfilePicture() – Displays the thumbnail icon profile picture / background in circular fashion.
23. Finally open your main activity (MainActivity.java) and modify the code as below.
> SwipeRefreshLayout is added to fetch the json messages on refresh.
> getInbox() Method fetches and parses the JSON appending it to array list.
> Adapter instance is created and attached to RecyclerView.
> ActionMode is enabled when the list item is long pressed.