Display nested scrolling items in a list
Stay organized with collections
Save and categorize content based on your preferences.
You can display nested scrolling items within a list to present complex layouts,
such as product catalogs, media galleries, news feeds, and more.
Version compatibility
This implementation requires that your project minSDK be set to API level 21 or
higher.
Dependencies
The following code produces a list that scrolls two ways. The rows of the list
scroll horizontally; the list as a whole—a single column—scrolls vertically.
@Composable
fun NestedScrollingRowsList(urls: List<String>) {
LazyColumn {
items(10) {
LazyRow {
item { Text("Row: $it") }
items(urls.size) { index ->
// AsyncImage provided by Coil.
AsyncImage(
model = urls[index],
modifier = Modifier.size(150.dp),
contentDescription = null
)
}
}
}
}
}
Results
The following video shows the resulting behaviors of nested horizontal lists
within a vertical scrolling list.
Collections that contain this guide
This guide is part of these curated Quick Guide collections that cover
broader Android development goals:
Display a list or grid
Lists and grids allow your app to display collections in a
visually pleasing form that's easy for users to consume.
Display interactive components
Learn how composable functions can enable you to easily
create beautiful UI components based on the Material Design design
system.
Compose basics (video collection)
This series of videos introduces various Compose APIs,
quickly showing you what’s available and how to use them.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-02-06 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-02-06 UTC."],[],[]]