UI Component by Jetpack Compose

Lazy List and Grids compose

Lazy Jetpack composes components its name suggests that it provides us the functionality of arranging the items as per the user's needs. here are some of the compose components that are defined by the Android community for the developers and better user experiences.

Jetpack Compose is the new way to implement layouts in Android using Kotlin allowing developer to create their own UI and make a user-interactive application.

Photo by David Iskander on Unsplash

First of all, you need to define or implement the compose UI and UI tooling to use the compose component.

It is recommended to use the latest android studio for developing applications using Jetpack compose components.

Steps to create a new project using Jetpack compose:

Step 1: Select new from file -> select new project

Step 2: Select phone and tablet -> Empty compose activity

So for that, you have to declare that dependencies into the Gradle of your android application.

Configuration for the application

implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

Note: If you have a fresh project and default selected compose activity then no need to import the above dependencies into your application because it’s already there.

Lazy lists

Compose provides a set of components that only compose and layout items which are visible in the component’s viewport. These components include LazyColumn and LazyRow.

As the name suggests, the difference between LazyColumn and LazyRow is the orientation in which they lay out their items and scroll. LazyColumn produces a vertically scrolling list, and LazyRow produces a horizontally scrolling list.

The Lazy components are different from most layouts in Compose. Instead of accepting a @Composable content block parameter, allowing apps to directly emit composable, the Lazy components provide a LazyListScope.() block.

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // Add another single item
    item {
        Text(text = "Last item")
    }
}

There are also a number of extension functions that allow you to add collections of items, such as a List. These extensions allow us to easily migrate our Column example from above:

import androidx.compose.foundation.lazy.items

@Composable
fun RowColumnList() {
    LazyColumn {
    itemsIndexed((1..5).map { it.toString() }) { _, row ->
        LazyRow {
            itemsIndexed(list) { _, column ->

                Card(
                    backgroundColor = Color.LightGray,
                    modifier = Modifier
                        .size(100.dp)
                        .padding(4.dp)
                ) {
                    Text(
                        text = "Row: $row\nCol: $column",
                        fontSize = 20.sp,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    }
  }
}

Lazy grids

The LazyVerticalGrid and LazyHorizontalGrid composable provide support for displaying items in a grid. A Lazy vertical grid will display its items in a vertically scrollable container, spanned across multiple columns, while the Lazy horizontal grids will have the same behavior on the horizontal axis.

Grids have the same powerful API capabilities as lists and they also use a very similar DSL — LazyGridScope.() for describing the content.

The following example displays items in a grid, using GridCells.Adaptive to set each column to be at least 128.dp wide:

@Composable
fun StickersGrid(photos: List<Photo>) {
    LazyVerticalGrid(
    cells = GridCells.Fixed(3),
    contentPadding = PaddingValues(8.dp)
    ) {
    items(data) { item ->
        Card(
            modifier = Modifier.padding(4.dp),
            backgroundColor = Color(
                red = Random.nextInt(0, 255),
                green = Random.nextInt(0, 255),
                blue = Random.nextInt(0, 255)
            )
        ) {
            Text(
                text = item,
                fontSize = 42.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(24.dp)
            )
        }
     }
   }
}

Limitations of the “LazyVerticalGrid”

The LazyVerticalGrid the composable function provides an easy way to create non-scrollable horizontal grids. If you want to build something like an image gallery or any other component with a few columns that are displayed on the screen without horizontal scrolling, this function is a great choice. However, if you want to create a grid that can be scrolled horizontally, this component is not suitable.

Photo by Florian Klauer on Unsplash

It’s not over yet the jetpack compose also provides a better feature for arranging data into the user interactive format. so for that jetpack has introduced the Sticky header.

Sticky headers (experimental)

The ‘sticky header’ pattern is helpful when displaying lists of grouped data. Below you can see an example of a ‘contacts list’, grouped by each contact’s initial:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderContactList(contacts: List<Contact>, selectedContact: (Contact)->Unit){
    val grouped = contacts.groupBy{it.section}

    LazyColumn(){
        grouped.forEach { (section, sectionContacts) ->
            stickyHeader {
                Text(
                    text = "SECTION: $section",
                    color = Color.White,
                    modifier = Modifier
                        .background(color = Color.Black)
                        .padding(8.dp)
                        .fillMaxWidth()
                )
            }

            items(
                items = sectionContacts,
                itemContent = {
                    ListItem(
                        person = it,
                        selectedContact = selectedContact
                    )
                }
            )
        }
    }
}

Please note that because the sticky header feature is currently experimental, you need to add an experimental annotation at your composable function.
@OptIn(ExperimentalFoundationApi::class)

Tips on using Lazy layouts

1. Avoid using 0-pixel sized items
2. Avoid nesting components scrollable in the same direction
3. Beware of putting multiple elements in one item
4. Consider using custom arrangements
5. Consider adding contentType

You can only reliably measure the performance of a Lazy layout when running in release mode and with R8 optimisation enabled. On debug builds, Lazy layout scrolling may appear slower. For more information on this, read through Compose performance.

Photo by Vasily Koloda on Unsplash

That’s all about Lazy components, Open to your suggestions and contributions.

Thank you.