Can we give Animation to a Card which will display and give

Question

Can we give Animation to a Card which will display and give a visual like SnackBar is displayed How to achieve this SnackBar kind of Animation

Filip Wiesner · Answer

Look at <https developer android com reference kotlin androidx compose animation package summary AnimatedVisibility kotlin Boolean androidx compose ui Modifier androidx compose animation EnterTransition androidx compose animation ExitTransition kotlin String kotlin Function1 |AnimatedVisibility>

Satyam G · Answer

Tried But it is not giving the visual

Ronald Wolvers · Answer

Is this what you re referring to ```val snackbarVisibleState = remember mutableStateOf false AnimatedVisibility snackbarVisibleState value Snackbar Your snackbar content here LaunchedEffect snackbarVisibleState Display the snackbar for 5 seconds delay 5000L snackbarVisibleState value = false ```

Ronald Wolvers · Answer

This will display a snackbar for 5 seconds and then animated out

Ronald Wolvers · Answer

Have to do the content yourself

Filip Wiesner · Answer

gt it is not giving the visual You can tweak the `enter` and `exit` transitions to achieve the animation you want

Satyam G · Answer

I am not using Snackbar Just a Normal Card and some content within its scope

Ronald Wolvers · Answer

Well you can also use another component the interesting parts are the `AnimatedVisibility` and `LaunchedEffect` That s as snackbar like as it gets if you ask me slightly smiling face

Satyam G · Answer

```AnimatedVisibility visible = isVisible enter = slideInVertically + fadeIn exit = slideOutVertically + fadeOut Card elevation = 6 dp modifier = Modifier padding 16 dp defaultMinSize minHeight = 48 dp backgroundColor = Theme colors red shape = Theme roundShapes large Row verticalAlignment = Alignment CenterVertically Row modifier = Modifier weight 8f padding 8 dp horizontalArrangement = Arrangement spacedBy 12 dp verticalAlignment = Alignment CenterVertically icon let Icon imageVector = icon tint = Theme colors onRed contentDescription = Text text = message color = Theme colors onRed style = Theme typography bodyMedium if action = null TextButton modifier = Modifier weight 2f onClick = action text = actionLabel containerColor = Theme colors red contentColor = Theme colors onRed ```

Satyam G · Answer

My use case is only to have visual like Snackbar is displayed Not like it should dismiss after some time slightly smiling face

Filip Wiesner · Answer

gt I am not using Snackbar Just a Normal Card If you look at the `Snackbar` implementation it is really simmilar to a `Card` Both use `Surface` so there is really no difference

Filip Wiesner · Answer

And what is the problem with your implementation What does it is not giving the visual mean

Satyam G · Answer

When it is displayed it does not look like Snackbar is displayed Feels like Just a view becomes visible and gone

Filip Wiesner · Answer

Can you show us the code where you change the `isVisible` boolean

Satyam G · Answer

``` Composable fun Error actionLabel String = stringResource id = R string lbl reload icon ImageVector = <http Icons Outlined Info|Icons Outlined Info> message String = stringResource id = R string lbl error action gt Unit = null isVisible Boolean = true Box modifier = Modifier fillMaxSize Alignment BottomCenter AnimatedVisibility visible = isVisible enter = slideInVertically + fadeIn exit = slideOutVertically + fadeOut Card elevation = 6 dp modifier = Modifier padding 16 dp defaultMinSize minHeight = 48 dp backgroundColor = ApnaTheme colors red shape = ApnaTheme roundShapes large Row verticalAlignment = Alignment CenterVertically Row modifier = Modifier weight 8f padding 8 dp horizontalArrangement = Arrangement spacedBy 12 dp verticalAlignment = Alignment CenterVertically icon let Icon imageVector = icon tint = Theme colors onRed contentDescription = Text text = message color = Theme colors onRed style = Theme typography bodyMedium if action = null TextButton modifier = Modifier weight 2f onClick = action text = actionLabel containerColor = ApnaTheme colors red contentColor = ApnaTheme colors onRed ```

Satyam G · Answer

``` var error by remember mutableStateOf false if error Error isVisible = error action = error = false ```

Satyam G · Answer

Using this Error composable in one of my composable point up 2 way

Filip Wiesner · Answer

Yeah so when the error changes from `true` to `false` you just remove the whole `AnimatedVisibility` composable How do you expect it to animate if you remove it as soon as you change the visibility boolean

Satyam G · Answer

What changes are expected here < Filip Wiesner>

Filip Wiesner · Answer

`AnimatedVisibility` expects that you change the `visible` parameter But you just remove the whole composable and create it again when there is error

Satyam G · Answer

oops white frowning face So it should be like the Composable should be already displayed The only parameter will change is the visibility

Filip Wiesner · Answer

Yes

Satyam G · Answer

Cool Will modify it accordingly relieved Thanks for immediate response By any chance if you have any sample implementation please share blush

Satyam G · Answer

< Filip Wiesner> One last Question out of excitement does this animation by default runs on different thread when performed or we have to take care of performing it in different coroutine scope etc while using it

Filip Wiesner · Answer

You don t have to me every time you add a message to a thread I am part of And you just change a boolean There is not even a way for you to manage the thread it runs on

Satyam G · Answer

Okay thumbsup