How to make changes to composable when the said composable is clicked on

Question

I have a composable -

@Composable
fun ButtonBar(items: List<ActionButtons>) {
    AppTheme {
        LazyRow(
            contentPadding = PaddingValues(horizontal = 8.dp),
        ) {
            items(items) {
                Box() {
                    TextButton(
                        shape = RectangleShape,
                        onClick = {
                            it.action
                        },
                        colors = ButtonDefaults.buttonColors(
                            contentColor = AppTheme.colors.primary,
                            containerColor = AppTheme.colors.backgroundColor,
                        ),
                    ) {
                        Icon(
                            ImageVector.vectorResource(id = it.buttonIconRes),
                            contentDescription = it.buttonString,
                            modifier = Modifier.size(8.dp),
                            tint = AppTheme.colors.primary,
                        )

                        Spacer(modifier = Modifier.width(8.dp))

                        Text(
                            text = it.buttonString,
                            style = AppTheme.typography.baseTextAppearanceAction1,
                            color = AppTheme.colors.primary,
                        )
                    }

                    if (it.buttonOnClickAnim != null) {
                        val composition by rememberLottieComposition(
                            spec = LottieCompositionSpec.RawRes(resId = it.buttonOnClickAnim),
                        )

                        LottieAnimation(
                            composition = composition,
                            modifier = Modifier.align(Alignment.CenterStart).padding(start = 12.dp),
                            iterations = it.animRepeatCount,
                        )
                    }
                }
            }
        }
    }
}

In the above code, I wish to show the LottieAnimation only when user taps on the TextButton and change the tint of the Icon to transparent at the same time.

In the usual XML view, one has access to all the views via their respective ids and make changes to the view when onClick is invoked. Like this -

buttonItem.buttonOnClickAnim?.let {
                itemBinding.anim.repeatCount = buttonItem.animRepeatCount
                itemBinding.anim.setAnimation(it)
            }

            itemBinding.actionBarButtonText.setOnClickListener {
                if (buttonItem.buttonOnClickAnim != null) {
                    itemBinding.anim.isVisible = true
                    itemBinding.actionBarButtonText.drawableStart?.setTint(itemView.context.getColor(R.color.transparent))
                }

                buttonItem.action.invoke()
            }

How do I achieve something similar with Compose?

Answer 1

You can use remember to maintain a state that tracks whether the button is tapped.

@Composable
fun ButtonBar(items: List<ActionButtons>) {
    AppTheme {
        LazyRow(
            contentPadding = PaddingValues(horizontal = 8.dp),
        ) {
            items(items) { item ->
                var isButtonTapped by remember { mutableStateOf(false) }

                Box() {
                    TextButton(
                        shape = RectangleShape,
                        onClick = {
                            // Toggle the state when the button is clicked
                            isButtonTapped = !isButtonTapped

                            // Perform the button action
                            item.action()
                        },
                        colors = ButtonDefaults.buttonColors(
                            contentColor = if (isButtonTapped) Color.Transparent else AppTheme.colors.primary,
                            containerColor = AppTheme.colors.backgroundColor,
                        ),
                    ) {
                        Icon(
                            ImageVector.vectorResource(id = item.buttonIconRes),
                            contentDescription = item.buttonString,
                            modifier = Modifier.size(8.dp),
                            tint = if (isButtonTapped) Color.Transparent else AppTheme.colors.primary,
                        )

                        Spacer(modifier = Modifier.width(8.dp))

                        Text(
                            text = item.buttonString,
                            style = AppTheme.typography.baseTextAppearanceAction1,
                            color = if (isButtonTapped) Color.Transparent else AppTheme.colors.primary,
                        )
                    }

                    if (isButtonTapped && item.buttonOnClickAnim != null) {
                        val composition by rememberLottieComposition(
                            spec = LottieCompositionSpec.RawRes(resId = item.buttonOnClickAnim),
                        )

                        LottieAnimation(
                            composition = composition,
                            modifier = Modifier.align(Alignment.CenterStart).padding(start = 12.dp),
                            iterations = item.animRepeatCount,
                        )
                    }
                }
            }
        }
    }
}