Part 1: RecyclerView from zero to hero

5 min readFeb 27, 2018

By the end of this series you will have a RecyclerView with drag & drop and swipe with custom background, that looks like this:

During 4 posts I will try to show you how to implement a basic RecyclerView that allows you to perform drag & drop/swipe with custom backgrounds, and during the former case I will try to show you how to animate anything here.

Part 1- First things first: implementing a basic RecyclerView(easy peasy).

Part 2 — Giving it functionalities: swipe and drag & drop.

Part 3 — Painting a background while swiping.

Part 3b: RecyclerView from zero to hero — Let’s make it shine: expanding circle background effect

If you have some background knowledge with RecyclerView you may want to jump to part 2 directly.

Part 1 — First things first: implementing a basic RecyclerView

First things first: implementing a basic RecyclerView (easy-peasy).

Nothing especial here, we start with our favorite Activity, our MainActivity, and we declare the RecyclerView by adding it to the layout.xml.

Most probably you are familiar with RecyclerViews, so the term ViewHolder does not scary you, but just in case, a ViewHolder is an Android pattern to reuse views and avoid the extra cost of inflating them and calling findViewById()every time an item shows up in the screen.

Nowadays, thanks to the RecyclerView, the system will handle all this complexity for us, so we only need to worry about the type of ViewHolder we are creating and how we update the data within it.

How RecyclerView works, and how it handles this recycling process is out of the scope of this post but you can find a lot of information in the internet.

So as I mentioned before, we have to define a ViewHolder, that will hold the reference to our views, inside each item of the list, we can have as many different types of ViewHolders as we want according to the number of different items we want to display, for instance: headers, footer, regular items are different types of items.

For now let’s define a super simple one, one that only holds a TextView, the ViewHolder also needs to contain a function that maps the new information that may come with each view we want to update inside our item, we typically call this method bind(), but it’s completely up to you.

If you are using Kotlin extensions, be super careful of where you assign the view reference inside the holder (never inside the binder method call if we are not inside an Activity or Fragment), or you can achieve the opposite of what we are looking for.

And now its turn for the Adapter, this is the component that handles everything, it binds the data from the app with the displayed views, and it also creates and updates the ViewHolders.

Three methods are important here for the purpuse of this post:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewAdapter.ItemViewHolder

Called when the RecyclerView needs a new ViewHolder to represent some data of a given type, this ViewHolder will be reused all the time to display new data, to do that, the system just update the inner views inside it. (findViewById() will be called only here, so if your item is composed by a TextView and a ImageView the system will update the information showed by the views, but no the view referenced by itself in the future)

override fun onBindViewHolder(holder: ItemViewHolder, position: Int)

This method is called by the RecyclerView to display data in a certain position, basically it updates the content of the view (all the references previously created in onCreateViewHolder). It is called when a view is invalidated or it has a new position that cannot be determined.

override fun getItemCount(): Int

This method returns the number of elements that your RecyclerView is displaying, apparently this is not important, it’s only purpose is to return the size of your collection, but if your data gets more complicated, and you want to show headers, footers, etc. you would need to modify this value artificially.

There are a few methods more that are also important:

public int getItemViewType(int position) important if ,as it was mentioned before, you want to show extra items out of your data set, like footers or headers.
Or public long getItemId(int position) if you want to refresh data and just update those elements that have changed, but both methods are way out of the scope of this post.

So here we got our adapter

You probably notice a couple of thing here that we did not mention before, first:

Don’t worry it is just an extension function for the class ViewGroup that allows us to clean up a little bit our code.

And second:

Here we define our data set as a member of the adapter , it is important not only to have something to show, but also to know if we can or cannot interact with it, please notice that we are using MutableList because of that, otherwise you may want to use an immutable set in order to avoid the data to be changed.

So now let’s put everything together in our Activity or Fragment like this:

And here we go, we should have now a basic list that allows us to scroll down and up, in the next part I will cover how to add swipe/drag & drop to implement rich interaction patterns with our data.