Android Compose – Button Elevation

Android Compose – Button Elevation

In this tutorial, we will learn how to set the elevation for a Button in Android Compose.

To set elevation for Button in Android Jetpack Compose, set elevation parameter with the required ButtonElevation object.

Button(
    elevation = ButtonDefaults.elevation(
        defaultElevation = 20.dp,
        pressedElevation = 5.dp,
        disabledElevation = 0.dp,
    ),
    onClick = {},
) {
    Text("Submit")
}

We can set the default elevation of button, elevation when the button is pressed, elevation when the button is disabled, etc.

Example

In this example, we have UI with a Button. We set the elevation of this Button with a default value of 20.dp, pressed elevation of 5.dp, and disabled elevation of 0.dp.

Create a Project in Android Studio with empty compose activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.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(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .padding(20.dp)
                        .fillMaxWidth()) {
                    Button(
                        elevation = ButtonDefaults.elevation(
                            defaultElevation = 20.dp,
                            pressedElevation = 5.dp,
                            disabledElevation = 0.dp,
                        ),
                        onClick = {},
                    ) {
                        Text("Submit")
                    }
                }
            }
        }
    }
}

Screenshot

When you press on the Button, the elevation will change to 5.dp, because we have given that specific elevation for pressedElevation.

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to set the elevation for a Button.