|

How to Add Elevated Button in Android Jetpack Compose

Elevated buttons are a part of Material 3 design and are used to indicate that the button will initiate a primary action. They are characterized by their use of shadows to create a sense of depth and dimension.

In this Android tutorial, let’s learn how to add an Elevated Button in Jetpack Compose.

The ElevatedButton is a composable that helps us to create distinct material 3 elevated buttons. See the following code snippet.

ElevatedButton(onClick = { /*TODO*/ },
        elevation = ButtonDefaults.buttonElevation(8.dp)) {
            Text("Elevated Button")
        }

You will get the following output.

jetpack compose elevated button

Following is the complete code.

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
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 {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ButtonExample()
                }
            }
        }
    }
}

@Composable
fun ButtonExample() {
    Column(modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        ElevatedButton(onClick = { /*TODO*/ },
        elevation = ButtonDefaults.buttonElevation(8.dp)) {
            Text("Elevated Button")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        ButtonExample()
    }
}

In order to avoid shadow creep, it is best to only use elevated buttons when they are necessary, for example when the button needs to be visually differentiated from a background with a pattern.

Similar Posts