Button content padding – Android Jetpack Compose

Button content padding in Android Jetpack Compose

To set padding around the content in Button, in Android Jetpack Compose, you can pass required PaddingValues for the contentPadding parameter of the Button composable.

You can give a specific padding value along all the edges as shown in the following.

Button(
    onClick = { },
    contentPadding = PaddingValues(25.dp)
) {
    Text(text = "Click Me")
}

You can also specify a different padding value for the edges along horizontal axis (left and right edges) and vertical axis (top and bottom edges) as shown in the following.

Button(
    onClick = { },
    contentPadding = PaddingValues(vertical = 20.dp, horizontal = 40.dp)
) {
    Text(text = "Click Me")
}

Example Android application with Content padding for Button

Let us display a Button in the Android UI, using Button composable. We shall set a specific PaddingValues for content in the Button.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 20.dp),
                    horizontalAlignment = Alignment.CenterHorizontally) {
                    Button(
                        onClick = { },
                        contentPadding = PaddingValues(25.dp)
                    ) {
                        Text(text = "Click Me")
                    }
                }
            }
        }
    }
}

Screenshot