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

Question

I want to achieve this using jetpack compose.

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.

score 15 · Answer 1 · edited Jun 29 '23 at 20:40

15

The solution is to use Modifier.weight(1f, false) in A. This is because the parent element's size will first be used by unweighted elements and then the remaining space will be distributed to weighted elements according to their weights. See this answer for more details.

edited Jun 29 '23 at 20:40

Felix

2,548
19
48

answered Apr 01 '22 at 09:10

Bpn

463
1
4
11

Puneet Verma · Answer 2 · 2022-05-27T13:58:25.860

8

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
    }
}

edited May 27 '22 at 13:58

answered May 27 '22 at 13:56

Puneet Verma

101
5

good option. save my time. any idea to redusee bottom bar unwanted padding? – Amal Jun 02 '23 at 08:34

score 1 · Answer 3 · answered Sep 21 '22 at 07:35

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

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

3 Answers3