jetpack compose - LazyColumn content spacing padding

Compose LazyColumn Content Spacing & Padding

The LazyColumn is a list widget of the jetpack compose library. LazyColumn is a similar widget to the RecyclerView widget. The LayColumn displays a vertically scrolling list that only composes and lays out the currently visible items.

The content of LazyColumn is its items. The following jetpack compose tutorial will demonstrate how we can set the padding around the LazyColumn content and also how we can set the spacing between its items.

The LazyColumn widget constructor has an argument name ‘contentPadding’ whose data type is ‘PaddingValues’. So, we can define the LazyColumn content padding using this argument. The LazyColumn content padding value actually puts padding around all its content, not for a single item. We can set the padding value for the LazyColumn content to all sides or any specific side/sides.

On the other hand, LazyColumn content spacing means, it puts space between each item of LazyColumn. LazyColumn constructor has another argument name ‘verticalArrangement’ whose data type is ‘Arrangement.Vertical’. This argument specifies the vertical arrangement of the LazyColumn children. We can pass an ‘Arrangement’ instance for this argument.

The ’Arrangement’ object is used to specify the arrangement of children in the layout. We can pass this ‘verticalArrangement’ argument value to the ‘Arrangement.spacedBy()’ function. This function has a required argument name ‘space’ whose data type is ‘Dp’. This ‘space’ argument allows us to put a specified space between LazyColumn items.

This jetpack compose tutorial code written in an android studio IDE. Copy the code and run it on an emulator or a real device to test how we put padding around LazyColumn content and put spacing between LazyColumn items. We also displayed a screenshot of this tutorial’s emulator screen at the bottom of this tutorial.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val list = (1..100).map { it.toString() }

        LazyColumn(
            modifier = Modifier
                .background(Color(0xFFAAF0D1))
                .fillMaxSize(),
            // content padding
            contentPadding = PaddingValues(
                start = 12.dp,
                top = 16.dp,
                end = 12.dp,
                bottom = 16.dp
            ),
            // content spacing
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(list){ txt ->
                Card(
                    backgroundColor = Color(0xFF009B7D),
                    modifier = Modifier.fillMaxWidth(),
                    elevation = 8.dp,
                    shape = RoundedCornerShape(12.dp)
                ) {
                    Text(
                        text = txt,
                        fontWeight = FontWeight.Bold,
                        fontSize = 35.sp,
                        color = Color(0xFFFFFFFF),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(25.dp)
                    )
                }
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}