I have multiple composables (Text) forming a visual column and I would like to make them have the same width (though not necessarily for themselves, but to make column 2 aligned)
The problem is I can't just move the column dimension inside (column of rows -> row of columns) because there are other elements involved (red is set to consume all available space and yellow takes up the whole width):
I've looked into SubcomposeLayout but I can't see how I could fit the whole thing inside and measure the texts.
My current layout looks like this:
Column (parent layout)
Row
Text 1
...
Column with foreach x in 2,3,4
Column
Row
Text x
I only have to work with a limited and static set of texts so worst case, I will add all of them into each field and make all but one invisible, but even a solution where I do this just once, measure it and only apply defaultMinSize to all of them would be nice.
Edit: I don't think this is achievable by simple weights
Just apply the weight modifier:
Column(
) {
Row(Modifier.fillMaxWidth()){
Text("Text1",Modifier.weight(1f).border(1.dp, Black))
Text("Text2",Modifier.weight(1f).border(1.dp, Black))
Text("Text3",Modifier.weight(1f).border(1.dp, Black))
}
Row(Modifier.fillMaxWidth()){
Box(Modifier.fillMaxWidth().height(20.dp).background(Yellow))
}
Row(Modifier.fillMaxWidth()){
Text("Text1",Modifier.weight(1f).border(1.dp, Black))
Text("Text2",Modifier.weight(1f).border(1.dp, Black))
Text("Text3",Modifier.weight(1f).border(1.dp, Black))
}
}
Related
I want the items of the first column to stretch their height depending on the total height of the other column in the row.
Now I have it:
And I want it to be like that:
Is this possible without hardcoding the height through calculations?
Use compose arrangement 'equal weight' according to this documentation link
Modifier.weight()
I have a FlowRow with an unknown number of items.
I want to wrap this FlowRow with an expandable composable: The expanded height should show all items. The folded view will cover up everything except say, 100.dp.
Column {
FlowLayout() {
MyItems()
}
FlowLayout() {
MyItems()
}
}
Like so:
I have managed it to get it to work but just by using re-composition:
I use FlowLayout's Modifier.onSizeChanged() and if size > (wanted folded size), then I decrease number of printed "chips" by one.
This means, that if I have 1000 chips to print, this will re-compose 996 times until we have our four chips remaining. It works but I feel it's a hack.
It won't work by just setting the height of the FlowLayout: FlowLayout(Modifier.heightIn(xxx)) {...} because FlowLayout will still print all chips, regardless of which size I set as constraint. Furthermore, the layout will then push both up and down! Not just down, from starting point.
Should I be looking into custom Layouts/SubcomposeLayouts?
I have a lazy row with items that have wrap content height.
my problem is that some texts of these items is visible or invisible base of that item. so the height of that cart is not fix and it will change.
how can I find the max height of that item (with all texts) and set that height to all items.
I do not want to set a hard code height to my items (like 300.dp)
as you can see in this image: the below button change its position based on the card's height.
I want that button fix in its place and not move up and down.
https://i.stack.imgur.com/R0Tc6.png
how can I fix that problem?
Have you tried experimenting around onGloballyPositioned{..} modifier property?
val localDensity = LocalDensity.current
Text(modifier = Modifier
.onGloballyPositioned { thisText ->
with (localDensity) {
thisText.size.height.toDp()
}
},
text = "Text"
)
Edit: Intrinsic Measurement is not allowed in LazyList components, have a look at this post, looks like similar to yours.
Jetpack Compose: Row with all items same height
Also, Constraintlayout maybe a good thing to experiment on.
One of the rules of Compose is that you should only measure your children once; measuring children twice throws a runtime exception. However, there are times when you need some information about your children before measuring them.
If you have a look at the Android documentation for Intrinsic Measurements, you will have a clear idea of what to do. In your scenario, you need to force Compose to measure the size of your children to adjust the parent composable's dimensions accordingly.
This medium article gives an easier example on how to use IntrinsicSize in Compose.
I have some dynamic content and I need to render it as a LazyRow of several Columns. Each Column can have Texts of various lengths.
Ideally, I would like every Column to be the size of the largest Column.
How can I ensure that every Column is the same width?
I think I need IntrinsicSize here but I'm not sure how to apply it in my case:
LazyRow {
items(items = steps) {
Column {
// ... dynamic content, including Texts of varying sizes and lengths
// How can I ensure that EVERY column is the SAME width?
}
}
}
The xml code on this site: http://www.learn-android.com/2010/01/05/android-layout-tutorial/6/
Gives the table layout shown in the image.
http://www.learn-android.com/wp-content/uploads/2010/01/TableLayout.png
But if you remove the first table row, then the First Name textview appears in column 0 even though its android:column_layout is set to "1"
But on this site: http://developer.android.com/reference/android/widget/TableLayout.html it says "If you skip a column number, it will be considered an empty cell in that row."
IF you want a empty cell in the row, do you have to fill it in with something or set its width?
Is there a better way to get things spaced in the middle of the screen like in the table row?
Thanks
So, the empty cell is there, it just has no width. If there is nothing with a nonzero width, it will look like there is no column 0. To get it to take up some space, there needs to be something there, even if its just an empty View with a width set.
If you want things centered, it might make sense to use a RelativeLayout and use either android:layout_gravity="center" or android:layout_gravity="center_horizontal" to align things in the center of the screen.