[Jetpack Compose] LazyColumn: Escape from Recyclerview

Last month, Jetpack Compose Beta was released!
see Beta Overview

Even if it’s beta, looks cool for some super advantages.
In this posting, I will focus on LazyColumn which will replace RecyclerView.

Now I’m testing Compose Beta on Android Studio Preview(Canary version) on M1 Macbook Pro.
it’s slow as HELL!!! (normal Android Studio is not much slow)
If you have a good Mac already, it’s not time to buy M1 Mac yet.

Anyway before dive into code, Add Jetpack Compose to an existing project

What is an Column?

Column is a layout composable that places its children in a vertical sequence.
It places its children like LinearLayout in Android Views.

@Composable
fun ColumnTest() {
    Column {
        Text("Hello Compose")
        Image(painterResource(R.drawable.background), null)
        Spacer(Modifier.preferredHeight(16.dp))
        Text("Work from Home")
    }
}

To make it scrollable, use modifiers like this Column(Modifier.verticalScroll(rememberScrollState()))

LazyColumn🐌

class ComposeActivity : ComponentActivity() {

    val itemList = (0..50).toList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NameList(itemList)
        }
    }

    @Composable
    fun NameList(name: List<Int>) {
        LazyColumn {
            items(name) {
                Text("Item is $it", color = Color.Blue)
            }
        }
    }
}

That’s it. You don’t need to make annoying Adapter at all!!

LazyColumn doesn’t recycle its children like RecyclerView. It emits new Composables as you scroll through it and is still performant as emitting Composables is relatively cheap compared to instantiating Android Views.

It’s a basic usage, you can also set items like below .

val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")

LazyColumn {
    items(itemsList) {
        Text("Item is $it")
    }

    item {
        Text("Single item")
    }

    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

Parameters of LazyColumn:

fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    content: LazyListScope.() -> Unit
)

Description:

modifier - the modifier to apply to this layout.

state - the state object to be used to control or observe the list’s state.

contentPadding - a padding around the whole content. This will add padding for the. content after it has been clipped, which is not possible via modifier param. You can use it to add a padding before the first item or after the last one. If you want to add a spacing between each item use verticalArrangement.

reverseLayout - reverse the direction of scrolling and layout, when true items will be composed from the bottom to the top and LazyListState.firstVisibleItemIndex == 0 will mean we scrolled to the bottom.

verticalArrangement - The vertical arrangement of the layout’s children. This allows to add a spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.
horizontalAlignment - the horizontal alignment applied to the items.

flingBehavior - logic describing fling behavior.

content - a block which describes the content. Inside this block you can use methods like LazyListScope.item to add a single item or LazyListScope.items to add a list of items.

What is different ScrollableColumn and LazyColumn?

ScrollableColumn is a wrapper of Column using a verticalScroll modifier. It renders all its children at the same time. Its equivalent in Android Views is ScrollView

LazyColumn renders only the visible items on screen, allowing performance gains when rendering a big list. It’s equivalent in Android Views is RecyclerView

As the list holds thousands of items, which will impact the app’s fluidity when rendered, use LazyColumn to only render the visible elements on the screen rather than all of them.

If there’s a mistake, always welcome your opinion!

• android 4
• kotlin 2
• progressBar 1
• compose 1
• editText 1