There seems to be a bug with the animateContentSiz...

# compose

[Mehdi Haghgoo]

There seems to be a bug with the animateContentSize animation when animating Icon size. The animation does not seem very consistent. This happens on emulator and the real device.

[Mehdi Haghgoo]

I am setting a conditional size with modifier on the Icon and then call animateContentSize.

Screen Recording 2021-03-22 at 3.43.14 PM.mov

[Mehdi Haghgoo]

Here's the code:

@Composable
fun BottomBar(navController: NavHostController) {

    var selectedItem by mutableStateOf("home")


    BottomAppBar(Modifier.fillMaxWidth()) {
        Icon(Icons.Outlined.Home, contentDescription = "Home",
            Modifier
                .clickable { navController.navigate("home"); selectedItem = "home" }
                .weight(1f)
                .size(if(selectedItem == "home") 32.dp else 24.dp)
                .animateContentSize()
        )
        Icon(Icons.Outlined.Person, contentDescription = "Profile",
            Modifier
                .clickable { navController.navigate("profile"); selectedItem = "profile" }
                .weight(1f)
                .size(if(selectedItem == "profile") 32.dp else 24.dp)
                .animateContentSize()

        )

        Icon(painterResource(id = R.drawable.balance), contentDescription = "Balance",
            Modifier
                .clickable { navController.navigate("balance"); selectedItem = "balance" }
                .weight(1f)
                .size(if(selectedItem == "balance") 32.dp else 24.dp)
                .animateContentSize()

        )
        Icon(Icons.Outlined.Settings, contentDescription = "Settings",
            Modifier
                .clickable { navController.navigate("settings"); selectedItem = "settings" }
                .weight(1f)
                .size(if(selectedItem == "settings") 32.dp else 24.dp)
                .animateContentSize()
        )
    }
}

[Doris Liu]

This seems like the correct behavior based on the snippet. If the expectation is to scale up the icon via an animation, consider wrapping the conditional size with animateDpAsState . animateContentSize changes the content instantly while only animating the container size

[Mehdi Haghgoo]

I'm not exactly sure what's the difference between animating content and container. However, I'm gonna give animateDpAsState a try.

[Mehdi Haghgoo]

I just tried animateDpAsState, but the result is the same. As seen in the following code, I'm now using two different sizes to animate between. The sizes have been defined with animateDpAsState.

@Composable
fun BottomBar(navController: NavHostController) {

    var selectedItem by mutableStateOf("home")

    val smSize by animateDpAsState(targetValue = 24.dp)
    val bgSize by animateDpAsState(targetValue = 32.dp)



    BottomAppBar(Modifier.fillMaxWidth()) {
        Icon(Icons.Outlined.Home, contentDescription = "Home",
            Modifier
                .clickable { navController.navigate("home"); selectedItem = "home" }
                .weight(1f)
                .size(if (selectedItem == "home") bgSize else smSize)
//                .animateContentSize()
        )
        Icon(Icons.Outlined.Person, contentDescription = "Profile",
            Modifier
                .clickable { navController.navigate("profile"); selectedItem = "profile" }
                .weight(1f)
                .size(if (selectedItem == "profile") bgSize else smSize)
//                .animateContentSize()

        )

        Icon(painterResource(id = R.drawable.balance), contentDescription = "Balance",
            Modifier
                .clickable { navController.navigate("balance"); selectedItem = "balance" }
                .weight(1f)
                .size(if (selectedItem == "balance") bgSize else smSize)
//                .animateContentSize()

        )
        Icon(Icons.Outlined.Settings, contentDescription = "Settings",
            Modifier
                .clickable { navController.navigate("settings"); selectedItem = "settings" }
                .weight(1f)
                .size(if (selectedItem == "settings") bgSize else smSize)
//                .animateContentSize()
        )
    }
}

[Mehdi Haghgoo]

Screen Recording 2021-03-23 at 2.31.23 AM.mov