How to Implement OutlinedButton in Jetpack Compose?

In this article, we’ll learn how to implement OutlinedButton in Jetpack Compose.

Prerequisites:

Row, Column, and Box Layouts

This article talks about Material 2 Outlined Button. If you want the latest Material 3 version, follow this link.

For this article, create an empty Jetpack Compose project and open MainActivity. Create a composable called MyUI() and call it from the onCreate() method.

// add the following imports
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {

}

We will write our code in the MyUI().

Jetpack Compose provides OutlinedButton API:

@Composable
@NonRestartableComposable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = ButtonDefaults.outlinedBorder,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

onClick – A lambda that is called when the user taps on the button.

modifier – The modifier for changing the button layout.

enabled – If the button is enabled or not. If false, the button will not be clickable.

interactionSource – It is used to observe and customize the interactions. For example, we can disable the ripple effect.

elevation – The shadow below the button. An outlined button typically has no elevation.

shape – The shape of the button.

border – The border around the button.

colors – Button background color.

contentPadding – The space between the button’s container and the content.

content – The content of the button, typically a Text() composable. This is a row scope. So, if you add multiple items, they are placed horizontally.

Let us understand the parameters with use cases.

Simple OutlinedButton Example:

For a simple outlined button, onClick is mandatory.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    OutlinedButton(
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
        }
    ) {
        Text(text = "Click Me")
    }
}

Output:

Jetpack Compose Simple OutlinedButton Example

OutlinedButton Size:

We can change the button size using size modifiers like size(), height(), etc.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    OutlinedButton(
        modifier = Modifier.size(width = 160.dp, height = 48.dp),
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
        }
    ) {
        Text(text = "Click Me")
    }
}

Output:

OutlinedButton Colors:

It is easy to change outlined button colors.

Background Color:

We can change the background color using the ButtonDefaults.outlinedButtonColors() method.

@Composable
fun outlinedButtonColors(
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = MaterialTheme.colors.primary,
    disabledContentColor: Color = MaterialTheme.colors.onSurface
        .copy(alpha = ContentAlpha.disabled)
)

Example:

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    OutlinedButton(
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
        },
        colors = ButtonDefaults.outlinedButtonColors(
            backgroundColor = Color.Green
        )
    ) {
        Text(text = "Click Me")
    }
}

Output:

Border Color:

Use the border parameter to change the border color.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    OutlinedButton(
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
        },
        border = BorderStroke(
            width = 1.dp,
            color = Color.Red
        )
    ) {
        Text(text = "Click Me")
    }
}

Output:

OutlinedButton Text Size and Color:

The Text() composable provides various parameters (like fontSize and color) to customize the text.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    OutlinedButton(
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
        }
    ) {
        Text(
            text = "Click Me",
            fontSize = 20.sp,
            color = Color.Green
        )
    }
}

Output:

OutlinedButton Shape:

Jetpack Compose provides various shape APIs. We can set the shape using the shape parameter.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    OutlinedButton(
        onClick = {
            Toast.makeText(contextForToast, "Click", Toast.LENGTH_SHORT).show()
        },
        shape = RoundedCornerShape(percent = 25),
        border = BorderStroke(width = 2.dp, color = Color.Red)
    ) {
        Text(
            text = "Click Me",
            fontSize = 20.sp,
            color = Color.Green
        )
    }
}

Output:

This is all about OutlinedButton in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Related Articles:

References:

Simple OutlinedButton Example:

OutlinedButton Size:

OutlinedButton Colors:

Background Color:

Border Color:

OutlinedButton Text Size and Color:

OutlinedButton Shape:

Leave a Comment Cancel reply