CODEWITHSUNDEEP
androidandroid-jetpack-compose
D-I-S-C
D-I-S-C

Reputation: 109

Wrapping Jetpack Compose Row around dynamically-sized content?

I am trying to create a row of two buttons in Jetpack Compose, and I want each button to wrap its own content, which is the text "HELLO". I have achieved this by using the .defaultMinSize() modifier on each button. However, I am having trouble getting the row to wrap around its content, which is the two buttons. I have used the .wrapContentSize() modifier on the Row composable, but the height of the row is not adjusting to the height of the buttons as shown in the image.

Row(
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .wrapContentSize()
            .background(LightGrey)
    ) {
        Button(
            modifier = Modifier
                .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
            ,
            onClick = { /*TODO*/ },
            contentPadding = PaddingValues(0.dp)
        ) {
            Text(
                text = "HELLO",
            )
        }
        Button(
            modifier = Modifier
                .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
            ,
            onClick = { /*TODO*/ },
            contentPadding = PaddingValues(0.dp)
        ) {
            Text(
                text = "HELLO",
            )
        }
    }

enter image description here

Upvotes: 3

Views: 1463

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364441

It is due to accessibility. Material components that have a visual size that is lower than the minimum touch target size for accessibility (such as Button) will include extra space outside the component to ensure that they are accessible.

If you want to remove it you have to force LocalMinimumInteractiveComponentEnforcement to false

    Row(
        modifier = Modifier
            .background(Gray)
    ) {
        CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
            Button()
            Button()
        }
    }

enter image description here

Note: LocalMinimumInteractiveComponentEnforcement requires at least M2 1.4.0-alpha04 and M3 1.1.0-alpha04. Before you can use LocalMinimumTouchTargetEnforcement in the same way.

Upvotes: 3

Related Questions