I'm looking to have a LazyColumn that initially wraps content height, but if it gets to a certain height (232dp) then it fixes its height at this. In XML I would have used maxHeight combined with wrapContent, but I cant find anything similar in Compose?
You can use hightIn modifier on LazyColumn like this
LazyColumn(
modifier = Modifier
.heightIn(0.dp, 232.dp) //mention max height here
.widthIn(0.dp, 232.dp) //mention max width here
) {
}
This will make sure that the height will not go above 232.dp if more items are added to lazycolumn
Related
I'm unable to set the maximum width of the bottom sheet in the ModalBottomSheetLayout. I've tried the following but that changes the entire page's maximum width, not just the bottom sheet:
ModalBottomSheetLayout(
modifier = Modifier.requiredWidthIn(max = 640.dp),
... // rest of code not shown
The Material specs say to set a maximum width of 640dp for bottom sheets. How do we comply with this requirement?
I filed a bug with Google but wasn't sure if anyone has insight on how to do this.
You should use Modifier.fillMaxWidth().
Moreover you can find out max width of screen by using BoxWithConstraint
Example:
BoxWithConstraints {
val widthModifier = if (maxWidth < 400.dp) {
Modifier.fillMaxWidth()
} else {
Modifier.width(640.dp)
}
ModalBottomSheetLayout(
modifier = *yourModifier*.then(widthModifier),
...
}
I want to show only 30% of my sheet instead of 50% in HalfExpanded state of ModalBottomSheetLayout. How can I achieve this?
You can configure the HalfExpanded state by passing a Modifier to the ModalBottomSheetLayout that defines the desired height of the sheet in that state.
ModalBottomSheetLayout(
state = state,
sheetContent = { /* content */ },
sheetPeekHeight = Modifier.preferredHeight(height)
)
height in dp (You can calculate 30% of height from screen height)
I'm trying to make a layout like on the scheme below:
I've already found a solution with a weighted Row() inside other Row(). But it looks too complicated for such a simple problem.
Row() {
Icon() // Fix width
Row(modifier = Modifier.weight(1f)) {
Text(modifier = Modifier.weight(1f)) // Max width
Icon() // Fix width
}
}
Surely many have faced such an issue. Are there more beautiful ways to solve it?
You need not use a nested Row here. Just give the weight(1f) modifier to center element.
Row {
Icon() // View 1 (Fix width)
CenterPiece(
modifier = Modifier
.weight(1f)
.padding(horizontal = 8.dp) // For the spacing between components
)
Icon() // View 3 (Fix width)
}
You might also want to add verticalAlignment = Alignment.CenterVertically to the Row so that the three components are centered vertically.
I want to position my own component (say a Text component) vertically so that I can specify the y-offset relative to the bottom of the Text component. How could I do this in Jetpack compose?
So something like
Column {
Text("Something", modifier = Modifier.offset(y=10.dp))
}
But instead of 10dp representing the top y-position of the Text component it would be the bottom y-position. Basically taking into account the height of the Text even if Text size changes. So y = offset.y - height
As I can see it, there's two problems:
The font size can be changed, so I cannot hard code the text height.
I need to know the size of my Text component during composition, but I don't know how to get that.
You could go for custom Composables,
#Composable
fun CustomText(y: Dp){
Layout(content = { Text(text = "Lorem Ipsum") }){measurables, constraints ->
val text = measurables[0].measure(constraints)
layout(constraints.maxWidth, constraints.maxHeight){ //Change these per your needs
text.placeRelative(IntOffset(0, y.value.roundToInt() - text.height))
}
}
}
You could also use a custom Modifier. Check out using the layout modifier
Column(LayoutSize.Fill) {
Box(
modifier = LayoutSize(20.dp) + LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter,
backgroundColor = Color.Blue
)
Box(
LayoutSize(50.dp) + LayoutSize.Fill + LayoutAlign.CenterVertically,
backgroundColor = Color.Blue
)
}
I try this sample LayoutAlign
but no rectangles are shown
Quick Answer
This sample is broken due to the wrong order of modifiers. Order of modifiers is very important in Compose. This code would work as expected:
Box(
LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter + LayoutSize(20.dp),
backgroundColor = Color.Blue
)
Why it doesn't work in the original sample?
LayoutAlign aligns the content within bounds, when content size is smaller than its bounds. What it does under the hood is resetting min size constraint (minWidth, minHeight, or both, depending on alignment direction) allowing the content to be smaller and occupy its preferred size.
Box with just background color doesn't provide any preferred intrinsic size of its content. If it's allowed to be as small as 0dp x 0dp - it will be.
In the correct example, this is how constraints are modified under the hood:
LayoutSize.Min(40.dp, 40.dp) reserves at least 40dp bounds
Contraints: minWidth = 40dp, maxWidth = infinity, minHeight = 40dp, maxHeight = infinity
LayoutAlign.TopCenter applies alignment and resets min size constraints for both directions
Constraints: minWidth = 0dp, maxWidth = infinity, minHeight = 0dp, maxHeight = infinity
LayoutSize(20.dp) orders the content to be exactly 20dp big. minWidth and minHeight are important here, without it the content of the Box would be measured as 0dp x 0xp.
Constraints: minWidth = 20dp, maxWidth = 20dp, minHeight = 20dp, maxHeight = 20dp.
Without the last step the Box content will be measured as 0dp x 0dp. This is what's happening in the original sample. The box is technically aligned/positioned correctly within 40dp, but it's invisible because its size is 0dp x 0dp.
Using LayoutAlign on elements that provide its own preferred size
Keep in mind that if the element knows how to measure its content or provides some preferred size, then it will work just fine even if we won't set any size after applying the LayoutAlign modifier.
Example:
Text("Text",
modifier = LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter,
style = TextStyle(fontSize = 8.sp)
)