12
Animating Properties Using Compose
Written by Denis Buketa
Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as
text.You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.
Great job on completing the previous chapter. So far, in the third section of this book, you’ve learned how to use ConstraintLayout
, build complex UI and react to Compose lifecycles. Those things are certainly fun, but what’s even more fun? Playing with animations! And that’s what you’ll do now. :]
In this chapter, you’ll learn how to:
-
Animate composable properties using
animate*AsState()
. - Use
updateTransition()
to animate multiple properties of your composables. - Animate composable content.
- Implement an animated button to join a subreddit.
- Implement an animated toast that displays when the user joins a subreddit.
Before diving straight into the animation world, you’ll create a composable representing a button that lets users join an imaginary subreddit.
You’ll start by implementing a simple button, like the one shown below:
If a user hasn’t joined the subreddit yet, they can do so by clicking the blue button with the plus icon. If the user is a member already, a white button with a blue check represents that state. Clicking the button again returns it to its previous state.
To follow along with the code examples, open this chapter’s starter project in Android Studio and select Open an existing project.
Next, navigate to 12-animating-properties-using-compose/projects and select the starter folder as the project root. Once the project opens, let it build and sync and you’re ready to go!
Note that if you skip ahead to the final project, you’ll find the completed button with all the animation logic implemented.
Now that you’re all set, it’s time to start coding.
Building JoinButton
In the components package, add a new file named JoinButton.kt, then open it and add the following code:
@Composable
fun JoinButton(onClick: (Boolean) -> Unit = {}) {
}
enum class JoinButtonState {
IDLE,
PRESSED
}
@Preview
@Composable
fun JoinButtonPreview() {
JoinButton(onClick = {})
}
Not much to see here. You just created a root composable for your button and added a preview. Right now, there’s nothing to preview because you haven’t added any content yet.
You also added JoinButtonState
, which represents the state of the button, The two options for the state are IDLE
or PRESSED
.
Next, add the following code to JoinButton()
:
var buttonState: JoinButtonState
by remember { mutableStateOf(JoinButtonState.IDLE) }
// Button shape
val shape = RoundedCornerShape(corner = CornerSize(12.dp))
// Button background
val buttonBackgroundColor: Color =
if (buttonState == JoinButtonState.PRESSED)
Color.White
else
Color.Blue
// Button icon
val iconAsset: ImageVector =
if (buttonState == JoinButtonState.PRESSED)
Icons.Default.Check
else
Icons.Default.Add
val iconTintColor: Color =
if (buttonState == JoinButtonState.PRESSED)
Color.Blue
else
Color.White
Box(
modifier = Modifier
.clip(shape)
.border(width = 1.dp, color = Color.Blue, shape = shape)
.background(color = buttonBackgroundColor)
.size(width = 40.dp, height = 24.dp)
.clickable(onClick = {
buttonState =
if (buttonState == JoinButtonState.IDLE) {
onClick.invoke(true)
JoinButtonState.PRESSED
} else {
onClick.invoke(false)
JoinButtonState.IDLE
}
}),
contentAlignment = Alignment.Center
) {
Icon(
imageVector = iconAsset,
contentDescription = "Plus Icon",
tint = iconTintColor,
modifier = Modifier.size(16.dp)
)
}
This might look like a lot of code, but you’ll see that it’s pretty simple. Here’s a breakdown, starting from the top.
You first declared a buttonState
with remember()
. Ideally, you’d represent your state with PostModel
, but this simplified approach is enough to demonstrate how animations work.
Next, you used RoundedCornerShape()
to define the shape
of the button.
You also defined the button’s background color, which will change depending on the buttonState
. When the button has JoinButtonState.PRESSED
, it will be white. When it’s JoinButtonState.IDLE
, it will be blue.
Next, you defined the button’s icon and icon color. When the button’s state is JoinButtonState.PRESSED
, you’ll represent the icon with a white plus sign. If it’s JoinButtonState.IDLE
, you’ll represent it with a blue check mark.
The last thing you added is the code that emits the button’s UI. You used Box()
to define the button shape and background and Icon()
to define how the button’s icon will look.
For that code to work, you need to add a few imports as well:
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
Great! Now, build the project and check the preview panel.
Note that you can change buttonState
’s initial state to PRESSED
, to preview the different settings for your button.
Awesome! Next, you’ll add this button to Post()
.
Adding JoinButton to Post
Before animating JoinButton()
, you’ll add it to Post()
so you can see it in the app.
@Composable
fun Header(
post: PostModel,
onJoinButtonClick: (Boolean) -> Unit = {} // here
) {
Row(
modifier = Modifier.padding(start = 16.dp),
verticalAlignment = Alignment.CenterVertically // here
) {
Image(
ImageBitmap.imageResource(id = R.drawable.subreddit_placeholder),
contentDescription = stringResource(id = R.string.subreddits),
Modifier
.size(40.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.width(8.dp))
Column(modifier = Modifier.weight(1f)) {
Text(
text = stringResource(
R.string.subreddit_header,
post.subreddit
),
fontWeight = FontWeight.Medium,
color = MaterialTheme.colors.primaryVariant
)
Text(
text = stringResource(
R.string.post_header,
post.username,
post.postedTime
),
color = Color.Gray
)
}
Spacer(modifier = Modifier.width(4.dp)) // here
JoinButton(onJoinButtonClick) // here
MoreActionsMenu()
}
Title(text = post.title)
}
Animating the JoinButton background
So far, you’ve made the button background change from one color to another when the state changes. In this section, you’ll animate that transition.
// Button background
val buttonBackgroundColor: Color by animateColorAsState(
if (buttonState == JoinButtonState.PRESSED)
Color.White
else
Color.Blue
)
import androidx.compose.animation.animateColorAsState
Using transitions to animate JoinButton
In the previous section, you saw how to animate one property of your composables. Now, you’ll add more content to JoinButton()
. This will give you the opportunity to animate several properties at once.
Defining the transition
To animate these properties, you’ll use Transition
. Transition
manages one or more animations as its children and runs them simultaneously between multiple states.
val transition = updateTransition(
targetState = buttonState,
label = "JoinButtonTransition"
)
import androidx.compose.animation.core.updateTransition
val duration = 600
val buttonBackgroundColor: Color
by transition.animateColor(
transitionSpec = { tween(duration) },
label = "Button Background Color"
) { state ->
when (state) {
JoinButtonState.IDLE -> Color.Blue
JoinButtonState.PRESSED -> Color.White
}
}
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.tween
val buttonWidth: Dp
by transition.animateDp(
transitionSpec = { tween(duration) },
label = "Button Width"
) { state ->
when (state) {
JoinButtonState.IDLE -> 70.dp
JoinButtonState.PRESSED -> 32.dp
}
}
val textMaxWidth: Dp
by transition.animateDp(
transitionSpec = { tween(duration) },
label = "Text Max Width"
) { state ->
when (state) {
JoinButtonState.IDLE -> 40.dp
JoinButtonState.PRESSED -> 0.dp
}
}
import androidx.compose.ui.unit.Dp
import androidx.compose.animation.core.animateDp
val iconTintColor: Color
by transition.animateColor(
transitionSpec = { tween(duration) },
label = "Icon Tint Color"
) { state ->
when (state) {
JoinButtonState.IDLE -> Color.White
JoinButtonState.PRESSED -> Color.Blue
}
}
Connecting the transition to the composables
Properties buttonBackgroundColor
and iconTintColor
are already in place so you don’t have to change that.
Box(
modifier = Modifier
.clip(shape)
.border(width = 1.dp, color = Color.Blue, shape = shape)
.background(color = buttonBackgroundColor)
.size(
width = buttonWidth, // here
height = 24.dp
)
.clickable(onClick = {
buttonState =
if (buttonState == JoinButtonState.IDLE) {
onClick.invoke(true)
JoinButtonState.PRESSED
} else {
onClick.invoke(false)
JoinButtonState.IDLE
}
}),
contentAlignment = Alignment.Center
) {
Row( // here
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = iconAsset,
contentDescription = "Plus Icon",
tint = iconTintColor,
modifier = Modifier.size(16.dp)
)
Text( // here
text = "Join",
color = Color.White,
fontSize = 14.sp,
maxLines = 1,
modifier = Modifier.widthIn(
min = 0.dp,
max = textMaxWidth // here
)
)
}
}
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.Text
import androidx.compose.ui.unit.sp
Animating composable content
So far, you’ve seen how to animate the properties of your composables. In this section, you’ll explore a different approach to creating animations by learning how to animate composable content.
Adding JoinedToast
In components, create a new file named JoinedToast.kt. Then, add the following code to it:
@Composable
fun JoinedToast(visible: Boolean) {
ToastContent()
}
@Composable
private fun ToastContent() {
val shape = RoundedCornerShape(4.dp)
Box(
modifier = Modifier
.clip(shape)
.background(Color.White)
.border(1.dp, Color.Black, shape)
.height(40.dp)
.padding(horizontal = 8.dp),
contentAlignment = Alignment.Center
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(
painter = painterResource(
id = R.drawable.ic_planet
),
contentDescription = "Subreddit Icon"
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "You have joined this community!")
}
}
}
@Preview
@Composable
fun JoinedToastPreview() {
JoinedToast(visible = true)
}
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.raywenderlich.android.jetreddit.R
Animating JoinedToast
In JoinedToast.kt, replace the JoinedToast()
code with the following:
@ExperimentalAnimationApi
@Composable
fun JoinedToast(visible: Boolean) {
AnimatedVisibility(
visible = visible,
enter = slideInVertically(initialOffsetY = { +40 }) +
fadeIn(),
exit = slideOutVertically() + fadeOut()
) {
ToastContent()
}
}
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.fadeOut
@Composable
fun AnimatedVisibility(
visible: Boolean,
modifier: Modifier = Modifier,
enter: EnterTransition = fadeIn() + expandIn(),
exit: ExitTransition = shrinkOut() + fadeOut(),
initiallyVisible: Boolean = visible,
content: @Composable () -> Unit
): Unit
Bringing the JoinedToast home
Before you can see this animation in action, you need to add JoinedToast()
to HomeScreen()
. You also need to add @ExperimentalAnimationApi
to any parent composable of JoinedToast()
.
@ExperimentalAnimationApi
@Preview
@Composable
fun JoinedToastPreview() {
JoinedToast(visible = true)
}
@ExperimentalAnimationApi
@Composable
fun HomeScreen(viewModel: MainViewModel) {
val posts: List<PostModel>
by viewModel.allPosts.observeAsState(listOf())
var isToastVisible by remember { mutableStateOf(false) }
val onJoinClickAction: (Boolean) -> Unit = { joined ->
isToastVisible = joined
if (isToastVisible) {
Timer().schedule(3000) {
isToastVisible = false
}
}
}
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(modifier = Modifier.background(color = MaterialTheme.colors.secondary)) {
items(posts) {
if (it.type == PostType.TEXT) {
TextPost(it, onJoinButtonClick = onJoinClickAction)
} else {
ImagePost(it, onJoinButtonClick = onJoinClickAction)
}
Spacer(modifier = Modifier.height(6.dp))
}
}
Box(
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(bottom = 16.dp)
) {
JoinedToast(visible = isToastVisible)
}
}
}
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Alignment
import com.raywenderlich.android.jetreddit.components.JoinedToast
import java.util.Timer
import kotlin.concurrent.schedule
Adding onJoinButtonClick to the Posts
Open Post.kt and replace TextPost()
, ImagePost()
and Post()
with the following code:
@Composable
fun TextPost(
post: PostModel,
onJoinButtonClick: (Boolean) -> Unit = {}
) {
Post(post, onJoinButtonClick) {
TextContent(post.text)
}
}
@Composable
fun ImagePost(
post: PostModel,
onJoinButtonClick: (Boolean) -> Unit = {}
) {
Post(post, onJoinButtonClick) {
ImageContent(post.image!!)
}
}
@Composable
fun Post(
post: PostModel,
onJoinButtonClick: (Boolean) -> Unit = {},
content: @Composable () -> Unit = {}
) {
Card(shape = MaterialTheme.shapes.large) {
Column(
modifier = Modifier.padding(
top = 8.dp,
bottom = 8.dp
)
) {
Header(post, onJoinButtonClick)
Spacer(modifier = Modifier.height(4.dp))
content.invoke()
Spacer(modifier = Modifier.height(8.dp))
PostActions(post)
}
}
}
Adding experimental annotations
The annotation you have to add is @ExperimentalAnimationApi
.
import androidx.compose.animation.ExperimentalAnimationApi
@ExperimentalAnimationApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetRedditApp(viewModel)
}
}
import androidx.compose.animation.ExperimentalAnimationApi
Key points
- You use
animate*AsState()
for fire-and-forget animations targeting single properties of your composables. This is very useful for animating size, color, alpha and similar simple properties. - You use
Transition
andupdateTransition()
for state-based transitions. - Use
Transition
s when you have to animate multiple properties of your composables, or when you have multiple states between which you can animate. - Transitions are very good when showing content for the first time or leaving the screen, menu, option pickers and similar. They are also great when animating between multiple states when filling in forms, selecting options and pressing buttons!
- You use
AnimatedVisibility()
when you want to animate the appearance and disappearance of composable content. -
AnimatedVisibility()
lets you combine different types of visibility animations and lets you define directions if you use predefined transition animations.