Gradient Button | Shapes in Jetpack compose

In this Jetpack compose tutorial, we will see how to create Gradient Buttons using Jetpack Compose. Jetpack Compose is a cutting-edge toolkit for creating native Android user interfaces.

It simplifies and accelerates UI development on Android by using minimal code, powerful tools, and explicit Kotlin APIs. Compose supports material design ideas. Many of its UI elements are built with material design in mind right out of the box.

A handpicked collection of beautiful color gradients for web and app designers. 

https://www.boltuix.com/2022/07/gradient-colors.html

In our main activity: 

• GradientButton(..) is our common gradient custom function 
• gradientColor : you change gradient color.
• RoundedCornerShape(topStart = 30.dp) you can change the button shapes 

 val cornerRadius = 16.dp
                        val gradientColor = listOf(Color(0xFFff00cc), Color(0xFF333399))
                        GradientButton(
                            gradientColors = gradientColor,
                            cornerRadius = cornerRadius,
                            nameButton = "Style: top Start",
                            roundedCornerShape = RoundedCornerShape(topStart = 30.dp)
                        )

..

To create Gradient Buttons in Jetpack Compose (custom gradient button)

@Composable
private fun GradientButton(
    gradientColors: List<Color>,
    cornerRadius: Dp,
    nameButton: String,
    roundedCornerShape: RoundedCornerShape
) {

    Button(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 32.dp, end = 32.dp),
        onClick = {
                  //your code
        },

        contentPadding = PaddingValues(),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Transparent
        ),
        shape = RoundedCornerShape(cornerRadius)
    ) {

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(
                    brush = Brush.horizontalGradient(colors = gradientColors),
                    shape = roundedCornerShape
                )
                .clip(roundedCornerShape)
                /*.background(
                    brush = Brush.linearGradient(colors = gradientColors),
                    shape = RoundedCornerShape(cornerRadius)
                )*/
                .padding(horizontal = 16.dp, vertical = 8.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = nameButton,
                fontSize = 20.sp,
                color = Color.White
            )
        }
    }
}

..

Complete Source Code of GradientButton Jetpack Compose:

* Gradient Button Style: top Start

* Gradient Button Style: top End

* Gradient Button Style: Bottom Start

* Gradient Button Style: Bottom End

* Gradient Button Style: Top Start & Bottom End

* Gradient Button Style: Top End & Bottom Start

* Gradient Button Style: All side

* Gradient Button Disable

* Gradient Button No Ripple