Reports

Good afternoon Sir, it seems that in your @Preview WoofPreview(), in the component DogCard(), you are using LazyColumn().

To achieve the desired design result you should add vertical and horizontal alignments including content padding.

LazyColumn(
    contentPadding = PaddingValues(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(dogs) {
        DogItem(dog = it)
    }
}

Now, that will achieve the gap and padding to be equal and separated from another cards and from the screen.

Now you will want to cover that up with a surface to achieve that greenish color. To achieve that you use the property tonalElevation to go from a pure white to a not pure and greenish color.

Surface(
  tonalElevation = 1.dp,
) {
  LazyColumn { ... }
}

Finally, to achieve the color in the card you should use in DogItem the parameter "colors" to customize your own color.

Card(
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant,
    ),
    /*other parameters*/
) {
  /* content */
}

Friendly reminder, sometimes the content that exist in CodeLabs is outdated and things can, may or could change.

79345500