Develop Reference

ConstraintLayout inside Row with IntrinsicSize.Min height

i have an issue in placing ConstraintLayout as Row's Child (Compose Version : 1.1.1). when set the height of Row to IntrinsicSize.Min, the content of ConstraintLayout gets corrupted, ie it's width gets narrow and all children are placed in that narrow width.
here's the code
Row(modifier = Modifier.height(IntrinsicSize.Min) ) {
ConstraintLayout(modifier = Modifier){
.
.
.
}
}
and here are screenshots
before putting inside Box:
after :
here's ConstraintLayout Content:
Surface(
modifier = modifier,
shape = RoundedCornerShape(roundedCornerSize),
border = BorderStroke(width = 1.dp,
color = Color.Gray),
color = Color.Green,
elevation = elevation) {
ConstraintLayout(modifier = Modifier
.fillMaxWidth()
.background(color = Color.Blue)
.padding(16.dp)) {
val (dragIconRef, imageRef, nameRef, updateTimeRef, priceRef, changeRef) = createRefs()
val endMarginFromImageStart = 8.dp
Icon(modifier = Modifier.constrainAs(dragIconRef) {
end.linkTo(parent.end)
linkTo(top = parent.top, bottom = parent.bottom)
}, painter = painterResource(id = R.drawable.ic_drag_indicator),
contentDescription = null)
Image(
modifier = Modifier
.constrainAs(imageRef) {
end.linkTo(dragIconRef.start, margin = 16.dp)
linkTo(top = parent.top, bottom = parent.bottom)
}
.size(36.dp),
painter = painterResource(id = R.drawable.ic_notify),
contentDescription = null
)
Text(
modifier = Modifier.constrainAs(nameRef) {
top.linkTo(imageRef.top)
end.linkTo(imageRef.start, margin = endMarginFromImageStart)
},
text = itemModel.name,
)
Text(
modifier = Modifier.constrainAs(updateTimeRef) {
bottom.linkTo(imageRef.bottom)
end.linkTo(imageRef.start, margin = endMarginFromImageStart)
},
text = itemModel.updateTime,
)
Text(
modifier = Modifier.constrainAs(priceRef) {
baseline.linkTo(nameRef.baseline)
end.linkTo(changeRef.end)
},
text = itemModel.price,
)
Text(
modifier = Modifier.constrainAs(changeRef) {
baseline.linkTo(updateTimeRef.baseline)
start.linkTo(parent.start)
},
text = itemModel.change.toString(),
)
}
}

How to resize after adding a new element using Jetpack compose?

I wrote the composable below (shown as dialog). When viewState.errorCode != 0, another composable is shown. This all works fine, but the height of the box doesn't adjust when the new composable becomes visible.This results in an 'invisible overflow' whereby a number of items are no longer visible. Is there a way to make the box dynamic so that it adjusts in height when a new element becomes visible?
Box(modifier = Modifier
.clip(RoundedCornerShape(4.dp))) {
Column(
modifier = Modifier
.background(MaterialTheme.colors.onPrimary, MaterialTheme.shapes.large)
.padding(12.dp)
) {
Text(stringResource(R.string.verify_hint, user.email).parseBold(), fontSize = 18.textDp, fontFamily = SourceSans)
if (viewState.errorCode != 0) {
AlertMessage(message = stringResource(id = viewState.errorCode), color = errorColor, padding = PaddingValues(top = 12.dp))
}
TextField(
value = code,
onValueChange = { code = it },
label = { Text(stringResource(R.string.verification_code)) },
colors = TextFieldDefaults.textFieldColors(backgroundColor = textFieldColor),
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
modifier = Modifier
.fillMaxWidth()
.padding(top = 12.dp, bottom = 12.dp)
)
NMButton(
onClick = { viewModel.verify(user, code, verifyLogin, language = context.getLanguageBasedOnConfiguration()) },
modifier = Modifier
.fillMaxWidth()
.padding(start = 0.dp, end = 0.dp),
icon = R.drawable.ic_badge_check_solid,
label = stringResource(R.string.verify)
)
}
if (viewState.loading) {
Loader()
}
}

Yes there is.
You can use animateContentSize on your box modifier
then you declare an animationSpec like below:
Box(modifier = Modifier
.animateContentSize(
animationSpec = tween(
durationMillis = 300,
easing = LinearOutSlowInEasing
)
).clip(RoundedCornerShape(4.dp))
)
Now if the AlertMessage appears it will animate the size of the box.
You can also create expandable cards with this approach.
This video may help you too.

How align to bottom a row in Jetpack Compose?

I have a Column with some rows, and I want to align the last row at the botton, but this row is never located at the bottom of the screen, it stays right after the previous row:
Column {
// RED BOX
Row(
modifier = Modifier
.fillMaxWidth()
.height(130.dp)
.padding(vertical = 15.dp, horizontal = 30.dp),
verticalAlignment = Alignment.CenterVertically
) {
Column {
Text(
text = stringResource(id = R.string.app_name),
style = TextStyle(fontSize = 40.sp),
color = Color.White
)
Text(
text = stringResource(id = R.string.app_description),
style = TextStyle(fontSize = 13.sp),
fontWeight = FontWeight.Bold,
color = Color.Black
)
}
}
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(15.dp)
)
// GREEN BOX
val currentRoute = currentRoute(navController)
items.forEach { item ->
DrawerItem(item = item, selected = currentRoute == item.route) {
navController.navigate(item.route) {
launchSingleTop = true
}
scope.launch {
scaffoldState.drawerState.close()
}
}
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 15.dp, horizontal = 30.dp),
verticalAlignment = Alignment.Bottom,
horizontalArrangement = Arrangement.Center
) {
Text(
text = BuildConfig.VERSION_NAME,
style = TextStyle(fontSize = 11.sp),
color = Color.Black,
)
}
}
I want to get the same as I show in the picture. I want to have the first row (red), then the second row (green) and then a third row that fits at the bottom of the screen (blue)

You can do it in many ways.
You can use a Column with verticalArrangement = Arrangement.SpaceBetween assigning a weight(1f,false) to the last row:
Column(
Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceBetween) {
//All elements
Column {
// RED BOX
//...
Spacer(
modifier = Modifier
.fillMaxWidth()
.background(Green)
.height(15.dp)
)
//... Green box
}
//LAST ROW
Row(
modifier = Modifier
.weight(1f, false)
) {
//...
}
}

You can use a Spacer(modifier.weight(1f)) between GreenBox and Blue Box to create space between them or you can create your custom column with Layout function and set y position of last Placeable as height of Composable - height of last Composble
Column(modifier = Modifier
.fillMaxHeight()
.background(Color.LightGray)) {
Text(
"First Text",
modifier = Modifier
.background(Color(0xffF44336)),
color = Color.White
)
Text(
"Second Text",
modifier = Modifier
.background(Color(0xff9C27B0)),
color = Color.White
)
Spacer(modifier = Modifier.weight(1f))
Text(
"Third Text",
modifier = Modifier
.background(Color(0xff2196F3)),
color = Color.White
)
}
Result:
Custom Layout
#Composable
private fun CustomColumn(
modifier: Modifier,
content: #Composable () -> Unit
) {
Layout(
modifier = modifier,
content = content
) { measurables, constraints ->
val looseConstraints = constraints.copy(
minWidth = 0,
maxWidth = constraints.maxWidth,
minHeight = 0,
maxHeight = constraints.maxHeight
)
// Don't constrain child views further, measure them with given constraints
// List of measured children
val placeables = measurables.map { measurable ->
// Measure each child
measurable.measure(looseConstraints)
}
// Track the y co-ord we have placed children up to
var yPosition = 0
// Set the size of the layout as big as it can
layout(constraints.maxWidth, constraints.maxHeight) {
// Place children in the parent layout
placeables.forEachIndexed { index, placeable ->
println("Placeable width: ${placeable.width}, measuredWidth: ${placeable.measuredWidth}")
// Position item on the screen
if (index == placeables.size - 1) {
placeable.placeRelative(x = 0, y = constraints.maxHeight - placeable.height)
} else {
placeable.placeRelative(x = 0, y = yPosition)
}
// Record the y co-ord placed up to
yPosition += placeable.height
}
}
}
}
Usage
CustomColumn(
modifier = Modifier
.fillMaxHeight()
.background(Color.LightGray)
) {
Text(
"First Text",
modifier = Modifier
.background(Color(0xffF44336)),
color = Color.White
)
Text(
"Second Text",
modifier = Modifier
.background(Color(0xff9C27B0)),
color = Color.White
)
Spacer(modifier = Modifier.weight(1f))
Text(
"Third Text",
modifier = Modifier
.background(Color(0xff2196F3)),
color = Color.White
)
}
Result:
In this example with Layout you should consider how you measure your measureables with Constraints and your total width and height. It requires a little bit practice but you get more unique designs and with less work(more optimised) composables than ready ones. Here i set layout as maxWidth so no matter which width you assign it takes whole width. It's for demonstration you can set max width or height in layout based on your needs.

Decrease padding inside Compose Button

How can I reduce the padding inside the button? I want the text to be closer to the edge of the button
Button(
onClick = {},
modifier = Modifier.padding(0.dp),
shape = RoundedCornerShape(30.dp),
border = BorderStroke(1.dp, Color(0xFFC4C4C4)),
colors = ButtonDefaults.buttonColors(
contentColor = MaterialTheme.colors.onBackground,
backgroundColor = MaterialTheme.colors.onBackground
)
) {
Text(
text = "lorem ipsu",
fontSize = 13.sp,
textAlign = TextAlign.Center,
modifier = Modifier.padding(start = 1.dp, end = 1.dp)
)
}

You can use contentPadding
Button(
onClick = {},
contentPadding = PaddingValues(
start = 4.dp,
top = 4.dp,
end = 4.dp,
bottom = 4.dp,
)
) {
// TODO
}

How to remove or reduce padding in Jetpack compose OutlinedButton

Unable to reduce the huge padding in OutlinedButton. Tried contentPadding, modifier padding, etc. Cannot reduce padding for text "apple". Any idea? Should I use any other type of compose component for this?
OutlinedButton(
onClick = {},
border = BorderStroke(1.dp, Color.White),
shape = RoundedCornerShape(12.dp),
contentPadding = PaddingValues(0.dp),
modifier = Modifier
.background(bgColor)
.height(24.dp)
.padding(all = 0.dp),
colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)) {
Text("apple",
color = Color.White,
style = MaterialTheme.typography.body2,
modifier = Modifier.height(10.dp).padding(vertical = 0.dp), //.background(bgColor),
)
}
Updated after #liveAnyway's answer (thanks!) which appeared to help. After that I removed height from OutlinedButton too - ideally I wanted it like "wrap-content". Once I made that change, I still see the padding. Bottomline I don't want any absolute height specified so that it can work with different font size from system settings.
Row(modifier = Modifier.padding(vertical = 12.dp)) {
OutlinedButton(
onClick = {},
border = BorderStroke(1.dp, Color.White),
shape = RoundedCornerShape(18.dp),
contentPadding = PaddingValues(0.dp),
modifier = Modifier
.background(bgColor)
.padding(all = 0.dp),
colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)
) {
Text("apple",
color = Color.White,
style = MaterialTheme.typography.body2,
modifier = Modifier.padding(vertical = 0.dp),
)
}
}

Button has default min size modifier. This is done according to Material guidelines, so that the button is easy to hit. If the control size is too small, the user may have problems hitting it, take this into account when changing this parameter.
You can override it by applying defaultMinSize modifier. The 0.dp will be ignored, but starting from 1.dp you will get the desired result:
OutlinedButton(
onClick = { /*TODO*/ },
contentPadding = PaddingValues(),
modifier = Modifier
.defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
) {
Text(
"Apple",
)
}
Alternatively, you can design your own button without these restrictions:
Surface(
onClick = {
},
shape = MaterialTheme.shapes.small,
color = bgColor,
contentColor = MaterialTheme.colors.primary,
border = ButtonDefaults.outlinedBorder,
role = Role.Button,
) {
Text(
"Apple",
)
}

You have to change the minHeight (default size are MinWidth = 64.dp and MinHeight = 36.dp) and remove the contentPadding with contentPadding = PaddingValues(0.dp):
OutlinedButton(
onClick = {},
border = BorderStroke(1.dp, Color.White),
shape = RoundedCornerShape(12.dp),
contentPadding = PaddingValues(0.dp),
modifier = Modifier.defaultMinSize(
minWidth = ButtonDefaults.MinWidth,
minHeight = 10.dp
)
) {
Text(
"apple",
style = MaterialTheme.typography.body2
)
}