Showing menu items in multiple food & drinks apps is one of the best use cases for multiple lists interaction, Let’s create a simple implementation with Jetpack Compose 🚀

We’ll cover all of the following points :

• Show menu items list labeled by sections
• Show sections list and highlight the selected one
• On menu items list scroll, highlight the sections list with the displayed section
• On click on section name, jump to the menu items list section position

Show menu items list labeled by sections

This is a simple list for all menu items labeled & indexed by sections title

• itemsListState is a LazyListState which will be used to handle auto scroll which will be discussed later
• onPostScroll used to detect a scroll action on the menu items list, called from nestedScroll modifier

And this is the MenuItemView, just a simple view to show section items:

Show sections list and highlight the selected one

This is a simple list to show sections titles in a row and used SectionTextView to show and highlight the selected section:

SectionTextView will also show an underline to the selected section item, the underline width textWidth should always match the text size so it is measured on onGloballyPositioned modifier:

On menu items list scroll, highlight the sections list with the displayed section

The main parent view which will handle both lists interactions is MenuView

It will hold the current selection and handle onPostScroll event from the menu items list view

• Update the selected section index
• Scroll through the sections list to the selected section title position

On click on section name, jump to the section menu items list position

MenuViewwill also handle section title click event

• Update the selected section index
• Scroll through the items list to the selected section position
• Scroll through the sections list to the selected section title position

Finally the MenuViewwill be like this:

That’s it! You made it! 💪

Do you see anything missing? please comment!

Thanks for reading, see you in the next article 😊