39
loading...
Beginner Exercises - Android Lists
Following on from my previous post about practicing your Dev skills, Let's practice creating layouts with a RecyclerView.
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.
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.
I have picked a layout from the Play Store screenshots for three popular apps -
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.
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.
We only need one data object type to represent the “chat”.
Attributes for this chat object that we need to display:
To simplify our dummy data we will Represent I'll timestamp as a string and we will ignore the typing status.
The layout is pretty straightforward:
Based on the design that we see, there seems to be two different sections:
From this information, we can try to create objects for each of these concepts.
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:
The email object need to have these attributes:
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:
There are two different types of layouts used in this RecyclerView:
The two layouts look very similar:
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.
Just like the Gmail app, the Tinder app has two sections in this screenshot:
We can model this using these classes:
- Image
- Name
- 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
In this design, we can break down the RecyclerView into different types of rows:
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.
39