Highlight and scroll to list item with Jetpack Compose

Sometimes we need to highlight item in a list to draw user’s attention or before opening item details so that user doesn’t get lost. Here’s how implement that with Jetpack Compose.

Preparation

Let’s create a simple list item and a model for it.

This code results in an item like this:

List item

Next up is simple lazy list

The Highlight

Now let’s go to the fun part. First of all we need a state holder/controller. In real world this would probably be a ViewModel. Also let’s create a state model, so we can use single StateFlow.

We’ll scroll the list using LaunchedEffect and highlight required item by passing Modifier to it.

Contgrats, you’re all done 🎉

Find full code here