Creating RecyclerView layout in android— No pain only gain

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.

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.

You can find full source code here.