Material Design Buttons using Jetpack Compose in Android

16 Nov, 2021
Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. Compose is built to support material design principles. Many of its UI elements implement material design out of the box. In this article, we will explain how you can create Material design buttons using Jetpack Compose.  Below is the sample picture to show what we are going to build. 
Step 1: Create a new project
To create a new project in Android Studio using Jetpack Compose please refer to How to Create a New Project in Android Studio Canary Version with Jetpack Compose. 
Step 2: Working with MainActivity.kt
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.foundation.BorderStrokeimport androidx.compose.foundation.backgroundimport androidx.compose.foundation.clickableimport androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.layout.Rowimport androidx.compose.foundation.layout.paddingimport androidx.compose.foundation.shape.RoundedCornerShapeimport androidx.compose.material.*import androidx.compose.material.MaterialTheme.typographyimport androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.FavoriteBorderimport androidx.compose.runtime.Composableimport androidx.compose.ui.Modifierimport androidx.compose.ui.draw.clipimport androidx.compose.ui.graphics.Brushimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.tooling.preview.Previewimport androidx.compose.ui.unit.dpimport com.example.jetpackcomposepractice.ui.theme.JetpackComposePracticeTheme  class MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            JetpackComposePracticeTheme {                // A surface container using the 'background' color from the theme                Surface(color = Color.White) {                    Column {                        // call the function which contains all the buttons                        allButtons()                    }                }            }        }    }}// In order to use compose properties annotate with @Compose@Composablefun allButtons() {    Text(text = "Buttons", style = typography.h5, modifier = Modifier.padding(8.dp))    // Here we are using Row to add     // two buttons in single Column    // You can change it as per your need    Row {        // Create a Main Button or Normal Button        Button(onClick = {}, modifier = Modifier.padding(8.dp)) {            Text(text = "Main Button")        }        // Create a Text Button        TextButton(onClick = { /*TODO*/ }, modifier = Modifier.padding(8.dp)) {            Text(text = "Text Button")        }    }    Row {        // Elevated Button        Button(            onClick = { /*TODO*/ },            modifier = Modifier.padding(8.dp),            elevation = ButtonDefaults.elevation()        ) {            Text(text = "Elevated Button")        }          // Rounded Button        Button(            onClick = { /*TODO*/ },            modifier = Modifier.padding(8.dp),            shape = RoundedCornerShape(20.dp)        ) {            Text(text = "Rounded")        }      }    Row {        // Outlined Button        // add border field and set BorderStroke and its color        OutlinedButton(            onClick = { /*TODO*/ },            border = BorderStroke(1.dp, Color.Red),            modifier = Modifier.padding(8.dp)        ) {            Text(text = "Outlined")        }          // Outlined Button with icon        // add border field and set BorderStroke and its color        // add Icon field        OutlinedButton(            onClick = { /*TODO*/ },            border = BorderStroke(1.dp, Color.Red),            modifier = Modifier.padding(8.dp)        ) {            Icon(                imageVector = Icons.Default.FavoriteBorder,                contentDescription = null,                modifier = Modifier.padding(end = 4.dp)            )            Text(text = "Outlined Icon")        }      }      Row {        // Icon Button        // Icon on the left of text        Button(onClick = {}, modifier = Modifier.padding(8.dp)) {            Row {                Icon(                    imageVector = Icons.Default.FavoriteBorder,                    contentDescription = null,                    modifier = Modifier.padding(end = 4.dp)                )                Text(text = "Icon Button")            }        }          // Icon Button        // Icon on the Right of text        Button(onClick = {}, modifier = Modifier.padding(8.dp)) {            Text(text = "Icon Button")            Icon(                imageVector = Icons.Default.FavoriteBorder,                contentDescription = null,                modifier = Modifier.padding(start = 4.dp)            )        }    }      //custom background buttons    // create a variable mainButtonColor and define background Color and content Color    val mainButtonColor = ButtonDefaults.buttonColors(        backgroundColor = Color.Magenta,        contentColor = MaterialTheme.colors.surface    )      Row {        Button(colors = mainButtonColor, onClick = {}, modifier = Modifier.padding(8.dp)) {            Text(text = "Custom colors")        }    }      Row {        // Create variable horizontalGradient and inside color property define start and end color        val horizontalGradient = Brush.horizontalGradient(            colors = listOf(MaterialTheme.colors.primary, MaterialTheme.colors.primaryVariant),            0f,            250f        )        // Horizontal gradient Button        // Create a text and set its background to horizontalGradient that we created above        Text(            text = "Horizontal gradient",            style = typography.body2.copy(color = Color.White),            modifier = Modifier                .padding(12.dp)                .clickable(onClick = {})                .clip(RoundedCornerShape(4.dp))                .background(brush = horizontalGradient)                .padding(12.dp)        )          // Create variable verticalGradient and inside color property define top and bottom color        val verticalGradient = Brush.verticalGradient(            colors = listOf(MaterialTheme.colors.primary, MaterialTheme.colors.primaryVariant),            startY = 0f,            endY = 100f        )        // Vertical gradient Button        // Create a text and set its background to verticalGradient that we created above        Text(            text = "Vertical gradient",            style = typography.body1.copy(color = Color.White),            modifier = Modifier                .padding(12.dp)                .clickable(onClick = {})                .clip(RoundedCornerShape(4.dp))                .background(brush = verticalGradient)                .padding(12.dp)        )    }    }// To see the preview annotate with @Preview to the function@Preview@Composablefun DefaultPreview() {    JetpackComposePracticeTheme {        Column {            allButtons()        }    }}
Output:
sumitgumber28
Android-Jetpack
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference Between Implicit Intent and Explicit Intent in Android
Retrofit with Kotlin Coroutine in Android
Flutter - BoxShadow Widget
Bundle in Android with Example
Animation in Android with Example
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
Kotlin Setters and Getters
Bundle in Android with Example