How can I use lazy column and lazyverticalgrid in jetpack compose?

Question

I wanted a layout similar to

`<Scrollview>
  <Relativelayout>
     <Recyclerview/>(Horizontal)
     <Recyclerview/>(Vertical)
  </Relativelayout>
</Scrollview>`

this is my compose code related to the issue

import androidx.compose.foundation.*
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composeappdemo.R
import com.example.composeappdemo.model.Feature
import com.example.composeappdemo.ui.theme.*

@ExperimentalFoundationApi
@Composable
fun HomeScreen(list: List<String>) {
    var features = listOf(
        Feature(
            title = "Summer Times",
            R.drawable.ic__search,
            BlueViolet1,
            BlueViolet1,
            BlueViolet1
        ),
        Feature(
            title = "Winter Vibes",
            R.drawable.ic__search,
            LightGreen1,
            BlueViolet1,
            BlueViolet1
        ),
        Feature(
            title = "Spring Times",
            R.drawable.ic__search,
            LightRed,
            BlueViolet1,
            BlueViolet1
        )
    )

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(DeepBlue)
    ) {
        LazyColumn() {
            item {
                GreetingScreen("Android")
            }
            item {
                ChipSection(list)
            }
            item {
                CurrentMeditation()
            }
            item {
                Text(
                    text = "Features",
                    color = Color.White,
                    style = MaterialTheme.typography.h6,
                    modifier = Modifier.padding(15.dp)
                )
            }
            items(features.windowed(2, 2, true)) { list ->
                Row(Modifier.fillMaxWidth()) {
                    list.forEach {
                        FeatureItem(it)
                    }
                }
            }
        }
    }
}

@Composable
fun GreetingScreen(name: String = "Android") {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .padding(15.dp)
    ) {
        Column(
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "Good Morning , $name",
                style = MaterialTheme.typography.h6,
                color = Color.White
            )
            Text(
                text = "We wish you a good day today",
                style = MaterialTheme.typography.body1,
                color = Color.White
            )
        }
        Icon(
            painter = painterResource(id = R.drawable.ic__search),
            contentDescription = "Search",
            tint = Color.White,
            modifier = Modifier.size(24.dp)
        )
    }
}

@Composable
fun ChipSection(
    chips: List<String>
) {
    var selectedChipIndex by remember {
        mutableStateOf(0)
    }
    LazyRow {
        items(chips.size) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .padding(start = 15.dp, top = 15.dp, bottom = 15.dp)
                    .clickable {
                        selectedChipIndex = it
                    }
                    .clip(RoundedCornerShape(10.dp))
                    .background(
                        if (selectedChipIndex == it) ButtonBlue
                        else DarkerButtonBlue
                    )
                    .padding(15.dp)
            ) {
                Text(text = chips[it], color = Color.White)
            }
        }
    }
}

@Composable
fun CurrentMeditation(
    color: Color = LightRed
) {
    Box(
        modifier = Modifier
            .padding(15.dp)
            .clip(RoundedCornerShape(15.dp))
            .background(color)
            .fillMaxWidth()
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(15.dp)
        ) {
            Column(verticalArrangement = Arrangement.Center) {
                Text(
                    text = "Daily Thought",
                    color = TextWhite,
                    fontSize = 18.sp
                )
                Text(
                    text = "Meditation 3 - 10 mins",
                    color = TextWhite,
                    fontSize = 13.sp
                )
            }
            Icon(
                painter = painterResource(id = R.drawable.ic__play),
                contentDescription = "Play",
                tint = Color.White
            )
        }
    }
}

@ExperimentalFoundationApi
@Composable
fun FeatureSection(features: List<Feature>) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        item {
            Text(
                text = "Features",
                color = Color.White,
                style = MaterialTheme.typography.h6,
                modifier = Modifier.padding(15.dp)
            )
        }
        items(features.windowed(2, 2, true)) { list ->
            Row(Modifier.fillMaxWidth()) {
                list.forEach {
                    FeatureItem(feature = it)
                }
            }
        }
        /*LazyVerticalGrid(
            cells = GridCells.Fixed(2),
            contentPadding = PaddingValues(start = 5.dp, top = 5.dp, bottom = 5.dp),
            modifier = Modifier.fillMaxHeight()
        ) {
            items(features.size) {

            }
        }*/
    }
}

@Composable
fun FeatureItem(feature: Feature) {
    Box(
        modifier = Modifier
            .padding(15.dp)
            .fillMaxWidth(.3f)
            .clip(RoundedCornerShape(15.dp))
            .aspectRatio(1f)
            .background(color = feature.lightColor)
    ) {
        Text(
            text = feature.title,
            color = Color.White,
            style = MaterialTheme.typography.h6,
            lineHeight = 24.sp,
            modifier = Modifier.align(Alignment.TopStart)
        )
        Icon(
            painter = painterResource(id = feature.iconId),
            contentDescription = feature.title,
            tint = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
        )
        Text(
            text = "Start",
            color = TextWhite,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .clickable {

                }
                .align(
                    Alignment.BottomEnd
                )
                .clip(RoundedCornerShape(10.dp))
                .background(ButtonBlue)
                .padding(vertical = 6.dp, horizontal = 15.dp)
        )
    }
}

When I try to achieve it in jetpack compose. The list scrolls under it's own layout but doesn't expand making the whole scrolling. Horizontal one is fine but the vertical one tends to have a small height not making it the sameheight as the list itself.

Needed a view something like this so that the view can expand as well as scroll with the layout.

sure i have editted my question with the compose code. @Philip — Brishav Shakya, Aug 13 '21 at 12:00
Please, check if this answer helps you https://stackoverflow.com/questions/66908737/what-is-the-equivalent-of-nestedscrollview-recyclerview-or-nested-recyclerv/66913480#66913480 — nglauber, Aug 13 '21 at 17:20
Yes I did have checked this solution but this solution didnt solve the problem completely. I solved some what of the scrolling but the grid was not well matched as he was using Items with row and not lazyverticalgrid — Brishav Shakya, Aug 13 '21 at 17:24
you have to import this library `androidx.compose.foundation.lazy.items` in your code — Deepak Das, Oct 04 '21 at 04:56

score 2 · Answer 1 · answered Aug 13 '21 at 12:20

2

@Composable
fun NewsList() {
LazyColumn {
    items(rows) { item ->
        Text(
            modifier = Modifier
                .height(80.dp),
            text = item
        )
    }
}

something like this you can create fr lazycolum

for gride you can try this(Not sure for this) is it right or not

LazyVerticalGrid(
cells = GridCells.Fixed(cellState),
content = {
    
    }
   
}

)

answered Aug 13 '21 at 12:20

Dheeraj Gupta

405
1
4
12

lazyverticalgrid seems to create issue inside of lazycolumn as I cant use column tag as i will make my view static. I want my view's height to expand and scrollable with data increasing – Brishav Shakya Aug 13 '21 at 14:38

score 2 · Answer 2 · answered Oct 04 '21 at 04:12

Don't forget to import this library explicitly

 import androidx.compose.foundation.lazy.items
    @Composable
    fun Conversation(messages: List<Message>) {
        LazyColumn {
            items(messages) { message ->
                MessageCard(message)
            }
        }
    }

How can I use lazy column and lazyverticalgrid in jetpack compose?

2 Answers2