The last elements are not visible in LazyColumn. Jetpack Compose

Question

I take an example from this codelab

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    return ComposeView(requireContext()).apply {
    setContent {
        //Column(modifier = Modifier.background(Color.LightGray)) {
            //Text(text = "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", modifier = Modifier.weight(1f))
            val scrollState = rememberLazyListState()

            LazyColumn(state = scrollState, modifier = Modifier
                .background(Color.Cyan).fillMaxWidth()) {
                items(100) {
                    Text("Item #$it")
                }
            }
        //}

    }
  } 
}

But latest element not visible on my scree. P.S I scrolled to the end

When add height in column - the last elements are visible, but LazyColumn stretches over the entire height

LazyColumn(state = scrollState, modifier = 
 Modifier.background(Color.Cyan).fillMaxWidth().height(350.dp)) {         
   items(100) {
    Text("Item #$it")
   }
}

This happens because the column is a root element. Ok, Adding Column() in root element and LazyColumn() into in root, but I want the LazyСolumn to take up the entire height

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
return ComposeView(requireContext()).apply {
    setContent {
        Column(modifier = Modifier.background(Color.LightGray)) {
            val scrollState = rememberLazyListState()

            LazyColumn(state = scrollState, modifier = Modifier
                .background(Color.Cyan).fillMaxWidth()/*.height(350.dp)*/) {
                items(100) {
                    Text("Item #$it")
                }
            }
        }

     }
  }
}

The last elements are not visible

Ideally I want to make a scrolling table with a static header

UPD: When I add Text() On and Under LazyColumn(), also the last elements are not visible

setContent {
            MaterialTheme {
                Column(modifier = Modifier
                    .background(Color.LightGray)
                    .fillMaxSize()) {
                    Text(text = "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", modifier = Modifier.background(Color.Red).weight(1f)
                    )
                    val scrollState = rememberLazyListState()

                    LazyColumn(
                        state = scrollState,
                        modifier = Modifier
                            .background(Color.Cyan)
                            .fillMaxWidth()
                            .weight(4f)
                    ) {
                        items(100) {
                            Text("Item #$it")
                        }
                    }
                    Text(text = "!!!!!!!!!!!!!!!!!!!!", modifier = Modifier.background(Color.Red).weight(1f))
                }
            }

        }

Starspangled

Faced with the same problem when you use CoordinatorLayout + Behaviour. – Zeitgeist

Answer 1

Wrap your LazyColumn with Scaffold and set contentPadding for the LazyColumn with the padding values provided by the Scaffold:

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

Hag

i have same problem .. but its not working with this solution – Reaves

Solution works! @Hag could you please help with the reason behind this fix as well. Thanks! – Lynsey

Only need to add the Scaffold to wrap the root screen. Applying paddingValues is not required. – Precursor

Answer 2

Try this:

override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(requireContext()).apply {
    setContent {
        Box(modifier = Modifier.background(Color.LightGray)) {
            val scrollState = rememberLazyListState()

            LazyColumn(state = scrollState, modifier = Modifier
                .background(Color.Cyan).fillMaxSize()) {
                items(100) {
                    Text("Item #$it")
                }
            }
        }

     }
  }
}

Azar

Thanks for the quick response, but not working for me – Starspangled

Answer 3

Replacing:
val scrollState = rememberLazyListState()
with:
val scrollState = rememberLazyListState(99 /*or use (list.size - 1) if you have a list in you LazyColumn */)
worked perfectly for me.

Inebriate

Answer 4

You can add the following systemBarsPadding to the modifier of LazyColumn.

I guess it has to do with making the fullscreen activity.

LazyColumn(
    modifier = Modifier.systemBarsPadding().fillMaxSize(),
) {
  ...
}

Also, It works adding Scaffold which Vladislav said.

Denby

Answer 5

not ideal but get the job done:

add an empty text element at the end

LazyColumn(){
items(yourdata){
 // 
}
item{
  Text("")
}
}

Falciform

Answer 6

This looks like the bottom of your view is under the navigation bar. Check out if you have this line in your activity:

WindowCompat.setDecorFitsSystemWindows(window, false)

You can remove this line if you don't need to place your views under navigation bar.

If you need it, like to make it transparent and place some background view underneath, you can use Accompanist Insets. With this library you can add padding respectful to navigation/status bar, like with Modifier.navigationBarsPadding():

LazyColumn(
    state = scrollState,
    modifier = Modifier
        .background(Color.Cyan)
        .fillMaxWidth()
        .navigationBarsPadding()
) {
    items(100) {
        Text("Item #$it")
    }
}

Braces

when I add Text() On and Under LazyColum, also the last elements are not visible – Starspangled

@MarkGlushko Modifier.navigationBarsPadding should be added to the top most container, or to the last element in your column – Braces