Jetpack Compose Tutorial: Replicating Dribbble Audio App Half 1 | by Nik Afonasov | Jan, 2023 | Tech Verse

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 kind of tutorials we do is replicating: taking a posh 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 at present 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 probably be mentioned in a number of articles protecting 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 Objects Transition

We’ll begin the sequence with the animation of the waveform.

That is what we wish to implement:

All the factor consists of animated vertical quantity bars, spaced at an everyday distance from one another. Let’s have a look at the essential dimensions that we are going to use:

As you nicely know, the world of Android units is wealthy with screens of various sizes, and this raises the next query: learn how 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 possibly can enhance the width of the strains proportionally, or you possibly can 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 do this, we’ll must divide the obtainable canvas width by the scale of a single quantity bar (bar width + area width). Additionally, we’ve to make use of toInt() as an alternative of roundToInt() as a result of we solely wish 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 indicate the absence of audio output, we cut 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 clean 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 record 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 = bear in mind  Random(System.currentTimeMillis()) 

Now let’s have a look at the animation. Animating all bars would take a heavy toll on a cellphone’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 stop the animation from repeating each 15 strains, you possibly can set random initialMultipliers.

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

Now we carry out the next operations for every line:

1) Acquire random peak 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)

After getting the size, you possibly can 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 following installment within the sequence will display the implementation of the Motion Panel. See you quickly!