Layout

Layout is a flexible grid system component that allows you to organize content in a customizable grid format with configurable columns and spacing.

Layout(
    id = "basic-grid",
    items = listOf("Column", "Column", "Column", "Column"),
    columns = 4,
    horizontalSpacing = 16,
    verticalSpacing = 16
) { item ->
    Box(
        modifier = Modifier
            .aspectRatio(1f)
            .background(Color(0xff09CC3A)),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = item,
            color = PrimitiveColors.White
        )
    }
}

Usage

import id.co.biofarma.binduiandroid.components.layout.Layout

Layout(
    id = "basic-grid",
    items = (1..4).toList(),
    columns = 2
) { item ->
    Box(
        modifier = Modifier
            .aspectRatio(1f)
            .background(PrimitiveColors.InnovationBlue_200),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = item.toString(),
            color = PrimitiveColors.White
        )
    }
}

Examples

Columns (optional)

Use columns to determine the number of columns in the grid (maximum 4).

Layout(
    id = "four-column-grid",
    items = (1..8).toList(),
    columns = 8
) { item ->
    Box(
        modifier = Modifier
            .aspectRatio(1f)
            .background(PrimitiveColors.InnovationBlue_200),
        contentAlignment = Alignment.Center
    ) {
        Text(text = item.toString())
    }
}

Spacing (optional)

Use horizontalSpacing and verticalSpacing to adjust the gap between grid items.

Layout(
    id = "custom-spacing-grid",
    items = (1..4).toList(),
    columns = 2,
    horizontalSpacing = 16,
    verticalSpacing = 24
) { item ->
    Box(
        modifier = Modifier
            .aspectRatio(1f)
            .background(PrimitiveColors.InnovationBlue_200),
        contentAlignment = Alignment.Center
    ) {
        Text(text = item.toString())
    }
}

Props

Notes

1. Implementation Details

   • Built using LazyVerticalGrid for efficient rendering and recycling of items
   • Automatically fills the maximum available size with fillMaxSize()
   • Includes a testTag with the provided ID for UI testing purposes

2. Column Limitations

   • Maximum number of columns is capped at 4 using columns.coerceAtMost(4)
   • If you specify more than 4 columns, it will automatically be adjusted to 4

3. Spacing

   • Spacing values are in density-independent pixels (dp)
   • Uses Arrangement.spacedBy() for consistent spacing between items
   • Horizontal and vertical spacing can be set independently

4. Generic Type Support

   • The component is generic (<T>) and can work with any type of data
   • The itemContent lambda allows for custom rendering of each item

5. Best Practices

   • Provide a meaningful ID when using the component for testing purposes
   • Consider screen size when choosing the number of columns
   • Use consistent spacing values throughout your application
   • Implement proper accessibility features in the itemContent