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!

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!

• android
• animation
• android-jetpack-compose

Share Improve this question Follow asked Jan 29 at 17:43 MuriloMurilo 3711 silver badge44 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Find a nice Lottie Animation

Under res folder create a new Android Resource Directory with name raw and download there the json file that you found. Finally simply create a composable like so:

@Composable
private fun LottieAnimation(modifier: Modifier) {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.your_lottie_file))
    LottieAnimation(
        modifier = modifier,
        composition = composition,
        speed = 0.5f, //1f is default
        iterations = LottieConstants.IterateForever
    )
}

And call it from anywhare. Happy coding!

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.