Dario Ahdoot
11/03/2023, 5:09 PMTextButton
which which has a Text
and Icon
composable as children. I want the Text to be pinned to the start of the text button and the icon to be pinned to the left of the button.
To do so, I set a weight(1f)
modifier on the Text
. However, doing so causes the entire button to grow to the maximum space allowed by the container of the TextButton
. It acts as if there is a fillMaxWidth
set as the modifier of the TextButton
.
I basically just want some type of flexible spacer in between the text and icon which will push the text and icons out to the edges of the button, but which does not cause the whole TextButton to grow.
Is this possible?weight(1f)
modifier to the Text. The red background is the background of the Row
containing the Text
and Icon
. The top 4 previews do not have a fillMaxWidth()
modifier applied to the TextButton
, but the bottom one does.
I want it such that the button looks like the top for unless I apply a fillMaxWidth()
modifier to the TextButton
, in which case, I want the red area to take up the entire space of the of the button, like in the second attached preview.Zach Klippenstein (he/him) [MOD]
11/03/2023, 5:57 PMRow
fix it?
horizontalArrangement = Arrangement.SpaceBetween
Dario Ahdoot
11/03/2023, 5:58 PMefemoney
11/03/2023, 6:06 PMZach Klippenstein (he/him) [MOD]
11/03/2023, 6:09 PMRow
? It must not be propagating its minimum constraintsDario Ahdoot
11/03/2023, 6:13 PMimport androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ButtonColors
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Composable
fun SpinnerButtonTest(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
val borderColor = Color.LightGray
val backgroundColor = Color.White
val textColor = Color.Black
val border = BorderStroke(
color = borderColor,
width = 1.dp,
)
val colors: ButtonColors = ButtonDefaults.textButtonColors(
backgroundColor = backgroundColor,
contentColor = textColor,
)
androidx.compose.material.TextButton(
onClick = onClick,
modifier = modifier,
shape = RoundedCornerShape(8.dp),
border = border,
colors = colors,
contentPadding = PaddingValues(
start = horizontalScreenSpace,
top = xsmallSpace,
end = horizontalScreenSpace,
bottom = xsmallSpace,
),
enabled = enabled,
) {
Row(
modifier = Modifier
.background(Color.Red),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Text(
modifier = Modifier.weight(1f),
text = "Text",
style = TextStyles.editText,
color = textColor,
)
Icon(
icon = Icons.Filled.ArrowDropDown,
contentDescription = null,
tint = textColor,
)
}
}
}
@Composable
@Preview
private fun SpinnerButtonTestPreview() {
SpinnerButtonTest(
onClick = {},
)
}
@Composable
@Preview
private fun SpinnerButtonTestFullWidthPreview() {
SpinnerButtonTest(
modifier = Modifier
.fillMaxWidth(),
onClick = {},
)
}
efemoney
11/03/2023, 6:13 PMButton(
modifier = Modifier
.fillMaxWidth() <-- Turn this off or on to see behavior
.width(IntrinsicSize.Min) <-- specifically this
,
onClick = { /*TODO*/ }
) {
Text(text = "Lol")
Spacer(Modifier.weight(1f, fill = true))
Icon(Icons.Default.Add, contentDescription = null)
}
Dario Ahdoot
11/03/2023, 6:14 PMverticalAlignment = Alignment.CenterVertically,
efemoney
11/03/2023, 6:15 PMRow
no?Zach Klippenstein (he/him) [MOD]
11/03/2023, 6:15 PMDario Ahdoot
11/03/2023, 6:16 PMwidth(IntrinsicWidth.Min)
Zach Klippenstein (he/him) [MOD]
11/03/2023, 6:17 PMefemoney
11/03/2023, 6:17 PMZach Klippenstein (he/him) [MOD]
11/03/2023, 6:18 PMButton
should not be opinionated about its contents’ layout, but that ship sailed long agoDario Ahdoot
11/03/2023, 6:18 PMWhat verdion of compose are you on? My (1.5.4) has vertical alignment of center vertically
efemoney
11/03/2023, 6:19 PMDario Ahdoot
11/03/2023, 6:19 PMSpinnerButtonTest
component rather than having them included in the componentefemoney
11/03/2023, 6:23 PMDario Ahdoot
11/03/2023, 6:24 PMimport androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ButtonColors
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Composable
fun SpinnerButtonTest(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
val borderColor = Color.LightGray
val backgroundColor = Color.White
val textColor = Color.Black
val border = BorderStroke(
color = borderColor,
width = 1.dp,
)
val colors: ButtonColors = ButtonDefaults.textButtonColors(
backgroundColor = backgroundColor,
contentColor = textColor,
)
androidx.compose.material.TextButton(
onClick = onClick,
modifier = modifier
.width(IntrinsicSize.Min),
shape = RoundedCornerShape(8.dp),
border = border,
colors = colors,
contentPadding = PaddingValues(
start = horizontalScreenSpace,
top = xsmallSpace,
end = horizontalScreenSpace,
bottom = xsmallSpace,
),
enabled = enabled,
) {
Text(
text = "Text",
style = TextStyles.editText,
color = textColor,
)
Spacer(
modifier = Modifier
.defaultMinSize(minWidth = 8.dp)
.weight(1f),
)
Icon(
painter = painterResource(id = com.ifttt.uicore.R.drawable.ifd_arrow_drop_down),
contentDescription = null,
tint = textColor,
)
}
}
@Composable
@Preview
private fun SpinnerButtonTestPreview() {
SpinnerButtonTest(
onClick = {},
)
}
@Composable
@Preview
private fun SpinnerButtonTestFullWidthPreview() {
SpinnerButtonTest(
modifier = Modifier
.fillMaxWidth(),
onClick = {},
)
}