Hey there. Would like some help with some layout i...

# compose

[Dario Ahdoot]

Hey there. Would like some help with some layout issues I'm having. I'm not sure if it's possible to do what I am trying to do in Compose 🧵

[Dario Ahdoot]

I have a TextButton 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?

[Dario Ahdoot]

The first image of previews is how things look if I don't apply the 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]]

Does passing this to your Row fix it?

horizontalArrangement = Arrangement.SpaceBetween

[Dario Ahdoot]

It does not 😕

[efemoney]

That sounds like a spacer with weight(1f) in btw the text & icon

[Zach Klippenstein (he/him) [MOD]]

I wrote a small reproducer and adding the horizontal arrangement fixed it for me, so obviously i’m missing something from your actual code

[Zach Klippenstein (he/him) [MOD]]

What’s the parent of the Row? It must not be propagating its minimum constraints

[Dario Ahdoot]

This is a minimal reproducible example. I actually couldn't figure out how to get the Icon to accept a Material Icon:

import 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]

This is what you need

Button(
    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]

The inner Row is so that I can have this:

verticalAlignment = Alignment.CenterVertically,

[efemoney]

Button already has an internal Row no?

[efemoney]

Oh woops, TextButton NOT Button

[Zach Klippenstein (he/him) [MOD]]

TextButton uses Button internally, and yes it has a row

[Dario Ahdoot]

Yes, but I need the vertical alignment set, which the row of the button does not do

[Dario Ahdoot]

With width(IntrinsicWidth.Min)

[Zach Klippenstein (he/him) [MOD]]

I would probably just copy `Button`’s implementation at this point

[efemoney]

What verdion of compose are you on? My (1.5.4) has vertical alignment of center vertically 🤔

[Zach Klippenstein (he/him) [MOD]]

Imo, a generic Button should not be opinionated about its contents’ layout, but that ship sailed long ago

[Dario Ahdoot]

What verdion of compose are you on? My (1.5.4) has vertical alignment of center vertically

[Dario Ahdoot]

I just checked and it is indeed setting CenterVertically. But I still have the same issue if I remove the inner row

[efemoney]

This is mine, vanilla Button, hmm

[Dario Ahdoot]

The top preview shouldnot go full width

[Dario Ahdoot]

OK, so using @efemoney’s code, I was able to get it to work. The trick is that I need to pass in those modifiers to the SpinnerButtonTest component rather than having them included in the component

[efemoney]

You can include the intrinsic modifier one inside the component, on top of whatever is passed in from outside, that is what does the “magic” (basically says the “content” should try to be as small as possible)

[Dario Ahdoot]

Yup, just did that and all is good. Thanks guys

[Dario Ahdoot]

Final code for posterity:

import 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 = {},
    )
}