Compose LazyColumn select one item

Question

I want to select one item of my LazyColumn and change the textcolor. How is it possible to identify which item is selected?

Code:

val items = listOf(Pair("A", 1), Pair("AA", 144), Pair("BA", 99))
var selectedItem by mutableStateOf(items[0])
LazyColumn {
    this.items(items = items) {
        Row(modifier = Modifier.clickable(onClick = {selectedItem = it}) {
            if (selectedItem == it) {
                Text(it.first, color = Color.Red)
            } else {
                Text(it.first)
            }
        }
    }
}

Depending how I save it (with remember or without) they just highlight both if I click on one and not just the one I clicked the last.

Answer 1

Note that in the accepted answer, all the item views will be recomposed every time the selection changes, because the lambdas passed in onClick and content (of Row) are not stable (https://developer.android.com/jetpack/compose/lifecycle#skipping).

Here's one way to do it so that only the deselected and selected items are recomposed:

@Composable
fun ItemView(index: Int, selected: Boolean, onClick: (Int) -> Unit){
    Text(
        text = "Item $index",
        modifier = Modifier
            .clickable {
                onClick.invoke(index)
            }
            .background(if (selected) MaterialTheme.colors.secondary else Color.Transparent)
            .fillMaxWidth()
            .padding(12.dp)
    )
}

@Composable
fun LazyColumnWithSelection(){
    var selectedIndex by remember { mutableStateOf(0) }
    val onItemClick = { index: Int -> selectedIndex = index}
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
    ){
        items(100){ index ->
            ItemView(
                index = index,
                selected = selectedIndex == index,
                onClick = onItemClick
            )
        }
    }
}

Note how the arguments passed to ItemView only change for the items whose selected state changes. This is because the onItemClick lambda is the same all the time.

Answer 2

There is a clickable modifier which allows easy detection of a click, and it also provides accessibility features and displays visual indicators when tapped (such as ripples).

@Composable
fun ClickableSample() {
  val count = remember { mutableStateOf(0) }
  // content that you want to make clickable
  Text(
    text = count.value.toString(),
    modifier = Modifier.clickable { count.value += 1 }
  )
}

For more information see https://developer.android.com/jetpack/compose/gestures