Skip to content

Instantly share code, notes, and snippets.

@stevdza-san
Created August 6, 2021 19:58
Show Gist options
  • Save stevdza-san/8fd2f383867b2a205aca6eb13bb9bb43 to your computer and use it in GitHub Desktop.
Save stevdza-san/8fd2f383867b2a205aca6eb13bb9bb43 to your computer and use it in GitHub Desktop.
Gradient Button made with Jetpack Compose
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composeapp.ui.theme.color1
import com.example.composeapp.ui.theme.color2
@Composable
fun GradientButton(
text: String,
textColor: Color,
gradient: Brush,
onClick: () -> Unit
) {
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
),
contentPadding = PaddingValues(),
onClick = { onClick() })
{
Box(
modifier = Modifier
.background(gradient)
.padding(horizontal = 16.dp, vertical = 8.dp),
contentAlignment = Alignment.Center
) {
Text(text = text, color = textColor)
}
}
}
@ahmedtanjim
Copy link

Thanks Helped me a lot

@sdzshn3
Copy link

sdzshn3 commented Jun 23, 2023

Set modifier to it and see how you won't be able to expand the button width to full display.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment