Hidden bottom item in LazyColumn - Jetpack Compose

Viewed 1132

I am trying to create a list of items with a hidden button at the bottom. By default the button is not visible on the screen.

If a user scrolls to the bottom of the list the button should appear like it is the last item of the list.

I created illustrations to better visualize the desired behaviour:

Sketch 1: List with a few items

enter image description here

Sketch 2: List with a lot of items

enter image description here

I already tried the solution for a similar problem (https://stackoverflow.com/a/69196765/11720296) and added extra offset but unfortunately it didn't work.

Does somebody have an idea how to create this behaviour?

2 Answers

itemsIndexed will help in this case in following example I have used itemsIndexed in Lazycolumn it gives index which is visible to the user. In this example I was trying to show some specific text only when first message is visible.

 LazyColumn() {
                itemsIndexed(tempListOfMessages) { index, localMessage ->
                    if (localMessage != null) {
                        SingleMessageView(
                            localMessageInfo = localMessage,
                            (index == 0)
                      )
                    }
                }  
            }

enter image description here

when scroll that text scroll with first item.

enter image description here

Try this.

Scaffold { paddingValues ->
LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = paddingValues
) {
  ...
}

}

Related