How to create rounded border Button using Jetpack Compose

ONLINECAST

2 min read

·

06-10-2024

12

0

Share

Round It Out: Creating Rounded Button in Jetpack Compose

Jetpack Compose simplifies Android UI development, but sometimes you need to tweak those basic elements to achieve a unique design. One common request is creating rounded buttons for a softer, more modern look. This article will guide you through the process of creating rounded buttons in Jetpack Compose, with clear explanations and illustrative code.

The Problem: Square Buttons Aren't Always Cutting It

Let's say you're building a beautiful app with a sleek, modern design. Standard buttons in Jetpack Compose have sharp corners, which can clash with your visual aesthetic. You need a way to create buttons with rounded edges for a smoother, more engaging user experience.

The Solution: Shaping Your Buttons with shape

Compose provides a powerful shape modifier that allows us to control the visual appearance of our buttons. We'll use this modifier to change the standard rectangular shape into a rounded one.

Here's a basic button example in Jetpack Compose:

@Composable
fun RoundedButton(text: String) {
    Button(onClick = { /* Your button click action here */ }) {
        Text(text = text)
    }
}

Now, let's add the magic of shape to achieve rounded corners:

@Composable
fun RoundedButton(text: String) {
    Button(
        onClick = { /* Your button click action here */ },
        shape = RoundedCornerShape(16.dp) // Change the value for desired radius
    ) {
        Text(text = text)
    }
}

In this modified code:

• RoundedCornerShape(16.dp) is the key ingredient. It creates a rounded shape with a radius of 16dp (density-independent pixels). Adjust this value to fine-tune the roundness of your button.

Going Beyond Basic Rounding: Exploring Shape Options

Compose offers various built-in shapes for greater control over your button's appearance:

• CircleShape: Creates a perfectly circular button.
• RoundedCornerShape(radius: CornerRadius): Allows you to define different radii for each corner using CornerRadius.
• RectangleShape: The default, rectangular shape of buttons.
• CutCornerShape: Creates a shape with a specific corner cut out.
• RoundedRectangleShape: Creates a rounded rectangle shape.

You can even create custom shapes using the Shape interface for unique button designs.

Beyond Appearance: Ensuring Accessibility

While rounded buttons are visually appealing, accessibility is crucial. Ensure your design doesn't compromise accessibility by considering:

• Contrast: Maintain sufficient contrast between your button text and its background, even with a rounded shape, for users with visual impairments.
• Focus State: Make sure the button's focused state is clear, perhaps by using a contrasting border or an outline, so users with screen readers can easily identify which button is active.

Additional Tips

• Experiment with different corner radii: Play around with various values for RoundedCornerShape to find the perfect rounded look for your button.
• Use themes: You can define a theme to set default button shapes for consistent styling across your app.

By following these guidelines and exploring the possibilities of Jetpack Compose's shape modifier, you can create visually captivating and accessible buttons that elevate your Android app's design.