Can we give Animation to a Card which will displa...

# compose

[Satyam G]

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]

Look at AnimatedVisibility

[Satyam G]

Tried. But it is not giving the visual

[Ronald Wolvers]

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]

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

[Ronald Wolvers]

Have to do the content yourself

[Filip Wiesner]

it is not giving the visual

You can tweak the enter and exit transitions to achieve the animation you want.

[Satyam G]

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

[Ronald Wolvers]

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 🙂

[Satyam G]

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]

My use case is only to have visual like Snackbar is displayed. Not like it should dismiss after some time 🙂

[Filip Wiesner]

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]

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

[Satyam G]

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

[Filip Wiesner]

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

[Satyam G]

@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: (() -> 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]

var error by remember { mutableStateOf(false) }


if(error){
    Error(isVisible = error, action = {
        error = false
    })
}

[Satyam G]

Using this Error composable in one of my composable 👆way

[Filip Wiesner]

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]

What changes are expected here ? @Filip Wiesner

[Filip Wiesner]

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]

oops. ☹️ So it should be like the Composable should be already displayed . The only parameter will change is the visibility

[Filip Wiesner]

Yes

[Satyam G]

Cool. Will modify it accordingly . 😌 Thanks for immediate response.
By any chance if you have any sample implementation, please share 😊

[Satyam G]

@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]

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]

Okay 👍