Android Phone and Tablet Recycler Views Tutorial

As Head of Mobile R&D in Seeking Alpha I’m being asked constantly by developers and product managers alike if we can implement a feature on both the phone and the tablet.
For example, here is the Seeking Alpha Android application showing the portfolio page on a phone and on a tablet:

Seeking Alpha's Android app - phone

Seeking Alpha’s Android app – phone

Seeking Alpha's Android app - tablet

Seeking Alpha’s Android app – tablet

Android developers would add their flavor to the question – is it possible to use the same RecyclerViews code on both the phone and the tablet? For example – in the portfolio page screens shown above, the phone list is composed of 2 main type of items – the symbols (with their prices) and the articles (on the bottom of the screen). The tablet screen contain the same items, but laid out differently – the symbols are on the left side of the screen while the articles are on the right side. In this tutorial I will show you how simple it is to achieve such functionality with RecyclerView that utilize the same code for phone and tablets.

The Phone Application

Let’s start by creating an Android Studio project (with a blank Activity). For the Activity layout we’ll create a simple RecyclerView layout:

And also a row layout for the items we’ll show in the RecyclerView:

We’ll create a simple ViewHolder for the RecyclerViews:

And a RecyclerView adapter to hold these simple items. The adapter will hold items of the first type (the symbols and their prices, for example):

As you can see this adapter holds 5 (hard coded, I know) items of type “A”. Now we can write the code to use the RecyclerView and this Adapter in our main activity:

This is what we get when we run this:device-2016-07-20-120434

Now let’s create a second adapter which will hold items of another type (the articles, for example):

Since we are using the same simple item, we can extend the first adapter and override only the number of items (30 hard coded in this case) and the binding (to show that the item is of type “B”). We can use this adapter in the activity:

The only change is in line 11 (highlighted) – we changed the adapter from TypeARecyclerViewAdpater to TypeBRecyclerViewAdapter, and we get:

device-2016-07-20-121637Now we can combine both adapters into a “parent” adapter that will be used on phones:

As you can see the adapter holds internally the 2 adapters we used above, and combines them to get the actual items count, and handle the proper binding. We’ll use this new adapter in the Activity:

And when we run it we get:

device-2016-07-20-122959

Great. Now we can move on to the tablet. If we try to run this code on the tablet (for example with the adapter of type “A”), we get:

device-2016-07-20-141112So we need to make some changes.

The Tablet Application

For the tablet, we’ll simply use the two TypeX… adapters in two different RecyclerViews. Let’s start with the activity layout. Remember to put it in the layout-sw720dp resources folder (or an equivalent resource folder qualifier that suits you):

As you can see the layout contains 2 RecyclerViews. We kept the left one with the same id to make things simpler. In real life application we will usually use fragments and allocate different fragments to phone and tablet, so the code will vary slightly. In our case we’ll modify slightly the Activity code:

And when we run it on a tablet we get:

device-2016-07-20-141502

The Combined Application

Now we get to the final step of make our code run on both phone and tablet. Since the layout is handled automatically by the OS, all we need is a simple method to check if we are running on a phone or on a tablet:

And this will run as expected on either phone or tablet.

You can get the entire tutorial project from GitHub here.

One thought on “Android Phone and Tablet Recycler Views Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *