https://github.com/boltuix/compose-gradient-buttons
How to create Gradient Buttons in Jetpack Compose
https://github.com/boltuix/compose-gradient-buttons
android button customshape gradient jetpack-android jetpack-compose jetpackcompose material-design material3 shapes
Last synced: about 2 months ago
JSON representation
How to create Gradient Buttons in Jetpack Compose
- Host: GitHub
- URL: https://github.com/boltuix/compose-gradient-buttons
- Owner: BoltUIX
- License: apache-2.0
- Created: 2022-07-24T15:40:14.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-27T06:20:05.000Z (almost 4 years ago)
- Last Synced: 2025-05-31T02:13:05.609Z (about 1 year ago)
- Topics: android, button, customshape, gradient, jetpack-android, jetpack-compose, jetpackcompose, material-design, material3, shapes
- Language: Kotlin
- Homepage: https://www.boltuix.com/2022/07/gradient-button-shapes-in-jetpack.html
- Size: 211 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```kotlin
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,
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:
```kotlin
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](https://www.boltuix.com/2022/07/gradient-button-shapes-in-jetpack.html)
- [Handpicked Color Gradients](https://www.boltuix.com/2022/07/gradient-colors.html)
## 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.