Beginner Exercises - Android Lists

Following on from my previous post about practicing your Dev skills, Let's practice creating layouts with a RecyclerView.

A quick RecyclerView recap

RecyclerViews are good at displaying your data as a scrollable list of items.

However, there's a bunch of steps involved in displaying the data in these views which may seem daunting for someone new.

The reason why it is more complicated is because they have used a way of writing code called the adapter pattern.

RecyclerViews are the view.
Your feed the RecyclerView object called an adapter.
Your feed the adapter a list of data that you want to display.
You write code in this adapter to convert your data into a view.

There are a lot of little magic tricks that the RecyclerView does such as showing and hiding view holders but I will not go into that detail here.

The Challenge

I have picked a layout from the Play Store screenshots for three popular apps -

Gmail Go
WhatsApp and
Tinder

There are many parts involved in building screens like these.

So for the exercise I will focus on building the RecyclerView and maybe add some of the smaller UI elements like the title bar and the floating action button for fun afterwards.

The engineer's that work for these companies spend a lot of time adding features to the screens. Even If we simply copied all the functionality from the screens, we would not get very far in a session of practice time.

The key skills that I want to practice today are creating the layouts and displaying them onto a RecyclerView.

We will call the session finished when we have the layouts displaying on the screen.

Assessing the Work

Data Model
Layout(s)

Let's analyze each of the designs.

It's helpful to think about the data that we are going to receive.

Sometimes at work, you'll have a data model defined for you by a back end service that you’re calling data from.

Other times, you’ll have to define your own.

For this exercise we will need to define our own since we are just using some dummy data to display onto the screen.

This design is the easiest out of the three since the layouts for each chat item are all the same.

Data

We only need one data object type to represent the “chat”.

Attributes for this chat object that we need to display:

Chat image
Chat title
Chat subtitle
Timestamp
Unread messages count
Is sent and read flag

To simplify our dummy data we will Represent I'll timestamp as a string and we will ignore the typing status.

Layout

The layout is pretty straightforward:

Profile image on the left
text in the middle
status indicators on the right

Gmail

Data

Based on the design that we see, there seems to be two different sections:

The top part of the RecyclerView shows a bunch of email categories.
The bottom part shows individual emails.

From this information, we can try to create objects for each of these concepts.

an email category object
an email object

Now that we know what kind of objects that we need, let's list out all the things that we want to show onto the screen and add them as attributes of these objects.

The category object needs to have these attributes:

Icon
Title
Subtitle
Tint colour
Email count

The email object need to have these attributes:

Icon
Sender
Subject
First line
Time stamp
Is calendar flag
Is starred flag
Has attachment flag
Label
Is Unread

In order to save time and not lose focus on my goal of practicing layouts, I am modeling things like the time stamp as hard coded strings Instead of normal timestamps which are usually: