In this post I will show you a sample of a transition animation used in Android Compose to rotate and change color of a FAB.
Floating action buttons ( FAB ) are a great UI element to add to your application. They are primarily used for:
- main action on current screen
- action to a navigation element for the user
They are customizable with Compose modifiers. In this post I will show you how you can further customize their behavior with an animation. Animations will help improve the visual aspect of your app and make it more appealing for the end user.
I am implementing the FAB using the Scaffold composable in Android.
Process
The animation is based off of a switching boolean that is held in a mutable state. I set a few element attributes to the transition animation.
The animation holds two values to animate.
- Rotation
- Color
You can add/remove/change to whatever your needs are for your application.
These attributes have a default value set. They are then put into the FAB composable as values for their respective attribute as a parameter.
When the state changes, the animation will run for the values set.
Code
Below is the whole sample created off the MainActivity. It uses the Scaffold element with the floatingActionButton parameter set. This will make sure the proper location is used in the UI which is the lower right corner of the screen.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SampleFABTransitionAnimationTheme {
Scaffold(modifier = Modifier.fillMaxSize(),
floatingActionButton = {
var fabState by remember { mutableStateOf(false) }
val fabTransition = updateTransition(fabState)
val fabRotate by fabTransition.animateFloat(transitionSpec = { tween(300)}){
if(it) 0f else 90f
}
val fabColor by fabTransition.animateColor(transitionSpec = { tween(300)}) {
if(it) MaterialTheme.colorScheme.tertiaryContainer else MaterialTheme.colorScheme.primaryContainer
}
FloatingActionButton(
modifier = Modifier
.rotate(fabRotate),
containerColor = fabColor,
shape = RoundedCornerShape(32.dp),
onClick = {
fabState = !fabState
},
) {
Icon(if(!fabState)Icons.Filled.Add else Icons.Filled.Close, if(fabState) "Add" else "Close")
}
}) { innerPadding ->
Box(
modifier = Modifier.padding(innerPadding)
) { }
}
}
}
}
}
Hope this was helpful.