How To Add A Jetpack Compose Button

Adding a Simple Button

Adding a simple button with just some text. Sometimes you just want a button. The Column composable is not required. I added it because I’m testing out several different buttons and I want them all lined up down the center of the screen. To add a button to your app use the Button composable the definition of this composable is in the androidx.compose.material3 package.

  Column(modifier = Modifier.fillMaxSize(),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally) {
           Button(onClick = {}){
               Text("First Test Button");
           }
    }

Changing the shape of a button

Don’t like the default shape of the button, lets change that. Using the Shape attribute. The link to the documentation on all the different methods that return a shape is here but its a lot so…you’ve been warned. The values are for top left, top right, bottom right and bottom left corners. The numbers passed into the AbsoluteCutCornerShape() method below make for a pretty ugly button but good for demo purposes.

        Button(onClick = {},
               modifier = Modifier.padding(horizontal = 24.dp, vertical = 24.dp),
               shape = AbsoluteCutCornerShape(1.dp, 3.dp, 6.dp, 9.dp)){
            Text("Third Test Button");
        }

Adding Padding to a Button

For this example need a few buttons to demonstrate. To add padding to a button or really any Composable you use the padding modifier. What is padding? its just the space around the button lets look at some cases to get a better understanding. In the case below none of the buttons have any padding as can be seen by the 0.dp added to the padding modifier for both horizontal and vertical.

@Composable
fun ButtonTest(modifier: Modifier = Modifier){

    val mod: Modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp);
    Column(modifier = Modifier
        .fillMaxSize()
        .clip(CircleShape),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally) {
           Button(onClick = {}, modifier = mod){
               Text("First Test Button");
           }
           Button(onClick = {}, modifier = mod){
            Text("Second Test Button");
           }
           Button(onClick = {},
               modifier = mod,
               shape = AbsoluteCutCornerShape(1.dp, 3.dp, 6.dp, 9.dp)){
            Text("Third Test Button");
        }
        ElevatedButton(onClick = { /*TODO*/ }, modifier = mod) {
            Text("Elevated Button")
        }
    }
}

The result of having no padding applied can be seen below.

However, lets add 24.dp of padding in the vertical plane. Note that for this horizontal padding is not really needed as there are no additional Composables next to the buttons on the horizontal plane its only being explicitly set for example purposes it could be omitted with out changing the final outcome.

@Composable
fun ButtonTest(modifier: Modifier = Modifier){

    val mod: Modifier = Modifier.padding(horizontal = 0.dp, vertical = 24.dp);
    Column(modifier = Modifier
        .fillMaxSize()
        .clip(CircleShape),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally) {
           Button(onClick = {}, modifier = mod){
               Text("First Test Button");
           }
           Button(onClick = {}, modifier = mod){
            Text("Second Test Button");
           }
           Button(onClick = {},
               modifier = mod,
               shape = AbsoluteCutCornerShape(1.dp, 3.dp, 6.dp, 9.dp)){
            Text("Third Test Button");
        }
        ElevatedButton(onClick = { /*TODO*/ }, modifier = mod) {
            Text("Elevated Button")
        }
    }
}

The result of the vertical padding change can be seen below.

Have a Button Launch a New Activity or Do Something

What good is a button if it does not do anything? Lets launch a new activity when a button is pressed. In order to do this we are going to make use of the onClick parameter. The onClick parameter accepts a lambda function that returns void and excepts no arguments. In Kotlin this is described using the following syntax.

() -> Unit

Adding logic to the onClick parameter is as easy as adding a lambda block. Example below. Explanation of how to get the context and launching a new activity is outside the scope of this article.

@Composable
fun LaunchActivityButton(modifier: Modifier = Modifier){
    val mContext = LocalContext.current;
    Column() {
        Button(modifier = modifier, onClick = {
            mContext.startActivity(Intent(mContext, TestActivity::class.java));
        }) {
            Text("Test Activity");
        }
    }
}

There are lots of other button Composables defined in Material design. This post only covers the Button one. In another post I will go over the other buttons and how to add them to your project.

Cheers!