jetpack compose - LazyRow content padding spacing

Compose LazyRow Content Padding & Spacing

The LazyRow is a list widget of the jetpack compose library. The LayRow displays a horizontally scrolling list that only composes and lays out the currently visible items.

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

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

LazyRow content spacing means it puts space between each item of LazyRow. The LazyRow constructor has another argument name ‘horizontalArrangement’ whose data type is ‘Arrangement.Horizontal. The ‘horizontalArrangement’ argument defines the horizontal arrangement of the LazyRow 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 ‘horizontalArrangement’ 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 LazyRow items.

This jetpack compose tutorial code written in an android studio IDE. Copy the code and run it on an emulator to see how we put padding around a LazyRow content and put spacing between its items. We also displayed a screenshot of this tutorial’s emulator screen at the bottom of this tutorial which will help you to understand the code without running it on an emulator device.

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.LazyRow
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() }

        LazyRow(
            modifier = Modifier
                .background(Color(0xFFFFAA1D))
                .wrapContentHeight()
                .fillMaxWidth(),
            // content padding
            contentPadding = PaddingValues(
                start = 16.dp,
                top = 24.dp,
                end = 12.dp,
                bottom = 32.dp
            ),
            // content spacing
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            items(list){ txt ->
                Card(
                    backgroundColor = Color(0xFFFF0800),
                    modifier = Modifier.fillMaxWidth(),
                    elevation = 8.dp,
                    shape = RoundedCornerShape(16.dp)
                ) {
                    Text(
                        text = txt,
                        fontWeight = FontWeight.Bold,
                        fontSize = 40.sp,
                        color = Color(0xFFFFFFFF),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(32.dp)
                    )
                }
            }
        }
    }


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