How to set Padding for Text in Android Jetpack Compose?

Android Compose – Set Padding for Text

To set padding for Text composable, in Android Jetpack Compose, assign modifier parameter of Text with Modifier companion object, where padding() method is called on the Modifier. Pass required padding value in the padding() function call.

The following is a sample code snippet to set the padding for Text composable.

import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Text(
	"Hello World",
	modifier = Modifier.padding(all = 20.dp)
)
Text(
	"Hello World",
	modifier = Modifier.padding(horizontal = 20.dp)
)
Text(
	"Hello World",
	modifier = Modifier.padding(vertical = 20.dp)
)
Text(
	"Hello World",
	modifier = Modifier.padding(top = 20.dp)
)
Text(
	"Hello World",
	modifier = Modifier.padding(end = 20.dp)
)
Text(
	"Hello World",
	modifier = Modifier.padding(bottom = 20.dp)
)
Text(
	"Hello World",
	modifier = Modifier.padding(start = 20.dp)
)

Make sure to import padding, Modifier and dp.

Example

Create an Android Application with Jetpack Compose as template, and modify MainActivity.kt as shown in the following.

In the following activity, the padding of Text composable is set to 20dp on all sides. Also, background color is set for this Text composable to understand the extent of Text and see the padding.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(
                        "Hello World",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(all = 20.dp)
                    )
                }
            }
        }
    }
}

Screenshot in Emulator

Text with No-padding and Padding

Let us define two Text composables, with no padding and 20dp padding on all sides respectively.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(
                        "Hello World",
                        fontSize = 20.sp,
                        modifier = Modifier.background(Color.LightGray)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Hello World",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(all = 20.dp)
                    )
                }
            }
        }
    }
}

Screenshot in Emulator

Text with Different Types of Paddings

Now, let us compare all the padding options like, padding on all sides, padding vertically, padding horizontally, padding on left, padding on right, padding on top, padding on bottom.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(
                        "No Padding",
                        fontSize = 20.sp,
                        modifier = Modifier.background(Color.LightGray)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on all sides",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(all = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on Horizontal edges",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(horizontal = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on Vertical edges",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(vertical = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on top",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(top = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on bottom",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(bottom = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on left",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(start = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Padding on right",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(end = 20.dp)
                    )
                }
            }
        }
    }
}

Screenshot in Emulator

Text with Different Padding Values

Now, let us try with different paddings. We will take two Text composables, the first with 20dp padding, and the second with 40dp padding.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(
                        "Hello World",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(all = 20.dp)
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "Hello World",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(all = 40.dp)
                    )
                }
            }
        }
    }
}

Screenshot in Emulator

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to set padding for Text composable in Android Project with Jetpack Compose.