Trying to create a pinpad like this in compose and...

# compose

[Colton Idle]

Trying to create a pinpad like this in compose and strugling more than I thought. Left is my "desired" look and the right is my implementation.

My two main issues:
1. The text doesn't seem centered in my button?
2. I don't know how to make "DEL" show instead of just the D that's showing now.
code in 🧵

[Colton Idle]

Row {
    NumPadButton(numberPressEvent, "1")
    NumPadButton(numberPressEvent, "2")
    NumPadButton(numberPressEvent, "3")
}
Row {
    NumPadButton(numberPressEvent, "4")
    NumPadButton(numberPressEvent, "5")
    NumPadButton(numberPressEvent, "6")
}
Row {
    NumPadButton(numberPressEvent, "7")
    NumPadButton(numberPressEvent, "8")
    NumPadButton(numberPressEvent, "9")
}
Row {
    NumPadButton(numberPressEvent, "EMPTY")
    NumPadButton(numberPressEvent, "0")
    NumPadButton(numberPressEvent, "DEL")
}

@Composable
private fun NumPadButton(numberPressEvent: (String) -> Unit, text: String) {

    MaterialTheme(lightColors()) {
        TextButton(
            onClick = { numberPressEvent(text) },
        ) {
            if (text == "EMPTY") {
                Text(
                    text = "x",
                    fontSize = 24.sp,
                    fontWeight = FontWeight.W400,
                    modifier = Modifier
                        .alpha(0f)
                        .padding(horizontal = 48.dp, vertical = 24.dp)
                        .requiredSize(24.dp), overflow = TextOverflow.Visible
                )
            } else {
                Text(
                    text = text,
                    fontSize = 24.sp,
                    fontWeight = FontWeight.W400,
                    modifier = Modifier
                        .padding(horizontal = 48.dp, vertical = 24.dp)
                        .requiredSize(24.dp),
                    overflow = TextOverflow.Visible,
                    textAlign = TextAlign.Center
                )

            }
        }
    }
}

[Rick Regan]

For 2), try some combination of decreasing fontSize on the Text, increasing requiredSize on the Text (to say 48.dp), and decreasing contentPadding on TextButton (start with contentPadding = PaddingValues(0.dp) and work up from there).

[Chris Sinco [G]]

I would also suggest NOT adding horizontal padding to the Text and instead rely on the weight Modifier to distribute the buttons proportionally.

[Rick Regan]

As an aside, try this for fun:

val keyMatrix: Array<Array<String>> =
    arrayOf(
        arrayOf(
            "1",
            "2",
            "3"
        ),
        arrayOf(
            "4",
            "5",
            "6"
        ),
        arrayOf(
            "7",
            "8",
            "9"
        ),
        arrayOf(
            "EMPTY",
            "0",
            "DEL"
        )
    )

Column {
    keyMatrix.forEach { keypadRow ->
        Row {
            keypadRow.forEach { keyLabel ->
                NumPadButton(numberPressEvent, keyLabel)
            }
        }
    }
}

[Colton Idle]

Thanks. I will try when I get back home!

[Francesc]

This may be a good candidate for a custom layout

[Dan MacNeil]

This is working for me on small buttons on a calculator app:

[Dan MacNeil]

Text(
    modifier = Modifier
        .align(Alignment.CenterVertically),
    text = dbs.label,
    fontSize = 22.sp,
    overflow = TextOverflow.Visible,
    softWrap = false,
    maxLines = 1
)

[Nabeel]

For 1st one : If you're referring to vertical center then it might be an issue with the font.