Compose-Gradient-Buttons

How to create Gradient Buttons with various shapes and styles in Jetpack Compose.

Preview

Features

• Gradient Button Styles:
  • Top Start
  • Top End
  • Bottom Start
  • Bottom End
  • Top Start & Bottom End
  • Top End & Bottom Start
  • All Sides
  • Disabled Button
  • No Ripple Effect
• Built with Jetpack Compose for modern Android UI
• Customizable corner radius and gradient colors

Implementation

Create a Kotlin file named GradientButton.kt and add the following code to implement the gradient buttons:

importandroidx.compose.foundation.backgroundimportandroidx.compose.foundation.clickableimportandroidx.compose.foundation.interaction.MutableInteractionSourceimportandroidx.compose.foundation.layout.Boximportandroidx.compose.foundation.layout.fillMaxWidthimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.ButtonDefaultsimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.rememberimportandroidx.compose.ui.Alignmentimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.graphics.Brushimportandroidx.compose.ui.graphics.Colorimportandroidx.compose.ui.unit.Dpimportandroidx.compose.ui.unit.dpimportandroidx.compose.ui.unit.spimportandroidx.compose.ui.graphics.RectangleShapeimportandroidx.compose.ui.graphics.Shapeimportandroidx.compose.foundation.shape.RoundedCornerShape
@Composable
funGradientButton(
gradientColors:List<Color>,
cornerRadius:Dp,
nameButton:String,
roundedCornerShape:Shape,
isEnabled:Boolean = true,
hasRipple:Boolean = true
) {
Button(
modifier =Modifier
.fillMaxWidth()
.padding(start =32.dp, end =32.dp),
onClick = { /* Your click action */ },
contentPadding =PaddingValues(),
colors =ButtonDefaults.buttonColors(
containerColor =Color.Transparent,
disabledContainerColor =Color.Gray
),
shape = roundedCornerShape,
enabled = isEnabled,
interactionSource =if (!hasRipple) remember { MutableInteractionSource() } elsenull
) {
Box(
modifier =Modifier
.fillMaxWidth()
.background(
brush =Brush.linearGradient(colors = gradientColors),
shape = roundedCornerShape
)
.padding(horizontal =16.dp, vertical =8.dp),
contentAlignment =Alignment.Center
) {
Text(
text = nameButton,
fontSize =20.sp,
color =Color.White
)
}
}
}

Usage

To use the gradient buttons in your project, call the GradientButton composable with different configurations:

val cornerRadius =16.dp
val gradientColors =listOf(Color(0xFFff00cc), Color(0xFF333399))
// Top StartGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: Top Start",
roundedCornerShape =RoundedCornerShape(topStart =30.dp)
)
// Top EndGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: Top End",
roundedCornerShape =RoundedCornerShape(topEnd =30.dp)
)
// Bottom StartGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: Bottom Start",
roundedCornerShape =RoundedCornerShape(bottomStart =30.dp)
)
// Bottom EndGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: Bottom End",
roundedCornerShape =RoundedCornerShape(bottomEnd =30.dp)
)
// Top Start & Bottom EndGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: Top Start & Bottom End",
roundedCornerShape =RoundedCornerShape(topStart =30.dp, bottomEnd =30.dp)
)
// Top End & Bottom StartGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: Top End & Bottom Start",
roundedCornerShape =RoundedCornerShape(topEnd =30.dp, bottomStart =30.dp)
)
// All SidesGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Style: All Sides",
roundedCornerShape =RoundedCornerShape(cornerRadius)
)
// Disabled ButtonGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="Disabled Button",
roundedCornerShape =RoundedCornerShape(cornerRadius),
isEnabled =false
)
// No Ripple EffectGradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
nameButton ="No Ripple",
roundedCornerShape =RoundedCornerShape(cornerRadius),
hasRipple =false
)

Resources

• BoltUiX Gradient Button Tutorial
• Handpicked Color Gradients

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is licensed under the MIT License.