import
android.os.Bundle
import
androidx.activity.ComponentActivity
import
androidx.activity.compose.setContent
import
androidx.compose.foundation.BorderStroke
import
androidx.compose.foundation.Image
import
androidx.compose.foundation.layout.*
import
androidx.compose.foundation.shape.CircleShape
import
androidx.compose.foundation.shape.RoundedCornerShape
import
androidx.compose.material.Button
import
androidx.compose.material.MaterialTheme
import
androidx.compose.material.MaterialTheme.typography
import
androidx.compose.material.Surface
import
androidx.compose.material.Text
import
androidx.compose.runtime.Composable
import
androidx.compose.ui.Modifier
import
androidx.compose.ui.draw.clip
import
androidx.compose.ui.graphics.Color
import
androidx.compose.ui.res.painterResource
import
androidx.compose.ui.text.style.TextAlign
import
androidx.compose.ui.tooling.preview.Preview
import
androidx.compose.ui.unit.dp
import
com.example.jetpackcomposepractice.ui.theme.JetpackComposePracticeTheme
class
MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super
.onCreate(savedInstanceState)
setContent {
JetpackComposePracticeTheme {
Surface(color = Color.White) {
Column(modifier = Modifier.padding(
10
.dp)) {
Chips()
}
}
}
}
}
}
@Composable
fun CustomChip(
selected: Boolean,
text: String,
modifier: Modifier = Modifier
) {
Surface(
color = when {
selected -> MaterialTheme.colors.onSurface
else
-> Color.Transparent
},
contentColor = when {
selected -> MaterialTheme.colors.onPrimary
else
-> Color.LightGray
},
shape = CircleShape,
border = BorderStroke(
width =
1
.dp,
color = when {
selected -> MaterialTheme.colors.primary
else
-> Color.LightGray
}
),
modifier = modifier
) {
Text(
text = text,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.body2,
modifier = Modifier.padding(
8
.dp)
)
}
}
@Composable
private
fun CustomImageChip(
text: String,
imageId: Int,
selected: Boolean,
modifier: Modifier = Modifier
) {
Surface(
color = when {
selected -> MaterialTheme.colors.primary
else
-> Color.Transparent
},
contentColor = when {
selected -> MaterialTheme.colors.onPrimary
else
-> Color.LightGray
},
shape = RoundedCornerShape(
16
.dp),
border = BorderStroke(
width =
1
.dp,
color = when {
selected -> MaterialTheme.colors.primary
else
-> Color.LightGray
}
),
modifier = modifier
) {
Row(modifier = Modifier) {
Image(
painter = painterResource(imageId),
contentDescription =
null
,
modifier = Modifier
.padding(
8
.dp)
.size(
20
.dp)
.clip(CircleShape)
)
Text(
text = text,
style = typography.body2,
modifier = Modifier.padding(end =
8
.dp, top =
8
.dp, bottom =
8
.dp)
)
}
}
}
@Preview
@Composable
fun Chips() {
Text(text =
"Custom Chips"
, style = typography.h6, modifier = Modifier.padding(
8
.dp))
SubtitleText(subtitle =
"Custom chips with surface"
)
Column {
Row(modifier = Modifier.padding(
8
.dp)) {
CustomChip(
selected =
true
,
text =
"Chip"
,
modifier = Modifier.padding(horizontal =
8
.dp)
)
CustomChip(
selected =
false
,
text =
"Inactive"
,
modifier = Modifier.padding(horizontal =
8
.dp)
)
CustomImageChip(
text =
"custom"
,
imageId = R.drawable.gfg_logo,
selected =
true
)
Spacer(modifier = Modifier.padding(
8
.dp))
CustomImageChip(
text =
"custom2"
,
imageId = R.drawable.gfg_logo,
selected =
false
)
}
SubtitleText(subtitle =
"Buttons with circle clipping."
)
Row(modifier = Modifier.padding(
8
.dp)) {
Button(
onClick = {},
modifier = Modifier
.padding(
8
.dp)
.clip(CircleShape)
) {
Text(text =
"Chip button"
)
}
Button(
onClick = {},
enabled =
false
,
modifier = Modifier
.padding(
8
.dp)
.clip(CircleShape)
) {
Text(text =
"Disabled chip"
)
}
}
}
}
@Composable
fun SubtitleText(subtitle: String, modifier: Modifier = Modifier) {
Text(text = subtitle, style = typography.subtitle2, modifier = modifier.padding(
8
.dp))
}