CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-layout
mac229
mac229

Reputation: 4859

Jetpack Compose - Column - Gravity center

I'm creating a layout with Jetpack Compose and there is a column. I would like center items inside this column:

 Column(modifier = ExpandedWidth) {
        Text(text = item.title)
        Text(text = item.description)
 }

Upvotes: 188

Views: 269238

Answers (19)

Syed Ibrahim
Syed Ibrahim

Reputation: 476

Column view's alignings

You can find details in attachment by looking figures of all possibilities of aligning view inside column. Hope it helps you!

    //View Center Horizontally Only
    
    Column(modifier =  Modifier.fillMaxSize(),horizontalAlignment = Alignment.CenterHorizontally){
                
//code
                
}
        
        
    //View Center Vertically Only
    
    Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center){
                
    //code
                
    }
        
        
    //View Center Horizontally and Vertically
    
    Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally){
                
    //code
                
    }

Upvotes: 28

DavidUps
DavidUps

Reputation: 420

Text(
    textAlign = TextAlign.Center,
    text = "We are making some improvements. Please, try again later."
)

Upvotes: -4

Hasan Ali
Hasan Ali

Reputation: 151

 Column(
     modifier = Modifier.fillMaxSize(),
     verticalArrangement = Arrangement.Center,
     horizontalAlignment = Alignment.CenterHorizontally
     ){
       // Child Composable Here Like Text, Row, Box, Image ... more 
     }

verticalArrangement -> Make all Child Composable Center Vertically to Column(Parent)

horizontalAlignment -> Make all Child Composable Center Horizontally to Column(Parent)

Upvotes: 7

ankuranurag2
ankuranurag2

Reputation: 2441

Update: This answer is outdated.

You can use Column(crossAxisAlignment = CrossAxisAlignment.Center) . It works like gravity.

Upvotes: 0

Bincy Baby
Bincy Baby

Reputation: 4743

You can use

Text(
  text = item.title,
  textAlign = TextAlign.Center,
  modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
)
  • textAlign is for aligning text inside the box.
  • Modifier.align() is for aligning text box inside column

Upvotes: 108

Amin Keshavarzian
Amin Keshavarzian

Reputation: 3963

Alternatively you can create your own composable and use it everywhere:

@Composable
fun Center( modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        content = content
    )
}

And you use like this:

Center {
    Text(text = "Text 1")
    Text(text = "Text 2")
}

Upvotes: 13

markcadag
markcadag

Reputation: 291

if you are using 0.1.0-dev09 you can modify the gravity or arrangement attributes by using the parameters horizontalAlignment and verticalArrangement

@Composable
fun centeredColumn() {
    return Column (
        modifier = Modifier.height(100.dp), 
        horizontalAlignment = Alignment.CenterHorizontally, 
        verticalArrangement = Arrangement.Center
    ) {
            Image(asset = imageResource(id = R.drawable.ic_emojo_logo_white))
            Text(text = stringResource(id = R.string.login_subtitle))
    }
}

Upvotes: 3

Jim Ovejera
Jim Ovejera

Reputation: 876

You can also use textAlign property of Text composable

Text(
    modifier = Modifier.fillMaxWidth(),
    text = item.title,
    textAlign = TextAlign.Center
)
Text(
    modifier = Modifier.fillMaxWidth(),
    text = item.description,
    textAlign = TextAlign.Center
)

Upvotes: 5

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

You can use these parameters:

Something like:

Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
) {
        Text(
                text = "First item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Second item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Third item",
                modifier = Modifier.padding(16.dp)
        )
}

enter image description here

If you want only to center horizontally just use:

Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
) {
    Column (  ) { ... }

enter image description here

Upvotes: 336

ruif3r
ruif3r

Reputation: 121

I don't like it too much, but this is what it worked to me:

Column(modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center) {
                //Your composable elements
            }

Compose 1.0.0-beta07

Upvotes: 6

Nana kTk
Nana kTk

Reputation: 261

Use this

   Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    )

Upvotes: 13

vibhor chinda
vibhor chinda

Reputation: 121

Text(
 "Hello World", 
 textAlign = TextAlign.Center,
 modifier = Modifier.width(150.dp)
)

You can use TextAlign attribute to center the texts.

Reference - https://developer.android.com/jetpack/compose/text

Upvotes: 11

EunhaEonnie
EunhaEonnie

Reputation: 235

use

modifier = Modifier.align(Alignment.CenterHorizontally)

Upvotes: 2

SagaRock101
SagaRock101

Reputation: 159

In case if you are using lazyColumn to load list and want make whole item center you can use this

LazyColumn( horizontalAlignment = Alignment.CenterHorizontally) {

}

Upvotes: 3

KingKongCoder
KingKongCoder

Reputation: 690

To center horizontally

Column(modifier = Modifier.fillMaxWidth()) {
        Text(text = item.title)
        Text(text = item.description)
 }

To center both horizontally and vertically in the parent surface

Column(modifier = Modifier.fillMaxWidth().fillMaxHeight(), verticalArrangement = Arrangement.Center) {
        Text(text = item.title)
        Text(text = item.description)
 }

Upvotes: 1

Vinay Gaba
Vinay Gaba

Reputation: 1214

This is how you do it as of the latest version of compose(0.1.0-dev05)

For you to center the text inside this container, you need to use the LayoutAlign modifier.

Column(modifier = LayoutWidth.Fill + LayoutAlign.Center) {
    Text(text = item.title)
    Text(text = item.description)
}

Upvotes: 1

Pankaj
Pankaj

Reputation: 139

You could use FlexColumn to bring content in the center as it supports CrossAxisAlignment.

FlexColumn(crossAxisAlignment = CrossAxisAlignment.Center) {
    inflexible {
        Text(text = item.title)
        Text(text = item.description)
    }
}

Warp it inside inflexible so that widgets will not occupy the full screen.

In the same way if you want to bring views to the center of the screen with FlexColumn than use mainAxisAlignment along with crossAxisAlignment

FlexColumn(mainAxisAlignment = MainAxisAlignment.Center,
        crossAxisAlignment = CrossAxisAlignment.Center) {
    inflexible {
        Text(text = item.title)
        Text(text = item.description)
    }
}

Upvotes: 0

Klaas Kabini
Klaas Kabini

Reputation: 175

You have the option to apply gravity on the individual items as follows then it will center the items. 

Column(modifier = ExpandedWidth) {
       Text(modifier = Gravity.Center, text = item.title)
       Text(modifier = Gravity.Center, text = item.description)
}

Upvotes: 3

AskNilesh
AskNilesh

Reputation: 69724

You can use Arrangement.Center

  • Place child components as close to the center of the main axis

SAMPLE CODE

@Composable
fun Column(

    arrangement: Arrangement = Arrangement.Center,

)

Upvotes: 4

Related Questions