Weights in Jetpack compose
Solution 1
You can use the Modifier.weight
Something like:
Row() {
Column(
Modifier.weight(1f).background(Blue)){
Text(text = "Weight = 1", color = Color.White)
}
Column(
Modifier.weight(2f).background(Yellow)
) {
Text(text = "Weight = 2")
}
}
Solution 2
Since "0.1.0-dev09" modifiers are moved on an interface, you can use
Modifier.weight(float, boolean)
to divide the vertical/horizontal space remaining after measuring unweighted child elements and distribute it according to this weight
Column {
Row(modifier = Modifier.weight(2.0f, true)) {
Box (
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
backgroundColor = Color.Red
)
}
Row(modifier = Modifier.weight(1.0f, true)) {
Box (
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
backgroundColor = Color.Blue,
gravity = ContentGravity.Center
) {
Text(text = "A sample text")
}
}
Row(modifier = Modifier.weight(2.0f, true)) {
Box (
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
backgroundColor = Color.Yellow
)
}
}
Solution 3
The "0.1.0-dev04" release of Jetpack Compose contains changes, and FlexRow is deprecated. I can propose the following solution:
Row {
Card(modifier = LayoutFlexible(1f), color = Color.Red) {
Container(expanded = true, height = 50.dp) {
}
}
Card(modifier = LayoutFlexible(2f), color = Color.Green) {
Container(expanded = true, height = 50.dp) {
}
}
}
The LayoutFlexible(flex = _f) helps us to solve the issue and Modifier can be applied to any container.
Solution 4
Use Modifier.weight(float) on the objects inside a container.
You could also use constraintlayout or the Low Level Layout
Composable. Check out the official compose layout codelab in compose pathways for more info on the same
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on June 11, 2022Comments
-
Admin about 2 years
Is it possible to do weights in Jetpack Compose? For example, I'd like to set it up in such a way that one item is weighted as 1/3 of a layout, and the other takes up the remaining 2/3.
In the XML/ViewGroup style, you can achieve this using LinearLayouts and ConstraintLayouts. To my dismay, however, it doesn't seem possible using Jetpack Compose.
Example:
In ConstraintLayout, this is done as follows:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <View android:layout_width="0dp" android:layout_height="100dp" android:id="@+id/red" android:background="@color/red" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@+id/blue" app:layout_constraintHorizontal_weight="1"/> <View android:layout_width="0dp" android:layout_height="100dp" android:id="@+id/blue" android:background="@color/blue" app:layout_constraintStart_toEndOf="@id/red" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_weight="2"/> </androidx.constraintlayout.widget.ConstraintLayout>
In LinearLayouts, this is done as follows:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <View android:layout_width="0dp" android:layout_height="100dp" android:id="@+id/red" android:background="@color/red" android:layout_weight="1"/> <View android:layout_width="0dp" android:layout_height="100dp" android:id="@+id/blue" android:background="@color/blue" android:layout_weight="2"/> </LinearLayout>
I know that you can use Tables to get evenly distributed things, but I want an uneven distribution.