Blog Infos
Author
Published
Topics
Published

 

 

At Exyte we try to contribute to open-source as much as we can, from releasing libraries and components to writing articles and tutorials. One type of tutorials we do is replicating — taking a complex UI component, implementing it using new frameworks and writing a tutorial alongside. We started with SwiftUI some years ago, but this time we finally foray into Android, using Google’s declarative UI framework: Jetpack Compose.

This is the second article of the dribbble Replicating series. The previous post demonstrated implementing the dynamic width animated audio bar. This one will focus on replicating the Action Panel.

Consider how the panel is designed. Let’s see this panel with slow motion animations:

In each comment list item, we have two elements:

  • CommentListItem that displays the comment information.
  • ActionPanel, a small panel with comment action buttons inside. It rolls in over the CommentListItem when the user clicks on the comment.
BoxWithConstraints(
    modifier = modifier
        .fillMaxWidth()
        .background(color = MaterialTheme.colors.surface),
    contentAlignment = Alignment.Center,
) {
    val density = LocalDensity.current
    val maxWidth = with(density) { constraints.maxWidth.toDp() }
    val maxHeight = commentItemHeight - 16.dp
    CommentListItem(
        avatarId = comment.avatarId,
        name = comment.name,
        text = comment.text,
        date = comment.date,
        onClick = { onClick(comment) },
    )
    ActionPanel(
        modifier = Modifier
            .align(Alignment.CenterEnd)
            .padding(horizontal = 16.dp),
        maxWidth = maxWidth,
        maxHeight = maxHeight,
        isVisible = isActionsVisible,
        onActionClick = onActionClick
    )
}

 

Let’s describe the bar appearance animation. Initially the height and width of the panel change evenly, let’s call this corner animation. After that we only animate the change of the width, we will call this the expanding animation. Meanwhile, the alpha component (the transparency of the view) is animated steadily throughout. Timeline for a better understanding:

 

 

To animate the change of the height and width we use the following code that sets up a transition, and then updates it with the target provided by targetState:updateTransition(targetState = isVisible, label = "Visibility")

When targetState changes, the transition will run all of its child animations towards their target values specified for the new targetState. In case you haven’t worked with animations before, note that label is needed for Android Studio tooling to differentiate between animations.

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

, ,

Migrating to Jetpack Compose – an interop love story

Most of you are familiar with Jetpack Compose and its benefits. If you’re able to start anew and create a Compose-only app, you’re on the right track. But this talk might not be for you…
Watch Video

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer for Jetpack Compose
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engin ...
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer f ...
Google

Jobs

No results found.

Let’s consider the expanding animation. We use transitionSpec to set the animation and specify animations for each pair of initialState and targetState. The keyframes parameter specifies animation phases based on the values of the snapshots set at different points in time during the animation. At any given time, the animation value will be interpolated between two keyframe values. In this case, the height animation starts with a certain speed for CORNER_DURATION, then continues at a different speed for EXPAND_DURATION. For in-depth information, you can consult the official documentation

val stateTransition = updateTransition(targetState = isVisible, label = "Visibility")
val targetWidth = stateTransition.animateDp(
    transitionSpec = {
        keyframes {
            durationMillis = CORNER_DURATION + EXPAND_DURATION
            if (targetState) {
                maxHeight at CORNER_DURATION
                maxWidth at CORNER_DURATION + EXPAND_DURATION
            } else {
                maxHeight at EXPAND_DURATION
                MIN_RADIUS.dp at EXPAND_DURATION + CORNER_DURATION
            }
        }
    },
    label = "Width"
) { value -> if (value) maxWidth else MIN_RADIUS.dp }

The height animation also uses frames. When the action panel appears, its height reaches its maximum value. When the panel disappears, the height animation should not start until the corner animation has started.

val targetHeight by stateTransition.animateDp(
    transitionSpec = {
        keyframes {
            durationMillis = CORNER_DURATION + EXPAND_DURATION
            if (targetState) {
                maxHeight at CORNER_DURATION
            } else {
                maxHeight at EXPAND_DURATION
                MIN_RADIUS.dp at EXPAND_DURATION + CORNER_DURATION
            }
        }
    },
    label = "Height"
) { value -> if (value) maxHeight else MIN_RADIUS.dp }

The alpha value varies from 0 to 1. So we can use the proportion from the initial width to the maximum width of the panel.

val contentAlphaProvider = remember {
    { (targetWidth.value - MIN_RADIUS.dp) / (maxWidth - MIN_RADIUS.dp) }
}

This concludes implementing the Action Panel. The next article in the series will demonstrate implementing the Collapsing Header in more detail. See you then!

This article was originally published on proandroiddev.com

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu