Jetpack Compose Button

Sandeep Gupta
by Sandeep Gupta -
Jetpack Compose Button

Jetpack Compose Button

Welcome to codingbihar.com. We are here with a new topic Jetpack Compose Buttons. Today we will learn about buttons that are used in Android App. There are many types of button you have seen in Android App. When you use any online shopping app after selecting products you choose a payment option and then to pay amount you click on Pay button. To send email you press send button actually buttons in app specially used for perform an actions. Button is the basic components used in app that allow users to perform an action. There are many different types of buttons are used in Android Apps after customize its appearance but according to its default properties there are six types of buttons we use in Android Apps. 

List of six types of buttons with different appearance:

  1. Filled Button : This type of button has solid background with contrasting text.
  2. Filled Tonal Button : This button's background color varies to match the surface.
  3. Elevated Button : This type of button stands out by having a shadow that gives an elevated appearance.
  4. Outlined Button : This button has a border with no fill color.
  5. Text Button : This displays text with no background or border.
  6. Icon Button : This button contains an icon.

Some other types of buttons 

Filled Tonal Icon Toggle Button
Filled Tonal Icon Button
Outlined Icon Button
Filled Icon Toggle Button

Filled Button

Here is a simple filled button using Jetpack Compose

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp)) {
        Text(text = "Jetpack Compose Button", fontWeight = FontWeight.Bold, fontSize = 30.sp)
        Divider(
            Modifier.fillMaxWidth()
                .height(4.dp)
        )
    }
        Spacer(modifier = Modifier.height(30.dp))
    Column(Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        val context = LocalContext.current
        Button(onClick = {
            Toast.makeText(context,"Welcome to Basic of Jetpack Compose",Toast.LENGTH_LONG).show()
        }
        ){
            Text(text = "Filled Button")

        }
    }
}

OUTPUT:
Filled Button

Filled Tonal Button

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp)) {
        Text(text = "Jetpack Compose Button", fontWeight = FontWeight.Bold, fontSize = 30.sp)
        Divider(
            Modifier.fillMaxWidth()
                .height(4.dp)
        )
    }
        Spacer(modifier = Modifier.height(30.dp))
    Column(Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        val context = LocalContext.current
        FilledTonalButton(onClick = {
            Toast.makeText(context,"Welcome to Basic of Jetpack Compose",Toast.LENGTH_LONG).show()
        }
        ){
            Text(text = "Filled Button")

        }
    }
}

OUTPUT:

Filled Tonal Button


Elevated Button

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp)) {
        Text(text = "Jetpack Compose Button", fontWeight = FontWeight.Bold, fontSize = 30.sp)
        Divider(
            Modifier.fillMaxWidth()
                .height(4.dp)
        )
    }
        Spacer(modifier = Modifier.height(30.dp))
    Column(Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        val context = LocalContext.current
        ElevatedButton(onClick = {
            Toast.makeText(context,"Welcome to Basic of Jetpack Compose",Toast.LENGTH_LONG).show()
        }
        ){
            Text(text = "Elevated Button")

        }
    }
}

OUTPUT:

Elevated Button

Outlined Button:

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp)) {
        Text(text = "Jetpack Compose Button", fontWeight = FontWeight.Bold, fontSize = 30.sp)
        Divider(
            Modifier.fillMaxWidth()
                .height(4.dp)
        )
    }
        Spacer(modifier = Modifier.height(30.dp))
    Column(Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        val context = LocalContext.current
        OutlinedButton(onClick = {
            Toast.makeText(context,"Welcome to Basic of Jetpack Compose",Toast.LENGTH_LONG).show()
        }
        ){
            Text(text = "Outlined Button")

        }
    }
}

OUTPUT:

Outlined Button

Text Button:

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp)) {
        Text(text = "Jetpack Compose Button", fontWeight = FontWeight.Bold, fontSize = 30.sp)
        Divider(
            Modifier.fillMaxWidth()
                .height(4.dp)
        )
    }
        Spacer(modifier = Modifier.height(30.dp))
    Column(Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        val context = LocalContext.current
        TextButton(onClick = {
            Toast.makeText(context,"Welcome to Basic of Jetpack Compose",Toast.LENGTH_LONG).show()
        }
        ){
            Text(text = "Text Button")

        }
    }
}

OUTPUT:

Text Button

Icon Button:

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp)) {
        Text(text = "Jetpack Compose Button", fontWeight = FontWeight.Bold, fontSize = 30.sp)
        Divider(
            Modifier.fillMaxWidth()
                .height(4.dp)
        )
    }
        Spacer(modifier = Modifier.height(30.dp))
    Column(Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        val context = LocalContext.current
        IconButton(onClick = {
            Toast.makeText(context,"Welcome to Basic of Jetpack Compose",Toast.LENGTH_LONG).show()
        }
        ){
            Icon(imageVector = Icons.Default.Settings, contentDescription = null)

        }
    }
}

OUTPUT:

Icon Button

Customized Jetpack Compose Button 

To customize a button using jetpack compose we need modifiers and some parameters. In jetpack compose button is filled with a solid color by default.
  • enabled: false/true to enable or disable on click method.
  • shape: To change button defaults shape. eg. shape = RoundedCornerShape(10.dp) or shape = RectangleShape
  • colors: It is used to change the default background color of the buttons.
  • elevation: To create shadow effect below the button.
  • border: Used to make a border for the buttons in outlined button
  • contentPadding: For space between the container and the content

Code

Copy this code → 

@Composable
fun ComposeButton(modifier: PaddingValues) {
    Column(Modifier.padding(top = 60.dp, start = 80.dp)) {         
 Text(text = "Customized Button", fontSize = 34.sp)
        Divider(
            Modifier
                .fillMaxWidth()
                .height(4.dp))
        Spacer(modifier = Modifier.height(40.dp))


Row (verticalAlignment = Alignment.CenterVertically){
    Button(onClick = {  }, shape = RectangleShape) {
        Text("Filled Button")
    }
    Spacer(modifier = Modifier.width(20.dp))
    Text(text = "Customized Button with rectangular shape")

}
        Row (verticalAlignment = Alignment.CenterVertically){
            Button(onClick = {  }, shape = RoundedCornerShape(10.dp)) {
                Text("Filled Button")
            }
            Spacer(modifier = Modifier.width(20.dp))
            Text(text = "Customized Button with rounded corner shape")

        }

        Row (verticalAlignment = Alignment.CenterVertically){
            Button(
                onClick = { },
                shape = RoundedCornerShape(topStart = 20.dp, bottomEnd = 20.dp),
                colors = ButtonDefaults.buttonColors(Color.Yellow),
                elevation = ButtonDefaults.buttonElevation(6.dp)

            ) {
                Text("Filled Button", color = Color.Black)
            }
            Spacer(modifier = Modifier.width(20.dp))
            Text(text = "Customized Button with rounded corner shape, button color,\n elevation and text color")

        }

    }
}

OUTPUT:

Customized Jetpack Compose Button

Buttons are essential interactive elements in any application. With Jetpack Compose, creating and customizing buttons is simple and intuitive. You can easily change their appearance and behavior to fit your app's design requirements.

In this lecture, we covered the basics of button creation, customization, handling clicks, and advanced button features like icons and disabled states. Experiment with these concepts to create engaging and responsive buttons for your apps.

Next, we’ll explore more UI components in Jetpack Compose, continuing to build a solid foundation for modern Android development. Stay tuned!

Topicss
Previous Post Next Post

Contact Form