CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composelazycolumn
Mark Glushko
Mark Glushko

Reputation: 121

The last elements are not visible in LazyColumn. Jetpack Compose

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

        }

Upvotes: 10

Views: 4952

Answers (6)

kamal douma
kamal douma

Reputation: 514

not ideal but get the job done:

add an empty text element at the end

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

Upvotes: 1

Saba
Saba

Reputation: 1541

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.

Upvotes: 0

Mr. Techie
Mr. Techie

Reputation: 886

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.

Upvotes: 0

Vladislav
Vladislav

Reputation: 186

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
    ) {
      ...
    }
 }

Upvotes: 17

Phil Dukhov
Phil Dukhov

Reputation: 87804

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

Upvotes: -1

Jakoss
Jakoss

Reputation: 5235

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

     }
  }
}

Upvotes: 0

Related Questions