Create a music playing bars animation on Compose

Question

I'm working on a project that creates cards to see what your friends are listening to.

    @Composable
fun FriendCard(friend: User, recentTracks: RecentTracks?) {
    var albumNameWidth by remember { mutableStateOf(200.dp) }
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    ) {
        Row(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(
                horizontalAlignment = Alignment.Start,
            ) {
                recentTracks?.track?.firstOrNull()?.let { track ->
                    Text(
                        text = track.name,
                        style = MaterialTheme.typography.titleMedium,
                        maxLines = 1,
                        modifier = Modifier
                            .width(750.dp)
                            .basicMarquee()
                    )
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        albumNameWidth =
                            if (track.dateInfo?.formattedDate == null) 230.dp else 200.dp
                        Text(
                            text = track.album.name.ifEmpty { stringResource(R.string.unknown_album) },
                            style = MaterialTheme.typography.labelLarge.copy(
                                color = MaterialTheme.colorScheme.onSurface
                            ),
                            maxLines = 1,
                            modifier = Modifier
                                .padding(end = 8.dp)
                                .width(albumNameWidth)
                                .basicMarquee()
                        )
                        if (track.dateInfo?.formattedDate == null) {
                            //if the person is listening to it right now
                              Icon(
                                  imageVector = Icons.Default.PlayArrow,
                                  tint = MaterialTheme.colorScheme.onSurfaceVariant,
                                  contentDescription = stringResource(R.string.now_playing),
                                  modifier = Modifier.align(Alignment.CenterVertically)
                              )
                        } else {
                            Text(
                                text = formatData(track.dateInfo.formattedDate),
                                style = MaterialTheme.typography.labelLarge.copy(
                                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                                    fontSize = 13.sp
                                ),
                                maxLines = 1,
                                modifier = Modifier.align(Alignment.CenterVertically)
                            )
                        }
                    }
                } ?: Text(
                    text = stringResource(id = R.string.no_recent_tracks),
                    style = MaterialTheme.typography.bodySmall.copy(
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                )
            }
        }
    }
}

Currently, when someone is listening to music at the moment the app is opened, it just displays a simple "play" icon from the Material Icons library. However, I want to replace it with an animation of three bars, similar to the one in the Spotify desktop app: sample gif

I found this question, which asks about the same kind of animation, but it's 10 years old, and the library provided in the answer hasn't been updated for Jetpack Compose. Any help is appreciated. Thanks!

Answer 1

You can define a row with 3 bars. Each bar in a box and use animateDp as state to animate the height. I had to roate the row so that bars don't animate in downward direction. Roughly it would be

@Composable
fun RandomEqualizer(
    modifier: Modifier,
    barCount: Int = 3
) {
    val randomData = remember { mutableStateOf(List(barCount) { Random.nextFloat() }) }

    LaunchedEffect(Unit) {
        while (true) {
            randomData.value = List(barCount) { Random.nextFloat() }
            kotlinx.coroutines.delay(500)
        }
    }

    Box(
        modifier = modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Row(
            modifier = Modifier
                .height(120.dp)
                .align(Alignment.Center)
                .rotate(180f),
            horizontalArrangement = Arrangement.spacedBy(5.dp)
        ) {
            val widthDp = 40.dp
            val heightDp = 100.dp
            val barWidthDp = widthDp / (barCount * 2)

            randomData.value.forEachIndexed { index, d ->
                val height by animateDpAsState(
                    targetValue = heightDp * d
                )


                Box(
                    Modifier
                        .width(barWidthDp)
                        .height(height)
                        .background(Color.Black)

                )
            }
        }
    }
}

@Preview
@Composable
fun RandomEqualizerPreview() {
    RandomEqualizer(
        Modifier
            .fillMaxSize()
            .background(Color.Gray),
    )
}

Would look like

You can customize this.