CODEWITHSUNDEEP
android-layoutandroid-jetpack-compose
thewolf
thewolf

Reputation: 582

Inner padding in jetpack compose

Jetpack compose has a padding modifier that is actually analogous to the margin attribute in other UI toolkits (it adds space around the target). Is there a way to add inner padding to a component in compose without wrapping it with a Box/Surface?

Upvotes: 25

Views: 26482

Answers (2)

Rufai DEMIR
Rufai DEMIR

Reputation: 135

if you want to padding inside you can set padding to child element

        Row(
        modifier= Modifier
              .fillMaxWidth()
              .border(
                0.dp,
                shape = MaterialTheme.shapes.medium,
                color=Color.White
            )
            .clip(shape = MaterialTheme.shapes.medium)
            .clickable {
                setShowColorPicker(!showColorPicker)
            },
        verticalAlignment = Alignment.CenterVertically
        ) {

        Icon(
            painter = 
            painterResource(id=R.drawable.round_square_24),
            contentDescription = "Color",
            modifier = Modifier.size(24.dp),
            tint = hexToComposeColor(colorHex)
        )

        Text(text = colorHex, color = hexToComposeColor(colorHex),
            modifier = Modifier.padding(vertical = 16.dp),)

Upvotes: 1

Thracian
Thracian

Reputation: 66869

Modifier.padding() in Jetpack Compose acts as padding or margin depending on order.

Modifier.padding(10.dp).size(200.dp) adds space before setting size you have a Composable with 200.dp size

Modifier.size(200.dp).padding(10.dp) adds padding which you have 180.dp width and height after setting 10.dp padding on each side.

You can try this with Modifier.background, Modifier.border, Modifier.clickble{} to see how order changes area with color, border or which user can click.

You can also refer codelab's documentation about Modifiers to see how to apply padding.

Upvotes: 46

Related Questions