You can create a Modifier extension to make it more usable:
[![riplle animation][1]][1]
fun Modifier.rippleLoadingAnimationModifier(
start: Boolean,
color: Color,
circles: Int = 3,
expandFactor: Float = 5f,
durationMillis: Int = 2500,
): Modifier {
if (start.not()) {
return this
} else {
return this.composed {
val transition = rememberInfiniteTransition(label = "ripple")
val translateAnimations = List(circles) { index ->
transition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = durationMillis,
easing = LinearEasing,
),
repeatMode = RepeatMode.Restart,
initialStartOffset = StartOffset(index * (durationMillis / circles))
)
)
}
this.drawBehind {
val radius = (maxOf(size.height, size.width) / 2)*expandFactor
translateAnimations.forEachIndexed { index, animatable ->
drawCircle(
color = color.copy(alpha = (1 - animatable.value)),
radius = radius * animatable.value,
center = size.center,
)
}
}
}
}
}
Preview example:
@Preview
@Composable
private fun RippleLoadingAnimationPrev() {
Box(
Modifier
.size(150.dp)
.background(Color(0xFF4B7AE3))
) {
Icon(
modifier = Modifier.align(Alignment.Center).rippleLoadingAnimationModifier(
start = true,
color = Color.White,
expandFactor = 5f,
),
imageVector = Icons.Default.Bluetooth,
tint = Color.Black,
contentDescription = ""
)
}
}
[1]: https://i.sstatic.net/LhGMwMBd.gif
I've solved it using constraint layout:
Box(modifier = Modifier.padding(Dp(50f))) {
ConstraintLayout(
modifier = Modifier
.border(width = Dp(1f), color = Color.Black)
.fillMaxWidth()
) {
val (left, divider, right) = createRefs()
Column(
modifier = Modifier
.padding(horizontal = Dp(20f))
.constrainAs(left) {
width = Dimension.wrapContent
start.linkTo(parent.start)
top.linkTo(parent.top)
end.linkTo(divider.start)
bottom.linkTo(parent.bottom)
}
) {
Text(text = "Code")
Text(text = "A12")
}
Box(
modifier = Modifier
.width(Dp(1f))
.background(Color.Black)
.constrainAs(divider) {
width = Dimension.wrapContent
height = Dimension.fillToConstraints
start.linkTo(left.end)
top.linkTo(parent.top)
end.linkTo(right.start)
bottom.linkTo(parent.bottom)
}
)
Box(
modifier = Modifier
.constrainAs(right) {
width = Dimension.fillToConstraints
start.linkTo(divider.end)
top.linkTo(parent.top)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) {
Text(
text = "Test",
modifier = Modifier
.padding(vertical = Dp(100f))
.align(Alignment.Center)
)
}
}
}
The key part is using that modifier `height = Dimension.fillToConstraints`
