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:
| @Composable | |
| fun SectionTextView( | |
| modifier: Modifier = Modifier, | |
| text: String, | |
| isSelected: Boolean | |
| ) { | |
| Column(modifier) { | |
| var textWidth by remember { mutableStateOf(0.dp) } | |
| val density = LocalDensity.current | |
| Text( | |
| modifier = Modifier.onGloballyPositioned { | |
| textWidth = with(density) { it.size.width.toDp() } //update text width value according to the content size | |
| }, | |
| text = text, | |
| style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold), | |
| color = if (isSelected) Purple200 else Color.DarkGray | |
| ) | |
| //Show the text underline with animation | |
| AnimatedVisibility( | |
| visible = isSelected, | |
| enter = expandHorizontally() + fadeIn(), | |
| exit = shrinkHorizontally() + fadeOut() | |
| ) { | |
| Box( | |
| Modifier | |
| .width(textWidth) | |
| .padding(top = 15.dp) | |
| .height(3.dp) | |
| .background(Purple200) | |
| ) {} | |
| } | |
| } | |
| } |
OUR VIDEO RECOMMENDATION
Jobs
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
MenuView will 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 MenuView will 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 😊
This article was originally published on proandroiddev.com on July 13, 2022
