jetpack compose - Button elevation

Compose Button Elevation

The Button is a primary component of an android application. Android application developers can’t imagine an application without a Button widget. In the jetpack compose library there are several types of Button widgets such as Button, TextButton, FloatingActionButton, OutlinedButton, IconButton, etc,

Android application developers used them in their app user interface for various requirements. Such as an IconButton shows an Icon inside it with a clickable functionality. TextButton displays a clickable simple Text object. By default, TextButton has no elevation. The Button widget has an elevation but we can change its elevation value.

This android application development tutorial will demonstrate to us how we can set or change a Button widget elevation in jetpack compose. In this example, we will set or change Button, TextButton, and OutlinedButton’s elevation size/value. We also change the TextButton’s different states elevations such as default elevation, pressed elevation, and disabled elevation.

To do that we put a Column widget inside our composable function and then place some Button widgets inside this vertical layout such as Button, TextButton, and OutlinedButton. The Button widget has an argument/parameter/property named ‘elevation’.

We have to pass a ‘ButtonDefaults.elevation’ object for this ‘elevation’ parameter. This ‘ButtonDefaults.elevation’ object overrides the default elevations used in a Button widget such as default elevation, pressed elevation, disabled elevation, hovered elevation, and focused elevation. We can set those elevations by putting values for those parameters. The following example code and screenshot will describe things more effectively.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            Modifier
                .background(Color(0xFFFFFFFF))
                .fillMaxSize()
                .padding(32.dp),
            verticalArrangement = Arrangement.spacedBy(24.dp)
        ) {
            Button(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(8.dp),
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 6.dp,
                    pressedElevation = 8.dp,
                    disabledElevation = 0.dp
                )
            ) {
                Text(
                    text = "Elevation 6 DP",
                    modifier = Modifier.padding(12.dp)
                )
            }

            Button(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(8.dp),
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 6.dp,
                    pressedElevation = 8.dp,
                    disabledElevation = 0.dp
                ),
                enabled = false
            ) {
                Text(
                    text = "Disabled Elevation 0 DP",
                    modifier = Modifier.padding(12.dp)
                )
            }

            TextButton(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(8.dp),
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 1.dp,
                    pressedElevation = 0.dp,
                    disabledElevation = 0.dp
                ),
                enabled = true
            ) {
                Text(
                    text = "Elevation 1 DP",
                    modifier = Modifier.padding(12.dp)
                )
            }

            OutlinedButton(
                onClick = {
                    // do something here
                },
                shape = CircleShape,
                elevation = ButtonDefaults.elevation(8.dp)

            ) {
                Text(
                    text = "Elevation 8 DP",
                    modifier = Modifier.padding(12.dp)
                )
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}