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:

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.foundation.shape.RoundedCornerShape

@Composable
fun GradientButton(
    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() } else null
    ) {
        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 Start
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: Top Start",
    roundedCornerShape = RoundedCornerShape(topStart = 30.dp)
)

// Top End
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: Top End",
    roundedCornerShape = RoundedCornerShape(topEnd = 30.dp)
)

// Bottom Start
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: Bottom Start",
    roundedCornerShape = RoundedCornerShape(bottomStart = 30.dp)
)

// Bottom End
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: Bottom End",
    roundedCornerShape = RoundedCornerShape(bottomEnd = 30.dp)
)

// Top Start & Bottom End
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: Top Start & Bottom End",
    roundedCornerShape = RoundedCornerShape(topStart = 30.dp, bottomEnd = 30.dp)
)

// Top End & Bottom Start
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: Top End & Bottom Start",
    roundedCornerShape = RoundedCornerShape(topEnd = 30.dp, bottomStart = 30.dp)
)

// All Sides
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Style: All Sides",
    roundedCornerShape = RoundedCornerShape(cornerRadius)
)

// Disabled Button
GradientButton(
    gradientColors = gradientColors,
    cornerRadius = cornerRadius,
    nameButton = "Disabled Button",
    roundedCornerShape = RoundedCornerShape(cornerRadius),
    isEnabled = false
)

// No Ripple Effect
GradientButton(
    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.