EN
RU
ES
ZH
FR
DE
PT
AR
HI
Why Won't Column Obey? The Curse of Centering in Jetpack Compose
\nHave you ever sat late at night with a cup of coffee, writing Kotlin code for Jetpack Compose, and suddenly noticed that your Column stubbornly refuses to center its content? You add Modifier.align(Alignment.CenterHorizontally) — but the text still sticks to the left edge. Sound familiar?
This problem is a real hit on Stack Overflow. Thousands of developers (myself included) have banged their heads against the screen trying to figure out where the "gravity center" went. In this article, we'll break down the top mistakes that turn your Column into an uncontrollable list and learn how to avoid them. Get ready: there will be lots of code, live examples, and no fluff.
\n\nMistake #1: Confusing Column and Row
\nThe first and most common pitfall is carrying over habits from classic Android XML. There, LinearLayout had the attribute gravity="center". In Compose, it's different.
Key difference: Column arranges elements vertically. Therefore, "horizontal centering" is not a property of the Column itself, but the behavior of its child elements. If you write:
Column(\n modifier = Modifier.fillMaxSize(),\n horizontalAlignment = Alignment.CenterHorizontally\n) {\n Text("Hello, world!")\n}Here, horizontalAlignment works, but only if the Text itself is not constrained in width. And if you have Modifier.fillMaxWidth() on the child element — centering will break. Why? Because the element stretches to the full width, and there's nothing left to center inside it.
Mistake #2: Using Modifier.align() Instead of horizontalAlignment
\nHere's a classic trap code that circulates on Stack Overflow:
\nColumn(\n modifier = Modifier.fillMaxSize()\n) {\n Text(\n text = "I should be centered",\n modifier = Modifier.align(Alignment.CenterHorizontally)\n )\n}At first glance — it seems logical. But this won't work if the Column doesn't have horizontalAlignment set. The thing is, Modifier.align() is a modifier for Box and ColumnScope. It is available only inside a Column, but works in conjunction with horizontalAlignment. If the latter is not specified, align is simply ignored.
How to fix it:
\nColumn(\n modifier = Modifier.fillMaxSize(),\n horizontalAlignment = Alignment.CenterHorizontally // mandatory!\n) {\n Text(\n text = "Now I'm centered",\n modifier = Modifier.align(Alignment.CenterHorizontally) // optional\n )\n}Mistake #3: Forgetting About Arrangement for Vertical Centering
\nOften, developers want to center the Column's content vertically (along the Y-axis). This is where verticalArrangement comes into play:
Column(\n modifier = Modifier.fillMaxSize(),\n verticalArrangement = Arrangement.Center,\n horizontalAlignment = Alignment.CenterHorizontally\n) {\n Text("Center of the universe")\n Button(onClick = { }) { Text("Button") }\n}But there's a nuance: Arrangement.Center will only work if the Column takes up the full screen height (Modifier.fillMaxSize() or Modifier.height(IntrinsicSize.Min)). If the Column's height equals the sum of its children's heights — there's nothing to center within.
Mistake #4: IntrinsicSize and Unexpected Behavior
\nSometimes you add Modifier.height(IntrinsicSize.Min) to make the Column shrink to its content. And then vertical centering breaks:
Column(\n modifier = Modifier\n .fillMaxWidth()\n .height(IntrinsicSize.Min),\n verticalArrangement = Arrangement.Center\n) {\n Text("Text 1")\n Text("Text 2")\n}Problem:
Blogs
Book Recommendations
Read also
