Develop Reference

Bounce Button Animation in Compose

I want to make a button like this in Compose:
https://pub.dev/packages/flutter_bounceable
But the clickable method is not work in my code.
I tried with this code, but it has an error.
Pushing the button, but there's no action.
Animations are working well, but not for the clickable.
fun Modifier.bounceClick(onClick: () -> Unit,animationDuration: Int = 100,
scaleDown: Float = 0.9f) = composed {
val interactionSource = MutableInteractionSource()
val coroutineScope = rememberCoroutineScope()
val scale = remember {
Animatable(1f)
}
this
.scale(scale = scale.value)
.background(
color = Color(0xFF35898F),
shape = RoundedCornerShape(size = 12f)
)
.clickable(interactionSource = interactionSource, indication = null, onClick = onClick)
.pointerInput(Unit) {
while(true)
awaitPointerEventScope {
awaitFirstDown()
coroutineScope.launch {
scale.animateTo(
scaleDown,
animationSpec = tween(animationDuration),
)
}
waitForUpOrCancellation()
coroutineScope.launch {
scale.animateTo(
scaleDown,
animationSpec = tween(20),
)
scale.animateTo(
1f,
animationSpec = tween(animationDuration),
)
}
}
}
}

This is quite simple to do with Compose.
You should use foreachGesture or awaitEachGesture if Compose version is 1.4.0-alpha03 with Modifier.pointerInput instead of while. Also when you have clickable you don't need Modifier.pointerInput as well , you can use either of them.
I will only demonstrate how to do it with Modifier.clickable and interactionSource.collectIsPressedAsState() as below.
Result
Implementation
fun Modifier.bounceClick(
animationDuration: Int = 100,
scaleDown: Float = 0.9f,
onClick: () -> Unit
) = composed {
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val animatable = remember {
Animatable(1f)
}
LaunchedEffect(key1 = isPressed) {
if (isPressed) {
animatable.animateTo(scaleDown)
} else animatable.animateTo(1f)
}
Modifier
.graphicsLayer {
val scale = animatable.value
scaleX = scale
scaleY = scale
}
.clickable(
interactionSource = interactionSource,
indication = null
) {
onClick()
}
}
Usage
#Composable
private fun BounceExample() {
Row {
Box(
Modifier
.background(Color.Red, RoundedCornerShape(10.dp))
.bounceClick {
}
.padding(10.dp),
contentAlignment = Alignment.Center
) {
Text(text = "Hello World", color = Color.White, fontSize = 20.sp)
}
Spacer(modifier = Modifier.width(10.dp))
Box(
Modifier
.bounceClick {
}
.background(Color.Green, RoundedCornerShape(10.dp))
.padding(10.dp),
contentAlignment = Alignment.Center
) {
Text(text = "Hello World", color = Color.White, fontSize = 20.sp)
}
}
}

Navigation between 2 composables with videoViews very slow

I have 2 screens with videoview inside and i make transition between them using accompanist-navigation-animation lib. Transition between 2 compose “screens” is slow, i think it might be related to how i start videos, but i cant figure it out. Also when transition from first to second screen is made recomposition is run many times.
Can somebody with more knowledge in compose please take a look how i handle video playback please.
#ExperimentalAnimationApi
#Composable
fun Navigation() {
val navController = rememberAnimatedNavController()
val activity = (LocalContext.current as? Activity)
AnimatedNavHost(
navController = navController,
startDestination = "promoScreen1"
) {
composable("promoScreen1",
exitTransition = {
slideOutOfContainer(
AnimatedContentScope.SlideDirection.Left,
animationSpec = tween(1000)
)
}
) {
val repeatsPromoViewModel: RepeatsPromoViewModel = viewModel()
RepeatsPromoScreen(
repeatsPromoViewModel = viewModel(),
navController = navController,
videoFileName = "repeat_promo1",
title = stringResource(id = R.string.repeats_promo_title1),
subtitle = stringResource(id = R.string.repeats_promo_subtitle),
description = stringResource(id = R.string.repeats_promo_description),
bottomButtonText = stringResource(id = R.string.next).uppercase(),
onBottomButtonClicked = {
repeatsPromoViewModel._overlayVisible.value = true
repeatsPromoViewModel.isPlaying.value = false
navController.navigate("promoScreen2")
}
)
}
composable("promoScreen2", enterTransition = {
slideIntoContainer(
AnimatedContentScope.SlideDirection.Left,
animationSpec = tween(1000)
)
}) {
val repeatsPromoViewModel: RepeatsPromoViewModel = viewModel()
BackHandler(true) {} //disable back button
RepeatsPromoScreen(
repeatsPromoViewModel = repeatsPromoViewModel,
navController = navController,
videoFileName = "repeat_promo2",
title = stringResource(id = R.string.repeats_promo_title2),
subtitle = stringResource(id = R.string.repeats_promo_subtitle2),
description = stringResource(id = R.string.repeats_promo_description2),
bottomButtonText = stringResource(id = R.string.planning_tutorial_finish).uppercase()
) { activity?.finish() }
}
}
}
#ExperimentalAnimationApi
#Composable
fun RepeatsPromoScreen(
repeatsPromoViewModel: RepeatsPromoViewModel,
navController: NavController,
videoFileName: String,
title: String,
subtitle: String,
description: String,
bottomButtonText: String,
onBottomButtonClicked: () -> Unit
) {
val activity = (LocalContext.current as? Activity)
val overlayVisible by repeatsPromoViewModel.overlayVisible
val configuration = LocalConfiguration.current
val isSmallScreen = configuration.screenHeightDp < 720 || configuration.screenWidthDp <= 360
var modifier = Modifier
.fillMaxSize()
.background(color = Color(0xFFEBF4F9))
if (isSmallScreen) {
modifier =
modifier.then(Modifier.verticalScroll(rememberScrollState())) //enable scrolling on small screens
}
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier
) {
Box(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.Start)
) {
IconButton(
onClick = { activity?.finish() }
) {
Icon(
Icons.Filled.Close,
contentDescription = "Close screen"
)
}
}
Text(
text = title,
fontSize = 28.sp,
lineHeight = 22.sp,
textAlign = TextAlign.Center,
fontFamily = FontFamily(Font(R.font.source_serif_pro_black)),
modifier = Modifier.padding(top = 24.dp),
color = colorResource(id = R.color.toshl_profile_name)
)
Text(
text = subtitle,
fontSize = 14.sp,
lineHeight = 17.sp,
textAlign = TextAlign.Center,
modifier = Modifier.padding(top = 10.dp, start = 50.dp, end = 50.dp),
color = colorResource(id = R.color.toshl_sync_subtitle)
)
val rawId =
activity?.resources?.getIdentifier(videoFileName, "raw", activity.packageName)
val path = "android.resource://" + activity?.packageName + "/" + rawId
val retriever = MediaMetadataRetriever()
retriever.setDataSource(activity, Uri.parse(path))
val frame = retriever.frameAtTime
val videoWidth = frame?.width?.toFloat() ?: 0.toFloat()
val videoHeight = frame?.height?.toFloat() ?: 0.toFloat()
val ratio = configuration.screenWidthDp / UiHelper.convertPxToDp(
activity!!.applicationContext,
videoWidth
)
val videoView = remember(activity) {
VideoView(activity).apply {
setVideoPath(path)
setOnPreparedListener { mp: MediaPlayer ->
mp.setOnInfoListener(MediaPlayer.OnInfoListener { mp, what, _ ->
if (what == MediaPlayer.MEDIA_INFO_VIDEO_RENDERING_START) {
repeatsPromoViewModel._overlayVisible.value = false
return#OnInfoListener true
}
false
})
mp.start()
mp.setVideoScalingMode(MediaPlayer.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING)
mp.isLooping = true
}
}
}
val videoContainerHeight =
UiHelper.convertPxToDp(activity.applicationContext, videoHeight) * ratio
Box() {
AndroidView(
modifier = Modifier
.padding(top = 25.dp, start = 0.dp, end = 0.dp)
.height(videoContainerHeight.dp),
factory = { context ->
videoView
}
)
//overlay
this#Column.AnimatedVisibility(visible = overlayVisible) {
Box(
modifier = Modifier
.padding(top = 25.dp, start = 0.dp, end = 0.dp)
.height(videoContainerHeight.dp)
.background(Color(0xFFEBF4F9))
.clip(RectangleShape)
.fillMaxSize()
)
}
}
Text(
text = description,
fontSize = 14.sp,
lineHeight = 17.sp,
textAlign = TextAlign.Center,
modifier = Modifier.padding(top = 30.dp, start = 50.dp, end = 50.dp),
color = colorResource(id = R.color.toshl_sync_subtitle)
)
if (isSmallScreen) { //just add button below other elements
PromoBottomButton(
paddingTop = 32.dp,
paddingBottom = 16.dp,
onFinishClicked = { },
text = stringResource(id = R.string.next).uppercase()
)
} else { //pin button to bottom of screen (that's why its wrapped inside another column)
Column(
modifier = Modifier
.fillMaxSize()
.align(Alignment.CenterHorizontally),
verticalArrangement = Arrangement.Bottom
) {
PromoBottomButton(
paddingTop = 16.dp,
paddingBottom = 32.dp,
onFinishClicked = { onBottomButtonClicked.invoke() },
text = bottomButtonText
)
}
}
}
}

How to create a OTP layout in android compose?

I was making a login for my app in the new android jetpack's compose.
I want to make a OTP layout like in the given photo.

check full example here
const val PIN_VIEW_TYPE_UNDERLINE = 0
const val PIN_VIEW_TYPE_BORDER = 1
#Composable
fun PinView(
pinText: String,
onPinTextChange: (String) -> Unit,
digitColor: Color = MaterialTheme.colors.onBackground,
digitSize: TextUnit = 16.sp,
containerSize: Dp = digitSize.value.dp * 2,
digitCount: Int = 4,
type: Int = PIN_VIEW_TYPE_UNDERLINE,
) {
BasicTextField(value = pinText,
onValueChange = onPinTextChange,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
decorationBox = {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
repeat(digitCount) { index ->
DigitView(index, pinText, digitColor, digitSize, containerSize, type = type)
Spacer(modifier = Modifier.width(5.dp))
}
}
})
}
#Composable
private fun DigitView(
index: Int,
pinText: String,
digitColor: Color,
digitSize: TextUnit,
containerSize: Dp,
type: Int = PIN_VIEW_TYPE_UNDERLINE,
) {
val modifier = if (type == PIN_VIEW_TYPE_BORDER) {
Modifier
.width(containerSize)
.border(
width = 1.dp,
color = digitColor,
shape = MaterialTheme.shapes.medium
)
.padding(bottom = 3.dp)
} else Modifier.width(containerSize)
Column(horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center) {
Text(
text = if (index >= pinText.length) "" else pinText[index].toString(),
color = digitColor,
modifier = modifier,
style = MaterialTheme.typography.body1,
fontSize = digitSize,
textAlign = TextAlign.Center)
if (type == PIN_VIEW_TYPE_UNDERLINE) {
Spacer(modifier = Modifier.height(2.dp))
Box(
modifier = Modifier
.background(digitColor)
.height(1.dp)
.width(containerSize)
)
}
}
}

You can use a very simple layout for each char in the otp.
Something like
#Composable
fun OtpChar(){
var text by remember { mutableStateOf("1") }
val maxChar = 1
Column(Modifier.background(DarkGray),
horizontalAlignment = Alignment.CenterHorizontally){
TextField(
value =text,
onValueChange = {if (it.length <= maxChar) text = it},
modifier = Modifier.width(50.dp),
singleLine = true,
textStyle = LocalTextStyle.current.copy(
fontSize = 20.sp,
textAlign= TextAlign.Center),
colors= TextFieldDefaults.textFieldColors(
textColor = White,
backgroundColor = Transparent,
unfocusedIndicatorColor = Transparent,
focusedIndicatorColor = Transparent)
)
Divider(Modifier
.width(28.dp)
.padding(bottom = 2.dp)
.offset(y=-10.dp),
color = White,
thickness = 1.dp)
}
}
You can add some features like:
manage the focus in Next direction with the TAB key
manage the focus in Previous direction with the BACK SPACE key
how to move to the next textfield when a digit is entered
Something like:
fun OtpChar(
modifier: Modifier = Modifier
){
val pattern = remember { Regex("^[^\\t]*\$") } //to not accept the tab key as value
var (text,setText) = remember { mutableStateOf("") }
val maxChar = 1
val focusManager = LocalFocusManager.current
LaunchedEffect(
key1 = text,
) {
if (text.isNotEmpty()) {
focusManager.moveFocus(
focusDirection = FocusDirection.Next,
)
}
}
Column(
horizontalAlignment = Alignment.CenterHorizontally
){
TextField(
value =text,
onValueChange = {
if (it.length <= maxChar &&
((it.isEmpty() || it.matches(pattern))))
setText(it)
},
modifier = modifier
.width(50.dp)
.onKeyEvent {
if (it.key == Key.Tab) {
focusManager.moveFocus(FocusDirection.Next)
true
}
if (text.isEmpty() && it.key == Key.Backspace) {
focusManager.moveFocus(FocusDirection.Previous)
}
false
},
textStyle = LocalTextStyle.current.copy(
fontSize = 20.sp,
textAlign= TextAlign.Center),
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Next
),
colors= TextFieldDefaults.textFieldColors(
backgroundColor = Transparent,
unfocusedIndicatorColor = Transparent,
focusedIndicatorColor = Transparent),
)
Divider(
Modifier
.width(28.dp)
.padding(bottom = 2.dp)
.offset(y = -10.dp),
color = Teal200,
thickness = 1.dp)
}
}
Then just use something like a Row to display 4 OtpChars
val (item1, item2, item3, item4) = FocusRequester.createRefs()
Row(horizontalArrangement = Arrangement.SpaceBetween){
OtpChar(
modifier = Modifier
.focusRequester(item1)
.focusProperties {
next = item2
previous = item1
}
)
OtpChar(
modifier = Modifier
.focusRequester(item2)
.focusProperties {
next = item3
previous = item1
}
)
OtpChar(
modifier = Modifier
.focusRequester(item3)
.focusProperties {
next = item4
previous = item2
}
)
OtpChar(
modifier = Modifier
.focusRequester(item4)
.focusProperties {
previous = item3
next = item4
}
)
//....
}

If you faced keyboard issues try the code below:
#Composable
fun OtpCell(
modifier: Modifier,
value: String,
isCursorVisible: Boolean = false
) {
val scope = rememberCoroutineScope()
val (cursorSymbol, setCursorSymbol) = remember { mutableStateOf("") }
LaunchedEffect(key1 = cursorSymbol, isCursorVisible) {
if (isCursorVisible) {
scope.launch {
delay(350)
setCursorSymbol(if (cursorSymbol.isEmpty()) "|" else "")
}
}
}
Box(
modifier = modifier
) {
Text(
text = if (isCursorVisible) cursorSymbol else value,
style = MaterialTheme.typography.body1,
modifier = Modifier.align(Alignment.Center)
)
}
}
#ExperimentalComposeUiApi
#Composable
fun PinInput(
modifier: Modifier = Modifier,
length: Int = 5,
value: String = "",
onValueChanged: (String) -> Unit
) {
val focusRequester = remember { FocusRequester() }
val keyboard = LocalSoftwareKeyboardController.current
TextField(
value = value,
onValueChange = {
if (it.length <= length) {
if (it.all { c -> c in '0'..'9' }) {
onValueChanged(it)
}
if (it.length >= length) {
keyboard?.hide()
}
}
},
// Hide the text field
modifier = Modifier
.size(0.dp)
.focusRequester(focusRequester),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number
)
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center
) {
repeat(length) {
OtpCell(
modifier = modifier
.size(width = 45.dp, height = 60.dp)
.clip(MaterialTheme.shapes.large)
.background(MaterialTheme.colors.surface)
.clickable {
focusRequester.requestFocus()
keyboard?.show()
},
value = value.getOrNull(it)?.toString() ?: "",
isCursorVisible = value.length == it
)
if (it != length - 1) Spacer(modifier = Modifier.size(8.dp))
}
}
}
Result:

First make the common TextField for OTP Screen
#Composable
fun CommonOtpTextField(otp: MutableState<String>) {
val max = 1
OutlinedTextField(
value = otp.value,
singleLine = true,
onValueChange = { if (it.length <= max) otp.value = it },
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
shape = RoundedCornerShape(20.dp),
modifier = Modifier
.width(60.dp)
.height(60.dp),
maxLines = 1,
textStyle = LocalTextStyle.current.copy(
textAlign = TextAlign.Center
)
)
}
And Now use above CommonTextField to make four otp Field
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 15.dp, start = 15.dp, end = 15.dp),
horizontalArrangement = Arrangement.SpaceEvenly
) {
CommonOtpTextField(otp = otpOne)
CommonOtpTextField(otp = otpTwo)
CommonOtpTextField(otp = otpThree)
CommonOtpTextField(otp = otpFour)
}

Simple solution that uses one TextField and different code length
#Composable
fun RegistrationCodeInput(codeLength: Int) {
val code = remember { mutableStateOf("") }
val focusRequester = FocusRequester()
LaunchedEffect(Unit) {
focusRequester.requestFocus()
}
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
BasicTextField(
value = code.value,
onValueChange = { if (it.length <= codeLength) code.value = it },
Modifier.focusRequester(focusRequester = focusRequester),
keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
decorationBox = {
CodeInputDecoration(code.value, codeLength)
})
}
}
#Composable
private fun CodeInputDecoration(code: String, length: Int) {
Box(
modifier = Modifier
.padding(16.dp)
.border(
border = BorderStroke(2.dp, color = borderColor),
shape = Shapes.small
)
) {
Row(
) {
for (i in 0 until length) {
val text = if (i < code.length) code[i].toString() else ""
CodeEntry(text)
}
}
}
}
#Composable
private fun CodeEntry(text: String) {
Box(
modifier = Modifier
.width(42.dp)
.height(42.dp),
contentAlignment = Alignment.Center
) {
Text(text = text)
}
}
#Preview
#Composable
fun PreviewInput() {
RegistrationCodeInput(4)
}

How to bring a widget front when it is focused(or selected ) in jetpack compose

I have a page like this:
When one box is focused, it will be scaled. I use Modifier.graphicsLayer() to scale it.
but the scaled box will be covered by other boxes(box01 is covered by box02,box04 and box 05)
what I actually need is: the scaled box covers other boxes,like this:
My Sample Code:
#Composable
fun FocusBox(
title:String,
requester: FocusRequester = FocusRequester(),
modifier: Modifier = Modifier
) {
var boxColor by remember { mutableStateOf(Color.White) }
var scale by remember { mutableStateOf(1f) }
Box(
Modifier
.focusRequester(requester)
.onFocusChanged {
boxColor = if (it.isFocused) Color.Green else Color.Gray
scale = if (it.isFocused) { 1.3f } else { 1f }
}
.focusable()
.graphicsLayer(
scaleX = scale,
scaleY = scale
).background(boxColor)
) {
Text(
text = title,
modifier = Modifier.padding(30.dp),
color = Color.White,
style = MaterialTheme.typography.subtitle2
)
}
}
#Composable
fun FocusScaleBoxDemo(){
Row(modifier = Modifier.padding(30.dp)){
Column{
FocusBox(title = "Box_01")
Spacer(modifier = Modifier.padding(5.dp))
FocusBox(title = "Box_02")
Spacer(modifier = Modifier.padding(5.dp))
FocusBox(title = "Box_03")
Spacer(modifier = Modifier.padding(5.dp))
}
Spacer(modifier = Modifier.padding(5.dp))
Column{
FocusBox(title = "Box_04")
Spacer(modifier = Modifier.padding(5.dp))
FocusBox(title = "Box_05")
Spacer(modifier = Modifier.padding(5.dp))
FocusBox(title = "Box_06")
Spacer(modifier = Modifier.padding(5.dp))
}
}
}

Basically you need zIndex to bring view under neighbours. But this modifier only works for one container. So if you only add it to the selected box, neighbour column will still be on top of that. You need to add it to the Column containing selected box too.
I also prettified you code a little bit: try to avoid code repetition as much as possible - you'll decrease mistake chances and increase modifications speed
#Composable
fun FocusScaleBoxDemo() {
val columnsCount = 2
val rowsCount = 3
var focusedColumnIndex by remember { mutableStateOf(0) }
Row(
horizontalArrangement = Arrangement.spacedBy(10.dp),
modifier = Modifier.padding(30.dp)
) {
for (column in 0 until columnsCount) {
Column(
verticalArrangement = Arrangement.spacedBy(10.dp),
modifier = Modifier
.zIndex(if (column == focusedColumnIndex) 1f else 0f)
) {
for (row in 0 until rowsCount) {
val boxIndex = column * rowsCount + row
FocusBox(
title = "Box_${boxIndex + 1}",
onFocused = {
focusedColumnIndex = column
},
)
}
}
}
}
}
#Composable
fun FocusBox(
title: String,
onFocused: () -> Unit,
requester: FocusRequester = remember { FocusRequester() },
) {
var isFocused by remember { mutableStateOf(false) }
val scale = if (isFocused) 1.3f else 1f
Box(
Modifier
.focusRequester(requester)
.onFocusChanged {
isFocused = it.isFocused
if (isFocused) {
onFocused()
}
}
.focusable()
.graphicsLayer(
scaleX = scale,
scaleY = scale
)
.background(if (isFocused) Color.Green else Color.Gray)
.zIndex(if (isFocused) 1f else 0f)
) {
Text(
text = title,
modifier = Modifier.padding(30.dp),
color = Color.White,
style = MaterialTheme.typography.subtitle2
)
}
}

How to animate a String in Jetpack Compose?

I have a String "(+91)". How do I animate it such that on some action, "(+91)" fades in gradually, and on some other action "(+91)" fades out gradually. I am using "(+91)" as prefix in my Textfield, with the help of visualTransformation.
This is the code I'm using for my Textfield:
TextField(
value = query3.value,
onValueChange = { newValue ->
query3.value = newValue
mobErrorVisible.value = false
},
visualTransformation = if (showCode){
PrefixTransformation("(+91)")} //Animate (+91)
else
PrefixTransformation(""),
label = {
Text(
"Mobile Number",
color = colorResource(id = R.color.bright_green),
fontFamily = FontFamily(Font(R.font.poppins_regular)),
fontSize = with(LocalDensity.current) { dimensionResource(id = R.dimen._12ssp).toSp() })
},
interactionSource = interactionSource,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
textStyle = TextStyle(
textAlign = TextAlign.Start,
color = colorResource(id = R.color.bright_green),
fontFamily = FontFamily(Font(R.font.poppins_regular)),
fontSize = with(LocalDensity.current) { dimensionResource(id = R.dimen._16ssp).toSp() }
),
modifier = Modifier
.drawBehind {
val strokeWidth = indicatorWidth.value * density
val y = size.height - strokeWidth / 2
drawLine(
indicatorColor,
Offset(TextFieldPadding.toPx(), y),
Offset(size.width - TextFieldPadding.toPx(), y),
strokeWidth
)
}
.focusRequester(focusRequester)
.onFocusChanged { showCode = (it.isFocused || query3.value != "")}
.constrainAs(phone) {
top.linkTo(glPhone)
bottom.linkTo(glPhoneBottom)
start.linkTo(glLeft)
end.linkTo(glRight)
width = Dimension.fillToConstraints
height = Dimension.fillToConstraints
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Transparent,
unfocusedIndicatorColor = Transparent,
disabledIndicatorColor = Transparent
)
)
This is my PrefixTransformation class:
class PrefixTransformation(val prefix: String) : VisualTransformation {
override fun filter(text: AnnotatedString): TransformedText {
return PrefixFilter(text, prefix)
}
}
This is my PrefixFilter() function:
fun PrefixFilter(number: AnnotatedString, prefix: String): TransformedText {
var out = prefix + " " + number.text
val prefixOffset = prefix.length
val numberOffsetTranslator = object : OffsetMapping {
override fun originalToTransformed(offset: Int): Int {
return offset + prefixOffset
}
override fun transformedToOriginal(offset: Int): Int {
if (offset <= prefixOffset-1) return prefixOffset
return offset - prefixOffset
}
}
return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}
We can animate color as:
val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) {
color.animateTo(if (ok) Color.Green else Color.Red)
}
Box(Modifier.fillMaxSize().background(color.value))
But how do we animate a String?

What you need is the animatedVisibility composable.
Here is an example where the visibility of the text is controlled by the button
Box(
modifier = Modifier
.fillMaxSize()
) {
var visible by remember { mutableStateOf(false) }
Button(
modifier = Modifier.align(Alignment.TopCenter),
onClick = {
visible = !visible
}
) {
Text("Toggle Visibility")
}
val animationDuration = 2000
AnimatedVisibility(
modifier = Modifier.align(Alignment.BottomCenter),
visible = visible,
enter = fadeIn(animationSpec = tween(durationMillis = animationDuration)),
exit = fadeOut(animationSpec = tween(durationMillis = animationDuration))
) {
Text("ABC")
}
}

A sensible solution would be to use a separate Composable for the country code. That way you can wrap the Composable in something like crossfade or just AnimatedVisibility (Experimental as of compose 1.0.0-beta07)