Decoding Jetpack Compose — LazyColumn, Navigation Architecture, Data Model, Grid, and TabBar View | by Ashutosh Singh

Half 0

Because the steady launch of jetpack-compose1.0, I begin exploring the UI framework.

Declarative UI is the long run so I believed I ought to have a strive — and consider me, I’m loving it.

In case you’re coming from a Flutter background or any declarative UI background then it’s extremely straightforward to know Jetpack Compose declarative UI implementation.

Let’s skip to the great half:

[project Demo]

If you’re new to jetpack-compose you can begin your journey by reading this article.

[Project structure]
  • Mannequin — This folder incorporates knowledge class and pretend knowledge.
  • Screens — This folder incorporates screens of the app.
  • Navigation — This folder incorporates navigation construction .
  • Widget — This folder include some reusable compose widget

Let’s soar into the code!

Begin creating the information class — InstaUserData is a read-only class (no setters), so we have to use val key phrase as proven under:

knowledge class InstaUserData
val id: String,
val username: String,
val title: String,
val isFollow: Boolean,
val bio: String,
val profilePic: String,
val publish: Int,
val noOfFollowers: Int,
val noOfFollowing: Int,
val imagePost: Record<String>,


Now let’s make a perform with dummy knowledge that return an inventory of InstaUserData.

enjoyable getUsers(): Record<InstaUserData> 
return listOf(
id = "1",
username = "ashu8", title = "Ashutosh",
isFollow = false,
publish = 12,
noOfFollowers = 30,
noOfFollowing = 30,
imagePost = listOf(
bio = "Unapologetically Me.n" +n" +
" "An introvert soul caught into an extrovert physique. ",
profilePic = "https://i.picsum.photographs/id/1005/5760/3840.jpg?hmac=2acSJCOwz9q_dKtDZdSB-OIK1HUcwBeXco_RMMTUgfY"

A LazyColumn is a vertically scrolling checklist that solely composes and lays out the at present seen objects. It’s just like a RecyclerView within the traditional Android View system.

The code for listview.kt is given under:

[List View File]

First, add listwidget file contained in the widget folder.

Inside that file, write “BuildList” composable perform with the parameters which take a checklist of InstaUserData and an onClick perform onItemClick.

  1. BuildList composable perform takes LazyColumn. Within the lazy column there’s a technique merchandise that takes Record<T> the place T is Kind — in our case merchandise is Record<InstaUserData>.
  2. As you’ll be able to see, the UI checklist has a Consumer picture, title, username, and a button in Row so within the merchandise technique, we cross Row Composable as a lambda. In Row, there may be one modifier clickable which makes every row clickable which take perform onItemClick which we outline as a parameter in BuildList perform and with assist of it ( in trailing lambda perform The parameter might be implicitly declared beneath the title it) the key phrase we will get the id of the checklist.
  3. For getting consumer pictures from the web now we have so as to add the Coil library in construct.gradle file beneath the dependencies part:
implementation "io.coil-kt:coil-compose:<latest-version>"

Now use the rememberImagePainter perform to create an ImagePainter that may be drawn by the Picture composable.

4. Spacer Composable is used to fill remaining area.

5. Make a BuildButton Composable with parameters that take the title, and colour of the button. In InstaUserData class there’s a parameter: isFollow which takes the bool worth so with the assistance of isFollow we will test right here if it’s true then it returns the Following button else Observe.

6. Including extra icon with the assistance of Picture composable utilizing printer useful resource perform which takes a picture from the drawable folder.

So we’re performed with ListView Let’s begin navigation coding when the consumer clicks on any consumer checklist it navigates to the consumer particulars display screen.

Navigation Element — A set of contemporary instruments and libraries for dealing with complicated navigation circumstances in android.

The navigation element has 3 main components:

i.) NavigationGraph
ii.) NavHost
iii.) NavController

Within the navigation folder add kotlin file navigation.kt. On this file, we’ll create an enum and checklist out all potential screens of the app.

The code for Navigation_enum.kt is:

[Navigation Enum file]
  1. Create enum class title NavigationScreen and outline all display screen as enum
    for the reason that first display screen is MainScreen and the subsequent DetailsScreen.
  2. Contained in the enum class create a companion object (companion object is sort of a static key phrase to declare the members of the category and use them with out making any object )contained in the companion object a perform known as fromRoute that inherits from NavigationScreen then we test the route utilizing the when key phrase.

As soon as now we have performed with NavigationScreen now we have to create precise navigation simply go to the navigation folder create a brand new kotlin file. main_navigation.kt

So mainly on this file we gonna create a construction that I talk about above so let’s begin with.

However First, you need to add dependencies to your construct.gradle file


The NavController is the central API for the Navigation element. It’s stateful and retains observe of the again stack of composables that make up the screens in your app and the state of every display screen.

You possibly can create a NavController through the use of the rememberNavController() the tactic in your composable:

val navController = rememberNavController()

Every NavController have to be related to a single NavHost composable.

Creating the NavHost requires the NavController beforehand created through rememberNavController() and the route of the beginning vacation spot of your graph.

NavHost(navController = navController, startDestination = NavigaionScreen.MainScreen.title) 

//right here we put precise graph builder( Nav Graph)

HomeScreen(navController = navController)

DetailScreen(navController = navController)

Passing Argument On Navigation

Allow us to assume when the consumer clicks on any checklist, now we have to cross the consumer id to the subsequent web page and get consumer knowledge in accordance with the consumer id.

composable(NavigaionScreen.DetailsScreen.title +"/userId", //1
arguments = listOf(navArgument(title = "userId")
sort =
) //2

backStackEntry -> //3
navController = navController, backStackEntry.arguments?.getString("userId")


  1. On the net, now we have hyperlinks like in that method now we have to additionally add variables within the route.
    So Append the variable title which holds the data.
  2. In a composable perform, there’s a parameter argument that takes an inventory of arguments right here we cross just one argument navArgument that takes the title of the argument which similar as cross in route and kind of arguments, on this case, it is a String.
  3. backStackEntry — extracts the NavArguments from the NavBackStackEntry that’s obtainable within the lambda of the composable() perform.

Right here is the code for main_navigation.kt file:

[Navigation strucutre file]

Now now we have performed with navigation and LazyColumn so let’s take a look at what our House Display screen Code seems like now which Construct checklist of consumer UI.

The code for homescreen.kt is:

[Home Screen File]
  1. Within the HomeScreen , we cross NavController for navigation operation
  2. Right here we’re utilizing BuildList composable which takes the checklist of InstaUserData which is outlined in our knowledge class.
  3. In case you bear in mind BuildList composable perform additionally takes a perform argument that takes string right here we’re passing id in DeatilScreen when navigating to the DetailScreen.

The code for MainActivity.kt file is:

[Main Activity File]

Now now we have to give attention to the main points display screen within the particulars display screen there are two important views:

The LazyVerticalGrid the composable perform permits us to create a lazy grid format.

enjoyable BuildGridView(knowledge: Record<String>)
cells = GridCells.Fastened(3),//1
contentPadding = PaddingValues(8.dp)


modifier = Modifier.padding(2.dp) .dimension(120.dp), backgroundColor = Colour.Grey ) //3

Picture(painter = rememberImagePainter(knowledge = knowledge[it]), contentDescription = null, contentScale = ContentScale.FillBounds, )

  1. To construct a grid with three columns, we will use the GridCells.Fastened(3) worth for the cells parameter.
  2. Provides a rely of things.
  3. Outline Card composable The content material displayed by a single merchandise.

The code for gridview.kt is:

[Grid View Composable]

A TabRow incorporates a row of Tabs, and shows an indicator beneath the at present chosen tab.


enjoyable PostTabView(knowledge:Record<String>) {
val tagData=listOf(

var selectedTabIndex by bear in mind //1

val imageList =
listOf(painterResource(id = R.drawable.format), painterResource(id = R.drawable.tags)) //2

selectedTabIndex = selectedTabIndex,
backgroundColor = Colour.Clear,
contentColor = Colour.Black,

imageList.forEachIndexed index, merchandise -> //3
chosen = selectedTabIndex == index,
selectedContentColor = Colour.Black,
unselectedContentColor = Colour.Grey,
onClick = //4
selectedTabIndex = index

painter = merchandise,
contentDescription = "publish",
tint = if (selectedTabIndex == index) Colour.Black else Colour.Grey,
modifier = Modifier

when (selectedTabIndex)
0 -> BuildGridView(knowledge)// inflate the primary tab
1 -> BuildGridView(tagData)// inflate the second tab


  1. Right here we outline the state for the tab index with mutableStateOf(0). 0 would be the preliminary worth.
  2. We’ve additionally outlined an inventory of painterResource which take pictures from drawable.
  3. By utilizing forEachIndexed loop we draw Tab composable.

The Tab composable consists of:

  • chosen — whether or not this tab is chosen or not
  • onClick — the callback to be invoked when this tab is chosen
  • selectedContentColor — the colour for the content material of this tab when chosen, and the colour of the ripple.
  • unselectedContentColor — the colour for the content material of this tab when not chosen

So we’re performed with constructing GridView and TabBar View.

Let’s see how the DetailsScreen code seems like in our profilescreen.kt file:

[profile screen file]
[final project demo][gif by author]

Yow will discover the supply code of this undertaking under:

Thanks for studying.

More Posts