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 to the 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
Table of Contents
The column can be described as a layout composable which places its elements in a vertical order, whereas Row Row puts the items vertically across the display. Both Row as well as Row allow 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 of Column differently , and alter the horizontal orientation that it. You can also alter the horizontal alignment of Column within the layout of the layout that is the parent. In order to make the column scrollable, check out
2.1. Jetpack column positioning (alignment)
The Column that can be repositionable Column is able to support the following behavior of positioning:
- Vertical arrangement (Used to define how vertically arranged Layout’s subordinate layouts within column layouts)
- Horizontal alignment (Used to describe how horizontally aligned the horizontal alignment of a column layout within a layout that is parent.)
If you examine how the syntax works for the Column composable it takes its parameter VerticalArrangement as well as horizontalAlignment that you can use to arrange on the Column arrangement as well as its children.
@Composable
): Unit
2.2. Horizontal alignment of columns
It is possible to define an vertical orientation of the column layout within a parent layout by defining the horizontalAlignment parameter. 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 function greeting includes one Column with a Text "Lorem ipsum" as well as a different column. Let’s assign different horizontal alignments to the primary column and 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 horizontalAlignment parameter with the value of Alignment.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