Creating RecyclerView layout in android— No pain only gain

Photo by Ali Yahya on Unsplash

So you have been assigned to develop a new feature, where you need to show a list of some data. I am sure you that you would think about RecyclerView to implement, Right? Then this post is for you.

What will we learn?

We will create RecyclerView that actually shows data, Exactly what it was given to you by design team.

  1. Before Backend guy hits you with API.
  2. Without even mocking API

Let’s see how actually will it look like.

So to create this, I assume that you have already included RecyclerView in your activity so that it looks just exactly like left screenshot.

Step 1: Prepare RecyclerView

Just add tools:listitem and tools:itemCount attribute to RecyclerView like this.

<android.support.v7.widget.RecyclerView
android:id="@+id/card_recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
tools:listitem="@layout/item_movie"
tools:itemCount="5"

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

where tools:listitem=”@layout/item_movie” refers to the item layout and tools:itemCount=”5" indicates to display 5 items on the screen and hence we get output like this.

Step 2: Fill item layout with dummy data

So we have a list of items. Now we will populate these items with dummy data of movies. We will first create dummy movie names.

To do that right click app -> new -> Sample Data directory. Give it a name as sampledata.

Create new Text file under that sampledata and give it a name as movies_name and fill it with some movie name.

Now refer this sample file that we have just created in item_movie.xml in TextView where we suppose to display movie name like this.

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="@sample/movies_name"/>

Now follow the same approach to fill movie released year.

<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="@sample/movies_year"/>

Finally, we will get to see something like this.

Step 3: Fill item layout with dummy images

Create a new folder inside sampledata as covers and put all image poster over there.

poster inside for Avengers: Infinity War. The poster art copyright is believed to belong to the distributor of the film, Walt Disney Studios Motion Pictures, the publisher, Marvel Studios, or the graphic artist.

And refer this image directory in imageView inside item_movie.xml like this.

<ImageView
android:id="@+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp"
tools:src="@sample/covers"/>

Finally, our RecyclerView now looks like this.

Cool right?

But did you figure out who was the lead actor(Hero) in this post. Yes, you caught it right. It was Tools Attribute.

So basically when you apply tools: attribute instead of android: in any view, you get to see it’s preview before actually running app.

There are loads of other usages of tools attribute which you can find it really helpful in day to day development task.

I highly recommend reading this official docs on tools attribute.

Reference link. Slide presentation created by Jerome Gaillard and Vadim Caen, Software engineers on Android studio.

You can find full source code here.


Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me.

For more about programming, follow me and Aubergine Solution, so you’ll get notified when we write new posts.

Check out all the Aubergine Solution best articles here.