Mehdi Haghgoo

    Mehdi Haghgoo

    1 year ago
    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.
    I am setting a conditional size with modifier on the Icon and then call animateContentSize.
    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

    Doris Liu

    1 year ago
    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

    Mehdi Haghgoo

    1 year ago
    I'm not exactly sure what's the difference between animating content and container. However, I'm gonna give animateDpAsState a try.
    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()
            )
        }
    }