Featured Image
Software Development

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.

RecyclerView layout preview

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.

RecyclerView item layout preview with 5 items displayed

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.

Populating with 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.

Populating with dummy movie released years

<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.

RecyclerView item layout populated with dummy movie released years

Step 3: Fill item layout with dummy images

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

Sampledata folder with movie posters in the covers directory

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.

Final RecyclerView with movie posters and dates

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.


Thanks for reading this article.

Also read: Building an Interactive Superhero App with Flutter

author
Pinkesh Darji
I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles. I have written many high-quality technical articles. I have worked with various startups to build their dream app. I have been involved in product development since my early days and know insights into it. I have provided my valuable input while taking some crucial decisions of the app by brainstorming with a design, QA team. Over the last 3 years, I have been developing mobile apps and libraries using Google’s Flutter framework. I mentor junior Flutter developers and review their code. You will also find me talking on various Flutter topics in local meetups.