At Exyte we attempt to contribute to open supply as a lot as we are able to, from releasing libraries and elements to writing articles and tutorials. One sort of tutorials we do is replicating: taking a fancy UI part, 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 right now we lastly foray into Android, utilizing Google’s declarative UI framework: Jetpack Compose.

Our utility will consist of three screens, with animated transitions between them:

For ease of studying, replication of those screens will likely be mentioned in a number of articles masking the next UI parts and animations:

• First display screen waveform
• Second display screen motion panel
• Header collapsed from the third display screen
• Drag gesture transition
• Shared Gadgets Transition

We are going to begin the sequence with the animation of the waveform.

That is what we need to implement:

Your entire aspect consists of animated vertical quantity bars, spaced at a daily distance from one another. Let’s have a look at the fundamental dimensions that we are going to use:

As you properly know, the world of Android units is wealthy with screens of various sizes, and this raises the next query: the best way to current the waveform on the screens of various units in order that it takes up all of the obtainable area? To make this widget match the complete width of the display screen, you may enhance the width of the strains proportionally, or you may enhance the variety of strains. We selected the second technique to protect the sharpness of the picture. On this case step one is to calculate the variety of strains wanted. To try this, we’ll have to divide the obtainable canvas width by the scale of a single quantity bar (bar width + area width). Additionally, we now have to make use of toInt() as an alternative of roundToInt() as a result of we solely need to use parts that absolutely match the scale, no matter rounding.

val rely = (canvasWidth / (barWidthFloat + gapWidthFloat)).toInt().coerceAtMost(MaxLinesCount)

Then calculate startOffset:

val animatedVolumeWidth = rely * (barWidthFloat + gapWidthFloat)
var startOffset = (canvasWidth - animatedVolumeWidth) / 2

To point out the absence of audio output, we scale back the amplitude of the pitch fluctuations. Let’s outline the utmost and minimal values ​​for the heights of the bars:

val barMinHeight = 0f
val barMaxHeight = canvasHeight / 2f / heightDivider

He heightDivider The parameter will differ relying on the state of the audio: idle or enjoying. For a easy transition between these states, we are able to use:

val heightDivider by animateFloatAsState(
targetValue = if (isAnimating) 1f else 6f,
animationSpec = tween(1000, easing = LinearEasing)
)

For infinite animation we use rememberInfiniteTransition()the place animations is the checklist of parts to be animated, and random is a property that helps us to randomly change the animation time.

val infiniteAnimation = rememberInfiniteTransition()
val animations = mutableListOf<State<Float>>()
val random = keep in mind  Random(System.currentTimeMillis()) 

Now let’s have a look at the animation. Animating all bars would take a heavy toll on a telephone’s battery life, so to avoid wasting assets, we solely used a small variety of floating animation values:

repeat(15) 
val durationMillis = random.nextInt(500, 2000)
animations += infiniteAnimation.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis),
repeatMode = RepeatMode.Reverse,
)
)

To forestall the animation from repeating each 15 strains, you may set random initialMultipliers.

val initialMultipliers = keep in mind 
mutableListOf<Float>().apply 
repeat(MaxLinesCount)  this += random.nextFloat() 

Now we carry out the next operations for every line:

1) Get hold of random top values, in our case they’re repeated each 15 instances.

2) Add initialMultipliers a currentSize to scale back the prospect of values ​​repeating one another:

3) Use linear interpolation to resize the peak seamlessly:

// 1
val currentSize = animations[index % animations.size].worth
// 2
var barHeightPercent = initialMultipliers[index] + currentSize
if (barHeightPercent > 1.0f) 
val diff = barHeightPercent - 1.0f
barHeightPercent = 1.0f - diff

// 3
val barHeight = lerpF(barMinHeight, barMaxHeight, barHeightPercent)

Upon getting the scale, you may draw a quantity bar (1) and calculate the offset for the subsequent quantity bar (2).

// 1 draw the bar
drawLine(
colour = barColor,
begin = Offset(startOffset, canvasCenterY - barHeight / 2),
finish = Offset(startOffset, canvasCenterY + barHeight / 2),
strokeWidth = barWidthFloat,
cap = StrokeCap.Spherical,
)
// 2 calculate the offset for subsequent bar
startOffset += barWidthFloat + gapWidthFloat

For higher understanding, right here is the whole lot of the mixed drawing code that’s executed within the loop:

repeat(rely)  index ->
val currentSize = animations[index % animations.size].worth
var barHeightPercent = initialMultipliers[index] + currentSize
if (barHeightPercent > 1.0f) 
val diff = barHeightPercent - 1.0f
barHeightPercent = 1.0f - diff

val barHeight = lerpF(barMinHeight, barMaxHeight, barHeightPercent)
drawLine(
colour = barColor,
begin = Offset(startOffset, canvasCenterY - barHeight / 2),
finish = Offset(startOffset, canvasCenterY + barHeight / 2),
strokeWidth = barWidthFloat,
cap = StrokeCap.Spherical,
)
startOffset += barWidthFloat + gapWidthFloat

This concludes the implementation of the variable-width animated waveform. The subsequent installment within the sequence will show the implementation of the Motion Panel. See you quickly!