Android sticky - footer using jetpack compose: Align footer view to table, until it reaches screen size and then become fixed at the bottom

Viewed 1218

I want to achieve this using jetpack compose.

enter image description here

A is scrollable list of row items. When A is smaller than screen(or parent) size, B(footer) should be placed bellow the last row. When A + B are bigger than screen size, then B becomes fixed at the bottom and A content is scrollable. I'm wondering if there is easy way to achieve this, using compose ConstraintLayout.

3 Answers

I found solution for it. I had to use Modifier.weight(1f, false) at A.

There are many ways to do this but the most efficient way is to use the bottomBar property of Scaffold View.

For example:

@Composable
fun RenderContent() {
    Scaffold(
        topBar = { /* Your app bar goes here */ },
        bottomBar = { /* Anything you place in here will be stick to the bottom. */ }
    ) {
        // ... Rest of the content
        // Benefits: If you make the content scrollable and
        // the `bottomBar` composable remain on top of the content
    }
}

If I understood you correctly you are trying to add a footer view to a LazyColmn. The LazyColumn in JetpackCompose is behaving like the native ListView. I will give an example of a LazyColumn that has a view(composable) at the bottom that is shown when you scroll at the end of the list:

LazyColumn() {
item {
    //If you want the first item to stay always on top as you scroll use stickyHeader for this section.
    Text("This is the first item")
}
items(listItems.size) {
    Text("This is a normal list item")
}
item {
    Text("This item will behave as a footer and display at the end of the list")
}

}

Hope this helps somebody. Thanks

Related