Jetpack Compose

Oct 11 2022 Kotlin 1.7.10, Android 13, Android Studio Chipmunk

Part 2: Build Complex UI with Compose

14. Add Animations to Compose

Episode complete

Play next episode

Next
Save for later
About this episode
See versions

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 13. Reuse UI in Multiple Screens Next episode: 15. Use the MVVM Pattern

The student materials have been reviewed and are updated as of September 2022.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock Now

Demo

Now that you’ve built most of the UI for the app, you’re really well versed with Jetpack Compose. If you open this episode’s starter project and run the app, you’ll see that the other features of the app have been prebuilt for you.

val isShowingAddReadingList = _isShowingAddReadingListState.value

val size by animateDpAsState(if (isShowingAddReadingList) 0.dp else 56.dp)

FloatingActionButton(modifier = Modifier.size(size), onClick = {}

sealed class BookReviewDetailsScreenState

object Initial : BookReviewDetailsScreenState()

object Loaded : BookReviewDetailsScreenState()

@Composable
fun animateBookReviewDetails(screenState: BookReviewDetailsScreenState): BookReviewDetailsTransitionState {
  val transition = updateTransition(screenState, label = "bookReviewDetailsEntry")
}

class BookReviewDetailsTransitionState {

  var imageMarginTop: Dp by mutableStateOf(0.dp)
  var floatingButtonSize: Dp by mutableStateOf(0.dp)
  var titleMarginTop: Dp by mutableStateOf(0.dp)
  var contentMarginTop: Dp by mutableStateOf(0.dp)

  var contentAlpha: Float by mutableStateOf(0f)
}

val imageMarginTop by transition.animateDp(
    transitionSpec = { tween(durationMillis = 1000) }, label = "imageMargin"
  ) { target -> if (target == Loaded) 16.dp else 125.dp }

val floatingButtonSize by transition.animateDp(
    transitionSpec = { tween(durationMillis = 1000) }, label = "FABSize"
  ) { target -> if (target == Loaded) 56.dp else 0.dp }

  val titleMarginTop by transition.animateDp(
    transitionSpec = { tween(durationMillis = 1000) }, label = "titleMargin"
  ) { target -> if (target == Loaded) 16.dp else 75.dp }

  val contentMarginTop by transition.animateDp(
    transitionSpec = { tween(durationMillis = 1000) }, label = "contentMargin"
  ) { target -> if (target == Loaded) 6.dp else 50.dp }

  val contentAlpha by transition.animateFloat(
    transitionSpec = { tween(durationMillis = 1000) }, label = "contentAlpha"
  ) { target -> if (target == Loaded) 1f else 0.3f }

val state = remember { BookReviewDetailsTransitionState() }

  state.apply {
    this.imageMarginTop = imageMarginTop
    this.floatingButtonSize = floatingButtonSize
    this.titleMarginTop = titleMarginTop
    this.contentMarginTop = contentMarginTop
    this.contentAlpha = contentAlpha
  }

return state

private val _screenState = mutableStateOf<BookReviewDetailsScreenState>(Initial)

val animationState by _screenState
val state = animateBookReviewDetails(screenState)

LaunchedEffect(Unit, block = { // here
  _screenState.value = Loaded
})

Scaffold(topBar = { BookReviewDetailsTopBar() },
  floatingActionButton = { AddReadingEntry(state) }) { // here
  BookReviewDetailsInformation(state) // here
}

FloatingActionButton(
  modifier = Modifier.size(state.floatingButtonSize))

Spacer(modifier = Modifier.height(state.imageMarginTop))

Spacer(modifier = Modifier.height(state.titleMarginTop))

Spacer(modifier = Modifier.height(state.contentMarginTop))

Spacer(modifier = Modifier.height(state.contentMarginTop))

Spacer(modifier = Modifier.height(state.contentMarginTop))

modifier = Modifier.alpha(state.contentAlpha)

Spacer(modifier = Modifier.height(state.contentMarginTop))

.alpha(state.contentAlpha)