CODEWITHSUNDEEP
androidandroid-jetpackandroid-jetpack-composelazycolumn
Shijilal
Shijilal

Reputation: 2169

Arrange a single item inside a LazyColumn by using weight modifier

I am looking to have a result like this. Two block with 2/3 size and 1/3 size respectively.

enter image description here

I am getting the expected result with this code.

@Preview(showBackground = true)
@Composable
fun LayoutCheck() {

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(3f),
        color = MaterialTheme.colors.primary
    ) {}
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(1f),
        color = MaterialTheme.colors.secondary
    ) {}
    }
}

But when i put that inside a lazycolumn, nothing seems working. Not even getting a display.

@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(20.dp)
    ) {
        item {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Surface(
                    modifier = Modifier
                        .width(200.dp)
                        .weight(3f),
                    color = MaterialTheme.colors.primary
                ) {}
                Surface(
                    modifier = Modifier
                        .width(200.dp)
                        .weight(1f),
                    color = MaterialTheme.colors.secondary
                ) {}
                }

            }
        }
    }
}

If i remove t he weight and put some height,it works. But i don't want to hardcode there. So how to make it work with weight. Expecting some help..

Thanks

NB: I want scroll functionality, that's why going with LazyColumn

Real World scenario : A Login Screen, with Logo at the first 2/3 portion and a Text and Button at the bottom 1/3 portion

Scenario 1 : Working Perfectly:

enter image description here

Scenario 2: If users font is bigger or screen is rotated, they wont be able to see the button

enter image description here

Upvotes: 2

Views: 2667

Answers (2)

Phil Dukhov
Phil Dukhov

Reputation: 87605

You prevent the text from being resized by applying the weight modifier. Instead, I suggest that you make the element spacing flexible, like this:

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Spacer(Modifier.weight(1f))
    Image(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = "",
    )
    Spacer(Modifier.weight(1.35f))
    Text(
        "Your app is being reviewed",
    )
    Spacer(Modifier.weight(0.2f))
    Button(onClick = { /*TODO*/ }) {
        Text("Log out")
    }
    Spacer(Modifier.weight(0.2f))
}

Spacers explanation:

Upvotes: 2

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363469

Since you have only one item just use a Column with a verticalScroll:

val scrollState = rememberScrollState()
Column(
    modifier = Modifier
        .verticalScroll(scrollState),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    //...
}

Also if you want 2/3 and 1/3, use in the 1st Surface the weight(2f) modififer.

Upvotes: 3

Related Questions