Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/js-bhavyansh/lazy_staggered_grid
A lazy vertical staggered grid layout in Jetpack Compose with randomly colored boxes.
https://github.com/js-bhavyansh/lazy_staggered_grid
android jetpack-compose kotlin lazygrid
Last synced: 2 days ago
JSON representation
A lazy vertical staggered grid layout in Jetpack Compose with randomly colored boxes.
- Host: GitHub
- URL: https://github.com/js-bhavyansh/lazy_staggered_grid
- Owner: js-bhavyansh
- Created: 2024-08-07T13:29:00.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-07T16:13:18.000Z (3 months ago)
- Last Synced: 2024-10-21T10:02:02.680Z (about 1 month ago)
- Topics: android, jetpack-compose, kotlin, lazygrid
- Language: Kotlin
- Homepage:
- Size: 101 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lazy Staggered Grid in Jetpack Compose
This project demonstrates a lazy vertical staggered grid layout in Jetpack Compose, featuring randomly colored boxes of varying heights.
## Features
- Lazy vertical staggered grid layout.
- Randomly colored boxes with dynamic heights.
- Smooth scrolling and spacing between items.
## Screenshot
## Installation
1. Clone the repository:
```sh
git clone https://github.com/Bhavyansh03-tech/Lazy_Staggered_Grid.git
```
2. Open the project in Android Studio.
3. Sync the project with Gradle files.
## Usage
To use this layout in your project, include the `LazyVerticalStaggeredGrid` and `RandomColorBox` composables. Here is a brief example:
```kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val items = (1..100).map {
ListItem(
height = Random.nextInt(100, 300).dp,
color = Color(
Random.nextLong(0xFFFFFFFF)
).copy(alpha = 0.7f)
)
}
enableEdgeToEdge()
setContent {
LazyStaggeredGridTheme {
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(2),
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalItemSpacing = 16.dp
) {
items(items.size) {
RandomColorBox(items[it])
}
}
}
}
}
}
data class ListItem(
val height: Dp,
val color: Color
)
@Composable
fun RandomColorBox(item: ListItem) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(item.height)
.clip(RoundedCornerShape(10.dp))
.background(item.color)
)
}
```
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.
1. Fork the repository.
2. Create your feature branch (`git checkout -b feature/your-feature`).
3. Commit your changes (`git commit -am 'Add some feature'`).
4. Push to the branch (`git push origin feature/your-feature`).
5. Create a new Pull Request.
## Contact
For questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech).
---