LazyGrid
LazyGrid library for Jetpack Compose.
About
LazyGrid is a grid view implementation for Android's new and modern UI toolkit Compose. This library is suitable for to display large amount of data, it'll only compose the rows which are visible in the component’s viewport. It can be used in a LazyColumn to create a grid view.
LazyCollapsibleGrid version has the ability to collapse desired amount of rows with animations. It has some extra parameters but is also lazy and suitable for to display big data.
Metrics
Metrics is the way of measuring the performance of composables. Ideally a composable method should be restartable and skipabble for the compiler to work with best performance. Besides being lazy, LazyGrid and LazyCollapsibleGrid are also restartable and skipabble for better performance for your Android application.
Demo
FillSize
All items of row shares the full width equally without any spaces.
| LazyGrid | LazyCollapsibleGrid |
|---|---|
 |
 |
FixedSize
Items placed with a fixed width and spaced equally according to remaining space.
| LazyGrid | LazyCollapsibleGrid |
|---|---|
 |
 |
SpacedBy
Items spaced by a fixed space and share the remaining width equally.
| LazyGrid | LazyCollapsibleGrid |
|---|---|
 |
 |
Setup
Gradle
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.yusufarisoy:lazy-grid:1.0.0'
}
Composable
LazyColumn(modifier = Modifier.fillMaxSize()) {
LazyGrid(
rows = listOf(),
elementPerRow = 4,
itemPlacementType = ItemPlacementType.FixedSize(itemWidth = 80.dp),
contentPadding = PaddingValues(horizontal = 16.dp)
) { item, modifier ->
CustomGridItem(item, modifier)
}
// Collapsible
var isExpanded by remember { mutableStateOf(false) }
LazyCollapsibleGrid(
rows = listOf(),
collapsibleRows = listOf(),
elementPerRow = 3,
itemPlacementType = ItemPlacementType.SpacedBy(space = 16.dp),
contentPadding = PaddingValues(horizontal = 16.dp),
isExpanded = isExpanded,
enterTransition = expandVertically(),
exitTransition = shrinkVertically(),
collapseButton = { CustomCollapseButton(onClick = { isExpanded = !isExpanded }) }
) { item, modifier ->
CustomGridItem(item, modifier)
}
}
23 Aug 24, 2022
9 Jul 5, 2022
43 Dec 29, 2022
10 Nov 23, 2022
73 Dec 24, 2022
176 Nov 22, 2022
59 Dec 14, 2022
4 May 1, 2022
1 Mar 8, 2022
186 Jan 1, 2023
382 Jan 5, 2023
3 Dec 31, 2022
1 Aug 11, 2022
180 Jan 2, 2023
5 Apr 5, 2022
3 Dec 15, 2022
5 Dec 29, 2022
548 Jan 7, 2023
14 Dec 21, 2022