How does it work?

This approach involves these elements:

UI JSON (from Backend APIs), will have a proper definition of all the view types, data to be filled, their positions and actions to be performed. I know this all seems vague as of now, but we will learn more by looking at the sample JSON.

#1: Defined View Types: In this approach, the server response contains the pre-defined view types, which has all the actionable items like in the sample below, we have view type as image card, its title, action to be performed like opening the profile page for Cristiano Ronaldo with a specific id provided.

JSON with view types

#2: Defined View’s: In this approach, the server response contains all its views, its hierarchy, positions, width, height, padding, color, text, etc. It defines all the needed properties to layout the view.

So, what's the difference between the two styles: In Defined View Types style, a particular view is already present in the app and you can only change the certain properties of the elements depending upon your usecase. In contrast, Defined View’s style is exhaustive enough to apply width, height, paddings, margins and all the properties through server.

Parsers/Converters: They convert/map the UI JSON into models, which can then be used to layout the views on the screen according to JSON. There are a lot of converters in android to perform this Gson, Moshi, Kotlin Serialization, etc.

Layouting: Now, the last step is to display the views onto the screen. So, the first thought which comes up in mind to implement this is everyone’s obvious choice: RecyclerView. That’s true RecyclerView can help us build this behavior, but will it be a viable option down the line or at scale, managing different view types, scroll performance, view creations, memory utilization.

Yes, you can use RecyclerView for the implementation, but there are other lots of amazing View Architectures available in the android open-source community which can help build these views natively and efficiently keeping in mind all optimizations happening underneath in the library.

Epoxy from Airbnb Litho from Facebook Proteus from Flipkart Graywater from Tumblr Groupie

P.S: All of them have the same end goal, but how they are work is different.

There are a lot of tutorials out there for Epoxy and Litho as they are the ones most widely used.

Wait… How can I forget? Yes, it’s the upcoming latest UI toolkit from Google itself for building modern UI.

Jetpack Compose 🤩, the toolkit is right now in early-stage development and there is a lot of aggressive development going on. But you can try the jetpack compose now though it’s prone to breaking changes.