Jetpack Compose Tutorial: Replicating Dribbble Audio App Half 2 | by Nik Afonasov | Feb, 2023 | Turbo Tech

At Exyte we attempt to contribute to open supply as a lot as we are able to, from releasing libraries and parts to writing articles and tutorials. One sort of tutorials we do is replicating: taking a posh UI element, implementing it utilizing new frameworks, and writing a tutorial on the identical time. We began with SwiftUI just a few years in the past, however this time we lastly made a foray into Android, utilizing Google’s declarative UI framework: Jetpack Compose.

That is the second article within the dribble Replicating collection. The earlier submit demonstrated the implementation of the dynamic width animated audio bar. This can concentrate on replicating the Motion Panel.

Contemplate how the panel is designed. Let’s check out this panel with gradual movement animations:

In every remark listing merchandise, we have now two gadgets:

• CommentListItem which shows the remark data.
• ActionPanel, a small panel with remark motion buttons inside. Roll over the CommentListItem when the person clicks on the remark.

BoxWithConstraints(
modifier = modifier
.fillMaxWidth()
.background(coloration = MaterialTheme.colours.floor),
contentAlignment = Alignment.Heart,
) 
val density = LocalDensity.present
val maxWidth = with(density)  constraints.maxWidth.toDp() 
val maxHeight = commentItemHeight - 16.dp
CommentListItem(
avatarId = remark.avatarId,
title = remark.title,
textual content = remark.textual content,
date = remark.date,
onClick =  onClick(remark) ,
)
ActionPanel(
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(horizontal = 16.dp),
maxWidth = maxWidth,
maxHeight = maxHeight,
isVisible = isActionsVisible,
onActionClick = onActionClick
)

Let’s describe the animation of the looks of the bar. Initially the peak and width of the panel change uniformly, let’s name this nook animation. After that, we simply animate the width change, we’ll name it stretch animation. In the meantime, the alpha element (the transparency of the view) is consistently animated always. Timeline for higher understanding:

To animate the change of top and width, we use the next code which units up a transition after which updates it with the goal supplied by targetState:updateTransition(targetState = isVisible, label = "Visibility")

When targetState modifications, the transition will run all of its secondary animations towards their specified goal values ​​for the brand new targetState. In case you have not labored with animations earlier than, understand that label is required for the Android Studio instruments to distinguish between animations.

Contemplate the increasing animation. we use transitionSpec to set the animation and specify animations for every pair of initialState and targetState. He keyframes The parameter specifies the animation phases based mostly on the values ​​of snapshots set at totally different cut-off dates throughout the animation. At any given time, the animation worth will probably be interpolated between two keyframe values. On this case, the peak animation begins with a sure pace to CORNER_DURATIONthen proceed at a special pace to EXPAND_DURATION. For extra detailed data, you may seek the advice of 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"
)  worth -> if (worth) maxWidth else MIN_RADIUS.dp 

Top animation additionally makes use of frames. When the motion panel seems, its top reaches its most worth. When the panel disappears, the peak animation shouldn’t begin till the nook animation has began.

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 = "Top"
)  worth -> if (worth) maxHeight else MIN_RADIUS.dp 

The alpha worth ranges from 0 to 1. So we are able to use the ratio from the preliminary width to the utmost width of the panel.

val contentAlphaProvider = bear in mind 
 (targetWidth.worth - MIN_RADIUS.dp) / (maxWidth - MIN_RADIUS.dp) 

This concludes the implementation of the Motion Panel. The subsequent article within the collection will exhibit the implementation of the collapsed header in additional element. Till then!