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.

Create visually appealing Gradient Buttons in Jetpack Compose to enhance Android user interfaces with customizable shapes and styles. Source on GitHub

Explore Gradient Button Features

Learn to implement customizable Gradient Buttons with various shapes, gradient directions, and interaction options for modern Android UI.

Step-by-Step Implementation

Follow these steps to create a Gradient Button in your Jetpack Compose project:

1. Define the Composable: Create the GradientButton composable with parameters for gradient colors, corner radius, button text, shape, and interaction options.
2. Style the Button: Use a Button with a transparent background and custom shape for the container.
3. Apply Gradient: Add a gradient background to a Box layout using Brush.linearGradient.
4. Add Content: Include centered text within the Box for the button label.
5. Handle Interactions: Configure enable/disable states and ripple effect using MutableInteractionSource.
6. Customize Usage: Call the composable with different configurations for various styles and shapes.

Step 1: Define the GradientButton Composable

Start by defining the composable with parameters for gradient colors, corner radius, button text, shape, and interaction options.

@Composable
fun GradientButton(
    gradientColors: List, // List of colors for the gradient
    cornerRadius: Dp, // Corner radius for the button
    nameButton: String, // Text displayed on the button
    roundedCornerShape: Shape, // Custom shape for specific corners
    isEnabled: Boolean = true, // Enable or disable the button
    hasRipple: Boolean = true // Toggle ripple effect on click
) {
    // Button implementation will be built in subsequent steps
}
  

Step 2: Style the Button Container

Use a Button composable with a transparent background and custom shape to house the gradient.

Button(
    modifier = Modifier
        .fillMaxWidth() // Full width with padding
        .padding(start = 32.dp, end = 32.dp), // Horizontal padding
    onClick = { /* Your click action */ }, // Click handler
    contentPadding = PaddingValues(), // Remove default padding
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Transparent, // Transparent to show gradient
        disabledContainerColor = Color.Gray // Gray when disabled
    ),
    shape = roundedCornerShape, // Apply custom shape
    enabled = isEnabled, // Enable or disable button
    interactionSource = if (!hasRipple) remember { MutableInteractionSource() } else null // Toggle ripple
) {
    // Content will be added in the next step
}
  

Step 3: Apply Gradient Background

Add a Box with a gradient background using Brush.linearGradient to create the visual effect.

Box(
    modifier = Modifier
        .fillMaxWidth() // Fill button width
        .background(
            brush = Brush.linearGradient(colors = gradientColors), // Apply gradient
            shape = roundedCornerShape // Match button shape
        )
        .padding(horizontal = 16.dp, vertical = 8.dp), // Inner padding
    contentAlignment = Alignment.Center // Center content
) {
    // Text will be added in the next step
}
  

Step 4: Add Button Text

Include centered text within the Box to display the button label.

Text(
    text = nameButton, // Button label
    fontSize = 20.sp, // Text size
    color = Color.White // White text for contrast
)
  

Step 5: Handle Interactions

Configure enable/disable states and toggle the ripple effect using MutableInteractionSource.

enabled = isEnabled, // Enable or disable based on isEnabled parameter
interactionSource = if (!hasRipple) remember { MutableInteractionSource() } else null // Disable ripple if hasRipple is false
  

Step 6: Customize Usage

Call the GradientButton composable with different configurations to create various styles and shapes.

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
)
  

Full Source Code

Below is the complete implementation of the Gradient Button for Jetpack Compose projects.

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

// Step 1: Define the GradientButton composable with customizable parameters
@Composable
fun GradientButton(
    gradientColors: List, // List of colors for the gradient
    cornerRadius: Dp, // Corner radius for the button
    nameButton: String, // Text displayed on the button
    roundedCornerShape: Shape, // Custom shape for specific corners
    isEnabled: Boolean = true, // Enable or disable the button
    hasRipple: Boolean = true // Toggle ripple effect on click
) {
    // Step 2: Create Button with transparent background and custom shape
    Button(
        modifier = Modifier
            .fillMaxWidth() // Full width with padding
            .padding(start = 32.dp, end = 32.dp), // Horizontal padding
        onClick = { /* Your click action */ }, // Click handler
        contentPadding = PaddingValues(), // Remove default padding
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Transparent, // Transparent to show gradient
            disabledContainerColor = Color.Gray // Gray when disabled
        ),
        shape = roundedCornerShape, // Apply custom shape
        enabled = isEnabled, // Enable or disable button
        interactionSource = if (!hasRipple) remember { MutableInteractionSource() } else null // Toggle ripple
    ) {
        // Step 3: Add Box with gradient background
        Box(
            modifier = Modifier
                .fillMaxWidth() // Fill button width
                .background(
                    brush = Brush.linearGradient(colors = gradientColors), // Apply gradient
                    shape = roundedCornerShape // Match button shape
                )
                .padding(horizontal = 16.dp, vertical = 8.dp), // Inner padding
            contentAlignment = Alignment.Center // Center content
        ) {
            // Step 4: Add button text
            Text(
                text = nameButton, // Button label
                fontSize = 20.sp, // Text size
                color = Color.White // White text for contrast
            )
        }
    }
}
  

Use the Gradient Button to enhance Android user interfaces with dynamic, customizable buttons in Jetpack Compose projects.

Examples:

• Navigate to a new screen in an Android app
• Submit a form in a mobile application
• Trigger an action like adding an item to a cart

---

..