DEV Community

Isaac Akakpo
Isaac Akakpo

Posted on • Edited on

Animating Composables (animateDpAsState)

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.

Image description

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)
Enter fullscreen mode Exit fullscreen mode

  1. Declare the size of the box as an Integer(this could also be in Dp primarily so there's no need for conversion)

  2. Define animateDpAsState variable and give it a targetValue of realCardSize

  3. Here we create a Column parent view to host the Card and the list of size buttons.

  4. 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)) } }
Enter fullscreen mode Exit fullscreen mode
  1. Set the chip Color based on the current selected chip size.
  2. 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 } } }
Enter fullscreen mode Exit fullscreen mode
  1. Add Code block 7 under cardSizes.

Get Full Code At:
GitHub link

Top comments (0)