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!
Share Improve this question asked Jan 29 at 17:43 MuriloMurilo 371 silver badge4 bronze badges2 Answers
Reset to default 2Find 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.