Creating the Twitter image Display layout with recycler view

Image from Twitter

Recycler view is a trendy and important view in Android development, and it is a very wonderful view to use. I am going to take you through how it's done in Android development.

Step 1

Create A new Android Studio Project

Open up Android Studio for this Project I using v4.1.2

Select Create a new project

Select “Empty Activity” from the gallery view

Name your Project whatever you choose and ensure you select Kotlin as the Language and click Finish and let it finish it’s build

Step 2

Creating our MainActivity layout

Now that our project has built successfully you will need to navigate to the layout file for the main activity which is found in res/layout/activity_main.xml and add design your screen.

For my simple screen, I just have a button to select the images and a recycler view to display the selected images.

For this project ill be using view binding for my layouts so let us add this to our build.gradle app

With this addition, our MainActicity.kt will look like this

Step 3

Create different layouts for the different image styles you want to display

Now, this is where it all gets interesting. Let's recall that we want to implement the image display the way Twitter displays their images when we have one image it fills the entire view, when it is two images we see that the view is divided into two equal vertical parts, and when its three it divides the left part of the view into two horizontal parts. We will create all different screens to give us the look and feel of this effect.

First, we design the XML for one image and it will look like this

The layout for displaying two images will look like this.

And finally, the view displaying three images will look like this

If you look closely at the XML files you will see that we are using a view called ShapableImageView it's from the Material design library and can be found here ShapableImageView Docs

We are going to add the style to curve the edges of the image views to complete the look. That means the in our themes.xml file we add the following styles

Step 4

Creating the Recycler view adapter with multiple Viewholders

Now in this step, we are going to create our recycler view adapter using ListAdapter which is more powerful than our RecyclerView.Adapter class with multiple ViewHolders for our different number of images. Here is our Adapter

Talking about the benefits of this Adapter over RecyclerView.Adapter is beyond the scope of this article but you can get all the juicy bits in another article.

Having that in place here is our Different Viewholders using Viewbinding.

Now we include the Logic for altering our ViewHolders based on the size of our list

Now before we move to the next step it’s important to note two things:

1. The currentList is a function in the ListAdapter class that returns the current list submitted to it.
2. overriding the getItemCount() and returning 1 will stop the recyclerView from duplicating the views X number of times based on the list's size.

Step 5

Wiring everything together

Now let's go to our MainActivity.kt and finish up this amazing setup.

We need to do a couple of things here so we can finish things up

1. Permission to read data from our android device:

Starting at API 19 android apps are needed to have Runtime permissions in their app so here is ours

2. Fire-up the intent to get the images from our android device when our permissions have been granted

3. Now we override on Activity result to receive the list of images from our gallery

Finally, we pass the results to a function that will set up our recycler view, and Voila we are done

Now here is our result

I hope it has been of help. Heres the link to a sample project on Github here TwitterImageDisplay Sample Project