In this jetpack compose tutorial I share How to use the center to Align the content of a Column using Android Compose? Jetpack Compose Column Gravity center.
Within this post, we’ll be introduced tothe Column role in the Jetpack Compose.
It is Jetpack Compose is a modern toolkit that allows you to create a native Android UI.It streamlines and speeds up the UI development process on Android with fewer lines of code, more powerful tools, and a user-friendly Kotlin API.
2.Jetpack compose column
Thecolumncan be described as a layout composable which places its elements in a vertical order, whereas RowRowputs the items vertically across the display.BothRowas well asRowallow for the configuration of the order of the elements they comprise.
In addition, you can arrange the elements in Column in different positions. You can also position the items ofColumndifferently , and alter the horizontal orientation that it. You can also alter the horizontal alignment ofColumnwithin the layout of the layout that is the parent.In order to make thecolumnscrollable, check out
2.1.Jetpack column positioning (alignment)
The Column that can be repositionableColumnis able to support the following behavior of positioning:
- Vertical arrangement (Used to define how vertically arranged Layout’s subordinate layouts withincolumnlayouts)
- Horizontal alignment (Used to describe how horizontally aligned the horizontal alignment of acolumnlayout within a layout that is parent.)
If you examine how the syntax works for theColumncomposable it takes its parameterVerticalArrangementas well ashorizontalAlignmentthat you can use to arrange on theColumnarrangement as well as its children.
@Composable): Unit
2.2.Horizontal alignment of columns
It is possible to define an vertical orientation of thecolumnlayout within a parent layout by defining thehorizontalAlignmentparameter.It can be used to align the following layouts:
Alignment.Start(at the beginning of the layout in the parent layout)Alignment.CenterHorizontally(center horizontally in the parent layout)Alignment.End(aligns at the top of the layout that was created by the parent layout)
For instance, the following Composable functiongreetingincludes oneColumnwith a Text"Lorem ipsum"as well as a differentcolumn.Let’s assign different horizontal alignments to the primarycolumnand then check the placement of the text on the window of preview.
Column – Align Center Horizontally
To center align the content of Column the long horizontal axis in Android Compose, set horizontalAlignmentparameter with the value ofAlignment.CenterHorizontally.
Also, we may fill the maximum width by the Column using Modifier.fillMaxWidth().
Android Jetpack Compose Column Gravity center
In this case, we’ll show a Column that has three Text Composables in the content.We will center the contents of the Column on its horizontal axis and the width that is available.
Create a new project in Android Studio to choose the Empty Compose Activity and open your MainActivity.kt file to used the code below.
class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme {Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.border(1.dp, Color.Red, RectangleShape).fillMaxWidth().padding(20.dp)) {Text("Hello Codeplayon")Text("0987654321")Text("ABCDE")}}}}It is important to note that the column is filled to the max width that is available.
If the Column isn’t filled to the width that is available the size of the Column is adjusted to the dimension of the contents.For the example below the Column is specified with it’s default width.The width is not explicit.
Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.border(1.dp, Color.Red, RectangleShape).padding(20.dp)) {Text("Hello World")Text("0123456789")Text("XYZ")}The border of Column is set to a red color to help us see the boundaries of the Column.
The tutorial in this Android Jetpack Compose Tutorial we’ve learned how to center align the content in a Column in horizontal axis in Android Jetpack Compose.
Read More Tutorial