how to add space between grid items in jetpack compose

Question

I am currently trying to implement a gridview, it consists of 2 columns. I know i can implement my own grid view using columns and rows, but i just want to use existing approach although it is experimental.

@Composable
fun MyGridScreen() {
    LazyVerticalGrid(cells = GridCells.Fixed(2), modifier = Modifier.fillMaxSize(),contentPadding = PaddingValues(12.dp)) {
        items(15) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .padding(10.dp)
                    .height(80.dp)
                    .background(Color.Red)
                    .aspectRatio(1f)

            ) {
                Text("Grid item $it", color = Color.White)
            }
        }
    }
}

Below is the result i achieved. I can't put space below the item :(

There's no margin in Jetpack compose. However I think it is because the API is still experimental. Implement your own while it is unstable — Richard Onslow Roper, Aug 01 '21 at 13:11

Rafsanjani · Answer 1 · 2021-10-14T12:59:50.290

51

You need to set verticalArrangement and horizontalArrangement properties on the LazyVerticalGrid composable.

This will space the items by 10.dp in both the vertical and horizontal axis.

 @Composable
    fun MyGridScreen() {
        LazyVerticalGrid(
           cells = GridCells.Fixed(2),
           modifier = Modifier.fillMaxSize(),
           contentPadding = PaddingValues(12.dp), 
           verticalArrangement = Arrangement.spacedBy(10.dp), 
           horizontalArrangement = Arrangement.spacedBy(10.dp
         ) {
              items(15) {
                 Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .padding(10.dp)
                        .height(80.dp)
                        .background(Color.Red)
                        .aspectRatio(1f)

                ) {
                    Text("Grid item $it", color = Color.White)
            }
        }
    }
}

edited Oct 14 '21 at 12:59

answered Aug 02 '21 at 09:25

Rafsanjani

4,352
1
14
21

2

`LazyVerticalGrid` doesn't have `verticalArrangement` or `horizontalArrangement`. – Khantahr Aug 07 '21 at 03:46
@Ralgha You may combine cell padding + grid contentPadding for spacedBy emulation – vitidev Aug 07 '21 at 08:34
@Ralgha What version of compose are you using? `LazyVerticalGrid` has `verticalArrangement` and `horizontalArrangement` used for cell spacing – Rafsanjani Aug 07 '21 at 08:44
I'm using 1.0.1. – Khantahr Aug 08 '21 at 02:20
this answer should checked as correct answer – Vahid Dec 11 '21 at 11:54
3

In `1.0.5` I don't see `verticalArrangement` or `horizontalArrangement` available. But they appear in `1.1.0-beta04` . – daniyelp Dec 14 '21 at 21:18

Phil Dukhov · Answer 2 · 2021-08-02T05:01:38.977

3

Padding is exactly what you need in this case. But you need to understand that in compose modifiers order means a lot. By moving background modifier in between padding and sizes modifiers, you'll get what you need. And clickable ripple will work the same.

Check out more how modifiers order works: https://stackoverflow.com/a/65698101/3585796

.padding(10.dp)
.background(Color.Red)
.height(80.dp)
.aspectRatio(1f)

p.s. if you need your items to be a square, just put your box in one more box. Looks like width of items in LazyVerticalGrid gets overridden by the grid to fill max width, not sure if that's a bug or a feature.

edited Aug 02 '21 at 05:01

answered Aug 01 '21 at 16:37

Phil Dukhov

67,741
15
184
220

Doesn't make much sense – Richard Onslow Roper Aug 01 '21 at 16:49
I've faced this thing before in an app. Weird – Richard Onslow Roper Aug 01 '21 at 16:50
@MARSK check out this answer, it's a good explanation how does modifiers work: https://stackoverflow.com/a/65698101/3585796 – Phil Dukhov Aug 02 '21 at 04:59
setting padding for spacing will also add extra space oh the edge of LazyVerticalGrid – Vahid Sep 06 '21 at 14:02
@Philip Dukhov I mean spacing between edges item's and middle item's are not equal because middle item space is made up by two padding but edge's just have one – Vahid Sep 07 '21 at 02:12
@Vahid I see what you mean, but if you make `contentPadding` equal to `padding` the spacing will be the same – Phil Dukhov Sep 07 '21 at 03:59

how to add space between grid items in jetpack compose

2 Answers2