For this Series, We're going to animate the size of a box based on changing sizes.
We'll try to create something like a size palette.
This follows same procedure as animateColorAsState but here we specify a Dp instead.
// --> 1
val realCardSize = remember {
mutableStateOf(100)
}
//-->2
val stateCardSize = animateDpAsState(targetValue = realCardSize.value.dp )
// --> 3
Column(modifier = Modifier.fillMaxSize()) {
Card(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(10.dp)
.size(stateCardSize.value),
backgroundColor = Green,
elevation = 3.dp
) {
Box(modifier = Modifier.fillMaxSize()) {
Text(text = "Current Size : ", modifier = Modifier.align(Alignment.Center))
}
}
// --> 4
val cardSizes = listOf(100, 300, 500)
Declare the size of the box as an Integer(this could also be in Dp primarily so there's no need for conversion)
Define animateDpAsState variable and give it a targetValue of realCardSize
Here we create a Column parent view to host the Card and the list of size buttons.
We then declare a list of sizes we want the Box to take.
Let's now build the Chips sizeButtonItems at the bottom of the card
@ExperimentalMaterialApi
@Composable
fun ChipSizeItem(
index: Int,
isChecked: Boolean,
size: Int,
onChecked: (index: Int, size: Int) -> Unit
) {
// --> 5
val chipColour = animateColorAsState(targetValue = if (isChecked) Green else White)
Card(
backgroundColor = chipColour.value,
elevation = 3.dp,
shape = RoundedCornerShape(100),
modifier = Modifier.padding(5.dp).toggleable(value = isChecked,onValueChange = {
// --> 6
onChecked(index, size)
})
) {
Text(text = "$size.dp", modifier = Modifier.padding(horizontal = 20.dp, vertical = 5.dp))
}
}
- Set the chip Color based on the current selected chip size.
- Return the index and size of the box when a chip is selected.
// --> 7
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
var currentIndex by remember {
mutableStateOf(0)
}
cardSizes.forEachIndexed { cardIndex, cardSize ->
ChipSizeItem(
index = cardIndex,
isChecked = cardIndex == currentIndex,
size = cardSize
) { index, size ->
currentIndex = index
realCardSize.value = size
}
}
}
- Add Code block 7 under cardSizes.
Get Full Code At:
GitHub link
Top comments (0)