How to build a beautiful 😍 multiple view RecyclerView app — The right way

UI Design by Inuwa Ibrahim (Ibrajix)

The truth is — I am one of those developers that care so much about the looks of an application, I would literally uninstall an application in 2 seconds for looking so ugly (even if it functions well 👽)

So, here is what we are building…

Things you’d learn:

1. Using a single recyclerView with multiple view types
2. Clean Code — MVVM architecture
3. Displaying data from an external api
4. Motion layout for animation

Full code:

https://github.com/ibrajix/NftApp
ibrajix/NftApp (github.com)

DATA

We are making use of an external api, which I mocked using: https://mockapi.io/

1, 2, 3 and 4 from the image above shows portion of the layout which can be dynamic.
As such, we would create a layout item for each.
Check full code for various recyclerview layout files

NftData.kt

RETROFIT

We are using retrofit to make a request to the external API.

ApiService.kt

ApiDataSource.kt

Repository

As you can see, I am using hilt for dependency injection to inject the required classes, Please check full code for NetworkModule.kt and see how I provided the necessary retrofit classes and dependencies:

NftRepository.kt

Recyclerview

A recyclerview needs a viewholder and an adapter. This application consist of a single recyclerview, check the file activity_main.xml

NftViewHolder.kt

• This would be a sealed class because we want more control over inheritance
• We’ll be using viewBinding to interact with each of our recyclerView layout files
• I used a library called coil to load images from the external api and also to provide some transformations (border radius etc) (Farewell Glide ✌️)

NftAdapter.kt

• Our Adapter extends the ListAdapter class which is now the recommended approach
• We use DiffUtil to avoid usage of recyclerview’s adapter’s notifyDataSetChanged() which is not efficient because it redraws the entire UI when maybe a few things changed.
• onCreateViewHolder(): Checks which viewType is present and inflates the appropriate layout file
• onBindViewHolder(): Binds the data with the view based on the viewHolder
• getItemViewType(): As the name implies, determines which type of view to display in a specific position in the recyclerview

NftAdapter.kt

UI

NftViewModel.kt

• Using state flow we get an observable flow that emits the current and new state updates from the data source

MainActivity.kt

• We set up our recyclerview layout manager and use the new recommended way of collecting flows in the UI layer

Thanks for reading.

Full code:
Click here

Hopefully, you’ve learnt a thing or two on how to build complex views with recyclerview using clean architecture 😉

CONTACT ME
https://linktr.ee/Ibrajix