Android Jetpack Compose Button Style | Different Corner Sizes

This is a button style made with Android Jetpack Compose. I came up with this design by setting different corner sizes to a rounded shape button.

There are a total of 3 buttons. The first one displays the number of taps on it. It has a ripple effect. The second one asks you to tap on it. When you do, it gets disabled. The third one accepts the on click event without a ripple effect. I removed it by using the MutableInteractionSource API.

The Jetpack Compose button style is made by setting the different corner sizes to the rounded Box layout. Thanks to RoundedCornerShape API. It allows us to put the corner sizes on all four corners.

I’m using the Box layout because we cannot set the gradient border with pure Button composable. Using the Box, we can create any kind of custom Button.

You need to download the latest version of Android Studio to use the code. The Jetpack Compose doesn’t work in the older versions.

Final output:

If the video isn’t working, watch it on the YouTube.

Helpful links to understand the code:

Here are the Gradle files used in the project.

Here is the Source Code:

MainActivity.kt:

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/*
You can use the following code for commercial purposes with some restrictions.
Read the full license here: https://semicolonspace.com/semicolonspace-license/
For more designs with source code, visit:
https://semicolonspace.com/jetpack-compose-samples/
 */
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                ButtonStyle()
            }
        }
    }
}

@Composable
fun ButtonStyle() {
    Column(
        modifier = Modifier.fillMaxSize(),
        // Gap between children = 32.dp
        verticalArrangement = Arrangement.spacedBy(32.dp, alignment = Alignment.CenterVertically),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        val gradientColors = listOf(Color(0xFF7b4397), Color(0xFFdc2430))
        val roundCornerShape = RoundedCornerShape(topEnd = 30.dp, bottomStart = 30.dp)

        ButtonCount(
            gradientColors = gradientColors,
            roundedCornerShape = roundCornerShape
        )

        ButtonDisable(
            gradientColors = gradientColors,
            roundedCornerShape = roundCornerShape
        )

        ButtonNoRipple(
            gradientColors = gradientColors,
            roundedCornerShape = roundCornerShape
        )
    }
}

@Composable
fun ButtonCount(
    gradientColors: List<Color>,
    roundedCornerShape: RoundedCornerShape
) {

    var clickCount by remember {
        mutableStateOf(0)
    }

    Box(
        modifier = Modifier
            .background(
                brush = Brush.horizontalGradient(colors = gradientColors),
                shape = roundedCornerShape
            )
            .clip(roundedCornerShape)
            .clickable {
                clickCount++
            }
            .padding(PaddingValues(horizontal = 60.dp, vertical = 16.dp)),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Click $clickCount",
            fontSize = 26.sp,
            color = Color.White,
            fontWeight = FontWeight.Bold
        )
    }
}

@Composable
fun ButtonDisable(
    gradientColors: List<Color>,
    roundedCornerShape: RoundedCornerShape,
    disabledColors: List<Color> = listOf(
        Color.Gray.copy(alpha = 0.2f),
        Color.Gray.copy(alpha = 0.2f)
    )
) {

    var enabled by remember {
        mutableStateOf(true)
    }

    Box(
        modifier = Modifier
            .background(
                brush = Brush.horizontalGradient(colors = if (enabled) gradientColors else disabledColors),
                shape = roundedCornerShape
            )
            .clip(roundedCornerShape)
            .clickable(enabled = enabled) {
                enabled = false
            }
            .padding(PaddingValues(horizontal = 40.dp, vertical = 16.dp)),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = if (enabled) "Disable Me!" else "I'm Disabled!",
            fontSize = 26.sp,
            color = if (enabled) Color.White else Color.Black.copy(alpha = 0.4f),
            fontWeight = FontWeight.Bold
        )
    }
}

@Composable
fun ButtonNoRipple(
    gradientColors: List<Color>,
    roundedCornerShape: RoundedCornerShape,
    context: Context = LocalContext.current.applicationContext
) {

    // To disable ripple effect
    val interactionSource = MutableInteractionSource()

    Box(
        modifier = Modifier
            .background(
                brush = Brush.horizontalGradient(colors = gradientColors),
                shape = roundedCornerShape
            )
            .clip(roundedCornerShape)
            .clickable(indication = null, interactionSource = interactionSource) {
                Toast
                    .makeText(context, "No Ripple", Toast.LENGTH_SHORT)
                    .show()
            }
            .padding(PaddingValues(horizontal = 46.dp, vertical = 16.dp)),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "No Ripple",
            fontSize = 26.sp,
            color = Color.White,
            fontWeight = FontWeight.Bold
        )
    }
}

Related Jetpack Compose Designs:

Leave a Comment Cancel reply