Develop Reference

Jetpack compose LazyGridView not scroll on Column

When trying to put a LazyVerticalGrid inside a scrollable Column I get the following error:
java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().
I am not making a traditional list, I just have alot of elements that are too big to fit on the screen. Therefore I want the column to scroll so I can see all the elements. Here is my code:

you need to use an item with a span attribute. Assume that your grid view has three items in every row, you can put your item wherever you want with the scrollable screen.
LazyVerticalGrid(cells = GridCells.Fixed(4)) {
item(span = { GridItemSpan(4) }) { Header() }
item(span = { GridItemSpan(4) }) { AnotherView() }
items(gridItems) { GridItemView(it) }
}

If you want to keep some UI elements sticky at the top or bottom, you can play with the Modifier. weight(), for example:
#Composable
fun SomeScreenContent() {
val gridItems = List(30){ it.toString() }
Column(modifier = Modifier.fillMaxSize()) {
SomeTopContent(modifier = Modifier.weight(0.2f))
LazyVerticalGrid(
modifier = Modifier.weight(0.6f),
columns = GridCells.Fixed(4),
contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(gridItems) { item ->
GridItem(item)
}
}
SomeBottomContent(modifier = Modifier.weight(0.2f))
}
}
#Composable
fun SomeTopContent(modifier:Modifier = Modifier) {
Row(
modifier = modifier
.fillMaxWidth()
.background(Color(0xff5077FC)),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Text(text = "Top")
}
}
#Composable
fun SomeBottomContent(modifier:Modifier = Modifier) {
Row(
modifier = modifier
.fillMaxWidth()
.background(Color(0xff4EE180)),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Text(text = "Bottom")
}
}
#Composable
fun GridItem(item: String) {
Card(modifier = Modifier.size(100.dp)) {
Text(text = item)
}
}
Or just use the Scaffold composable function...

How to set visible indicator' dot and show the others when scrolling in jetpack compose

I have a lazyRow and I want to show list of indicators:
what I want: I want to show 6 items and when user scrolls other indicators get visible.
#Composable
private fun ImagesDotsIndicator(
modifier: Modifier,
totalDots: Int,
selectedIndex: Int
) {
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.Center,
reverseLayout = true,
verticalAlignment = Alignment.CenterVertically
) {
if (totalDots == 1) return#LazyRow
items(totalDots) { index ->
if (index == selectedIndex) {
Box(
modifier = Modifier
.size(8.dp)
.clip(CircleShape)
.background(color = Color.White)
)
} else {
Box(
modifier = Modifier
.size(6.dp)
.clip(CircleShape)
.background(color = Color.LightGray)
)
}
Spacer(modifier = Modifier.padding(horizontal = 2.dp))
}
}
}
how can I make this indicator?

I would suggest you use Google's Accompanist HorizontalPager and HorizontalPagerIndicator if you want to swipe pages and show the dots. This is a layout that lays out items in a horizontal row, and allows the user to horizontally swipe between pages and also show the page indicator.
You need to add these 2 lines to your app build gradle file to add the dependencies.
// Horizontal Pager and Indicators - Accompanist
implementation "com.google.accompanist:accompanist-pager:0.24.7-alpha"
implementation "com.google.accompanist:accompanist-pager-indicators:0.24.7-alpha"
On your composable file, you can add a simple Sealed class to hold the data that you want to display e.g. text.
sealed class CustomDisplayItem(val text1:String, val text2: String){
object FirstItem: CustomDisplayItem("Hi", "World")
object SecondItem: CustomDisplayItem("Hello", "I'm John")
}
Thereafter make a template of the composable element or page that you want to show if the user swipes left or right.
#Composable
fun DisplayItemTemplate(item: CustomDisplayItem) {
Column() {
Text(text = item.text2 )
Spacer(modifier = Modifier.height(4.dp))
Text(text = item.text2)
}
}
Lastly use HorizontalPager and HorizontalPageIndicator composables to display the corresponding page when a user swipes back and forth.
#OptIn(ExperimentalPagerApi::class)
#Composable
fun ImagesDotsIndicator(
modifier: Modifier,
) {
//list of pages to display
val displayItems = listOf(CustomDisplayItem.FirstItem, CustomDisplayItem.SecondItem)
val state = rememberPagerState()
Column(modifier = modifier.fillMaxSize()) {
//A horizontally scrolling layout that allows users to
// flip between items to the left and right.
HorizontalPager(
count = 6,
state = state,
) {
/*whenever we scroll sideways the page variable changes
displaying the corresponding page */
item ->
//call template item and add the data
DisplayItemTemplate(item = displayItems[item])
}
//HorizontalPagerIndicator dots
HorizontalPagerIndicator(
pagerState = state,
activeColor = MaterialTheme.colors.primary,
inactiveColor = Color.Gray,
indicatorWidth = 16.dp,
indicatorShape = CircleShape,
spacing = 8.dp,
modifier = Modifier
.weight(.1f)
.align(CenterHorizontally)
)
}
}
Please see the above links to read more on how you can customize your composables to work in your case.

Actually it is preaty straight forward without any additional library:
val list = (0..100).toList()
val state = rememberLazyListState()
val visibleIndex by remember {
derivedStateOf {
state.firstVisibleItemIndex
}
}
Text(text = visibleIndex.toString())
LazyColumn(state = state) {
items(list) { item ->
Text(text = item.toString())
}
}
Create scroll state and use it on your list, and on created scroll state observe first visible item.

Compose material3 OverScroll Shows in all 4 directions

I am using meterial3 with Compose . I found that all the Scrollable Composable Showing overscroll effect in all 4 directions regardless of scrolling direction. that goes for Column, LazyColumn, LazyVerticalGrid etc ..
I m not using anything custom to override overscroll effect. i can not figure out whats causing this behavior . i will add an example code below with LazyVerticalGrid which is causing this behavior . Since this is vertical grid it should show over scroll only vertically(to and bottom) but it also show it horizontally (left and right)..
Any direction on this will be appreciated.
#Composable
#Destination
fun FavoritesScreen(navigator: DestinationsNavigator) {
val favoritesViewModel: FavoritesViewModel = hiltViewModel()
val favoritesLiveData =
favoritesViewModel.favoritesLiveData.observeAsState(initial = null)
if (favoritesLiveData.value != null) {
if (favoritesLiveData.value!!.isEmpty()) {
// Show empty view
} else {
LazyVerticalGrid(
contentPadding = PaddingValues(
12.dp,
12.dp,
12.dp,
20.dp
),
columns = GridCells.Fixed(2),
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalArrangement = Arrangement.spacedBy(12.dp),
) {
item(span = { GridItemSpan(2) }) {
Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
Text(
text = stringResource(id = R.string.favorites),
style = MaterialTheme.typography.headlineMedium,
modifier = Modifier.padding(top = 20.dp)
)
ColumnSpacer(value = 10)
}
items(favoritesLiveData.value!!) { game ->
// grid Item
}
}
}
}
}

You may need to update your Compose version. This was a known issue in Compose 1.3.0-alpha01, which was fixed subsequently.

Accompanist SwipeRefresh Inside LazyColumn

I'm trying to place a SwipeRefresh layout inside a LazyColumn and scope it to include the 2 item calls and one items call, below a item {LazyRow(inside LazyColumn)} and below another item{}.
So what I'm trying to implement is:
LazyColumn(
Modifier
.fillMaxSize()
.background(colorResource(id = R.color.colorBackground))
) {
item {
LazyRow(
Modifier
.wrapContentHeight()
.fillMaxWidth()
.background(colorResource(id = R.color.colorBackground)),
listState
) { items()}
}
item { }
-- this is where I want to place the swipe Refresh --
item {}// box for holding a drawable
item {} // another box
items{ } // efficiently list items here
}
What I think I can do is, instead of using a lazyList and its dsl, I can make a huge Scrollable Column but I this will cause the page to lose all performance gains from items{} block at the bottom. Is there a more efficient way than having to use a Column?

You shall put LazyColumn in SwipeRefresh composable. E.g.:
SwipeRefresh(
state = swipeRefreshState,
onRefresh = onRefresh,
indicator = { state, refreshTrigger ->
SwipeRefreshIndicator(
state = state,
refreshTriggerDistance = refreshTrigger
)
}
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
horizontalAlignment = Alignment.CenterHorizontally
) {
item {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
someSections.forEach { section ->
SomeComposable(...)
}
}
}
}
}
}

How to make a lazy column item occupy the complete height in Jetpack compose?

I am trying to work with the compose lazy column, i want each item of my lazy column to have the maximum height , I tried the below code but it is not giving the expected result
Code
val itemsList: List by mainScreenViewModel.portfolioItems.observeAsState(listOf())
Box(modifier = Modifier.fillMaxSize()) {
Column(modifier = Modifier.matchParentSize()) {
LazyColumn(
content = {
itemsIndexed(itemsList) { index, item ->
Text(text = "Hello", modifier = Modifier.fillMaxHeight())
}
},
)
}
}

fillMaxHeight()/fillMaxWidth() do not work correctly for vertical and horizontal scrolling list respectively. Instead we can use fillParentHeight() and fillParentWidth() respectively provided in LazyItemScope.
Sample Code:
LazyColumn(
modifier = modifier.fillMaxHeight()) {
items(count = 3) {
Column(modifier = Modifier.fillParentMaxHeight()) {
Text(
text = "Item $it",
modifier = Modifier.fillMaxWidth()
)
Divider(Modifier.height(2.dp))
}
}
}
Refer for more details: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope