Skip to content

Instantly share code, notes, and snippets.

@kalactor
Created June 1, 2023 08:16
Show Gist options
  • Save kalactor/f7ee0b3797eb136f9b4c5d7539dce306 to your computer and use it in GitHub Desktop.
Save kalactor/f7ee0b3797eb136f9b4c5d7539dce306 to your computer and use it in GitHub Desktop.
This gist shows all types of cards in jetpack compose and how to make them clickable using modifier.
@Composable
fun CardShower() {
val context = LocalContext.current
Row() {
Card(
modifier = Modifier
.padding(8.dp)
.clickable {
Toast
.makeText(context, "Filled Card Clicked", Toast.LENGTH_SHORT)
.show()
}
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
painter = painterResource(id = R.drawable.android),
contentDescription = "android image",
modifier = Modifier.size(100.dp)
)
Text(text = "Filled")
}
}
ElevatedCard(modifier = Modifier
.padding(8.dp)
.clickable {
Toast
.makeText(context, "Elevated Card Clicked", Toast.LENGTH_SHORT)
.show()
}) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Image(
painter = painterResource(id = R.drawable.android),
contentDescription = "android image",
modifier = Modifier.size(100.dp)
)
Text(text = "Elevated")
}
}
OutlinedCard(modifier = Modifier
.padding(8.dp)
.clickable {
Toast
.makeText(context, "Outlined Card Clicked", Toast.LENGTH_SHORT)
.show()
}) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Image(
painter = painterResource(id = R.drawable.android),
contentDescription = "android image",
modifier = Modifier.size(100.dp)
)
Text(text = "Outlined")
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment