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.

---

WhatsApp

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:

1. The top part of the RecyclerView shows a bunch of email categories.
2. 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:

• A long integer for Unix time
• A formatted string in a common date and time format e.g. (“2001-07-04T12:08:56.235-0700”)

Layout

There are two different types of layouts used in this RecyclerView:

1. One layout for displaying an email category
2. One layout for displaying an email item

The two layouts look very similar:

• They both have some kind of icon on the left as a visual cue for the user
• They have some text in the middle
• They have tags and buttons on the right

Even though they look very similar, I wouldn't use the same layout for both of them.

I would opt to keep the layouts separate since these are conceptually distinct.

In this way, if we wanted to change the look and feel for one of them, we do not have to change or test the other.

When building the RecyclerView to handle two different types of layouts we can make use of the getViewType() function of the RecyclerView adapter.

---

Tinder

Data

Just like the Gmail app, the Tinder app has two sections in this screenshot:

• New matches
• Messages

We can model this using these classes:

• A profile class
  • Image
  • Name
• A message class
  • Profile
  • Last Message

The way we serve this up to the adapter is to create a list of profiles to represent the new matches.

We will also provide a list of message objects to the adapter to display the message section

Layout

In this design, we can break down the RecyclerView into different types of rows:

• Section header
• New matches horizontal gallery
• Message row

Just like the Gmail app, we will need to use multiple layouts for each of the different row types.

We will build the horizontal gallery as a nested RecyclerView.

---