I cannot color single text from my list on click Jetpack Compose (single selection)

Question

I have a string list of texts, when I click one of them I should color it in one color, currently my implementation colors all of the texts, what I'm doing wrong ?

var isPressed by remember { mutableStateOf(false) }
    val buttonColor: Color by animateColorAsState(
        targetValue = when (isPressed) {
            true -> FreshGreen
            false -> PastelPeach
        },
        animationSpec = tween()
    )

LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(25.dp)
    ) {
        items(filterList) { filterName ->
            Text(
                text = filterName,
                modifier = Modifier
                    .background(shape = RoundedCornerShape(24.dp), color = buttonColor)
                    .padding(horizontal = 16.dp, vertical = 8.dp)
                    .clickable(
                        interactionSource = remember { MutableInteractionSource() },
                        indication = null
                    ) {
                        isPressed = !isPressed
                        onFilterClick(filterName)
                    }
            )
        }
    }

Thanks Gabriel, this one pass me through, did not know that Text will not hold its own state since its another composable, I tought it will store a Text state for each item — SNM, Nov 23 '22 at 17:10

Gabriele Mariotti · Answer 1 · 2022-11-23T17:13:25.963

2

You are using the same state (isPressed) for all the items.
As alternative to z.y's answer you can just move the isPressed declaration inside the items block:

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(25.dp)
) {
    items(itemsList) { filterName->

        var isPressed by remember { mutableStateOf(false) }

        val buttonColor: Color by animateColorAsState(
            targetValue = when (isPressed) {
                true -> Color.Green
                false -> Color.Red
            },
            animationSpec = tween()
        )
        
        Text(
          //your code
        )
    }
}

edited Nov 23 '22 at 17:13

answered Nov 23 '22 at 17:10

Gabriele Mariotti

320,139
94
887
841

2

Excellent !!! Full context on the situation, since he answered first I will give the correct answer to him, but thanks a lot for taking the time Gabriele ! – SNM Nov 23 '22 at 17:11
is it necessary the indexed ? – SNM Nov 23 '22 at 17:12
@SNM No, my bad, sorry. – Gabriele Mariotti Nov 23 '22 at 17:13
1

Thanks @Gabriele, I forgot you can actually have a scope within the `item{…}`. Thank you as well @SNM – z.g.y Nov 23 '22 at 17:13

score 2 · Answer 2 · answered Nov 23 '22 at 17:24

For those who wants only to keep selected only one item at the time, here is the way I went for

@Composable
fun BrandCategoryFilterSection(
    modifier: Modifier,
    uiState: BrandFilterUiState,
    onBrandCategoryClick: (String) -> Unit
) {
    var selectedIndex by remember { mutableStateOf(-1) }

    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(25.dp)
    ) {
        itemsIndexed(uiState.categoryList) { index, categoryName ->
            CategoryText(
                categoryName = categoryName,
                isSelected = index == selectedIndex,
                onBrandCategoryClick = {
                    selectedIndex = index
                    onBrandCategoryClick(it)
                }
            )
        }
    }
}

@Composable
private fun CategoryText(categoryName: String, onBrandCategoryClick: (String) -> Unit, isSelected: Boolean) {
    
    val buttonColor: Color by animateColorAsState(
        targetValue = when (isSelected) {
            true -> FreshGreen
            false -> PastelPeach
        },
        animationSpec = tween()
    )

    Text(
        text = categoryName,
        modifier = Modifier
            .background(shape = RoundedCornerShape(24.dp), color = buttonColor)
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null
            ) {
                onBrandCategoryClick(categoryName)
            }
    )
}

z.g.y · Accepted Answer · 2022-11-23T17:08:35.650

I modified your code, where I lowered down the animation and the pressed state so the parent composable won't suffer from its own re-composition

@Composable
fun MyScreen(
    modifier: Modifier = Modifier,
    filterList: SnapshotStateList<String>
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(25.dp)
    ) {

        items(filterList) { filterName ->
            FilterText(
                filterName
            )
        }
    }
}

@Composable
fun FilterText(
    filter: String
) {

    var isPressed by remember { mutableStateOf(false) }
    val buttonColor: Color by animateColorAsState(
        targetValue = when (isPressed) {
            true -> Color.Blue
            false -> Color.Green
        },
        animationSpec = tween()
    )

    Text(
        text = filter,
        modifier = Modifier
            .background(shape = RoundedCornerShape(24.dp), color = buttonColor)
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .clickable {
                isPressed = !isPressed
            }
    )
}

Interesting, seems like when we recompose it does not maintain the scope of the clicked element in the list, thanks ! — SNM, Nov 23 '22 at 17:07

I cannot color single text from my list on click Jetpack Compose (single selection)

3 Answers3