This is a gradient button made with Android Jetpack Compose. There are a total of 3 buttons. I have added onClick event on all of them. They have styles like rounded corners, padding, alignment, gradient background, etc… You can download the source code for free.
The Android gradient button accepts cornerRadius, context, and colors as parameters. The colors are the actual list of gradient colors.
The first button displays the number taps on it. It uses clickCount variable to remember the number of taps.
The second button gets disabled when you tap on it. It shows “Disable Me” before and “I’m Disabled!” after it gets disabled.
The third button has no ripple effect. I disabled it using the MutableInteractionSource(). Don’t forget to assign null to indication parameter. It also shows a toast message “No Ripple Click” when you tap on it.
Make sure that you are using the latest Android Studio because Jetpack Compose doesn’t work in the older versions.
Related:
Final output:
If the video isn’t working, watch it on the YouTube.
Helpful links to understand the code:
Here are the Gradle files used in the project.
Here is the Source Code:
MainActivity.kt:
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.*
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.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
/*
You can use the following code for commercial purposes with some restrictions.
Read the full license here: https://semicolonspace.com/semicolonspace-license/
For more designs with source code,
visit: https://semicolonspace.com/jetpack-compose-samples/
*/
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BlogPostsTheme(darkTheme = false) {
Column(
modifier = Modifier
.fillMaxSize(),
// Gap between children = 26 dp
verticalArrangement = Arrangement.spacedBy(26.dp, Alignment.CenterVertically),
horizontalAlignment = Alignment.CenterHorizontally
) {
val cornerRadius = 16.dp
val gradientColors = listOf(Color(0xFF7b4397), Color(0xFFdc2430))
GradientButton(
gradientColors = gradientColors,
cornerRadius = cornerRadius
)
GradientButtonDisable(
gradientColors = gradientColors,
cornerRadius = cornerRadius
)
GradientButtonNoRipple(
gradientColors = gradientColors,
cornerRadius = cornerRadius,
context = LocalContext.current.applicationContext
)
}
}
}
}
}
@Composable
private fun GradientButton(
gradientColors: List<Color>,
cornerRadius: Dp
) {
var clickCount by remember {
mutableStateOf(0)
}
Button(
modifier = Modifier
.fillMaxWidth()
.padding(start = 32.dp, end = 32.dp),
onClick = {
clickCount++
},
contentPadding = PaddingValues(),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
),
shape = RoundedCornerShape(cornerRadius)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(
brush = Brush.linearGradient(colors = gradientColors),
shape = RoundedCornerShape(cornerRadius)
)
.padding(horizontal = 16.dp, vertical = 8.dp),
contentAlignment = Alignment.Center
) {
Text(
text = "Click $clickCount",
fontSize = 20.sp,
color = Color.White
)
}
}
}
@Composable
private fun GradientButtonDisable(
gradientColors: List<Color>,
cornerRadius: Dp,
disabledColors: List<Color> = listOf(Color.Transparent, Color.Transparent)
) {
var enabled by remember { mutableStateOf(true) }
Button(
modifier = Modifier
.fillMaxWidth()
.padding(start = 32.dp, end = 32.dp),
onClick = {
enabled = false
},
contentPadding = PaddingValues(),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
),
shape = RoundedCornerShape(cornerRadius),
enabled = enabled,
) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(
brush = Brush.linearGradient(colors = if (enabled) gradientColors else disabledColors),
shape = RoundedCornerShape(cornerRadius)
)
.padding(horizontal = 16.dp, vertical = 8.dp),
contentAlignment = Alignment.Center
) {
Text(
text = if (enabled) "Disable Me" else "I'm Disabled!",
fontSize = 20.sp,
color = if (enabled) Color.White else Color.Black.copy(alpha = 0.6F)
)
}
}
}
@Composable
private fun GradientButtonNoRipple(
gradientColors: List<Color>,
cornerRadius: Dp,
context: Context
) {
// This is used to disable the ripple effect
val interactionSource = remember {
MutableInteractionSource()
}
Box(
modifier = Modifier
.fillMaxWidth()
.padding(start = 32.dp, end = 32.dp)
.background(
brush = Brush.linearGradient(colors = gradientColors),
shape = RoundedCornerShape(cornerRadius)
)
.padding(horizontal = 16.dp, vertical = 8.dp)
.clickable(
indication = null, // Assign null to disable the ripple effect
interactionSource = interactionSource
) {
Toast
.makeText(context, "No Ripple Click", Toast.LENGTH_SHORT)
.show()
},
contentAlignment = Alignment.Center
) {
Text(
text = "No Ripple",
fontSize = 20.sp,
color = Color.White,
fontWeight = FontWeight.Medium
)
}
}