CODEWITHSUNDEEP
androidwidthandroid-jetpack-composetextfield
TomR
TomR

Reputation: 3036

How to get Android Compose fillMaxWidth(0.7f) (for TextField) respected (only 0.5f is practically used)?

I have this Android Jetpack Compose componend:

@Composable
fun KeyValueRow(key: String, value: String, color: Color = Color(0xFFD1D9FF), isImportant: Boolean = false) {
    Row(
        modifier = Modifier
            .background(color)
            .fillMaxWidth(1f)
    ) {
        if (isImportant) {
            Text(
                key,
                modifier = Modifier.fillMaxWidth(0.28f),
                style = MaterialTheme.typography.subtitle2
            )
            Spacer(modifier = Modifier.fillMaxWidth(0.02f))
            Text(
                value,
                modifier = Modifier.fillMaxWidth(0.7f),
                style = MaterialTheme.typography.subtitle2
            )
        } else {
            Text(
                key,
                modifier = Modifier.fillMaxWidth(0.28f),
                style = MaterialTheme.typography.body2
            )
            Spacer(modifier = Modifier.fillMaxWidth(0.02f))
            Text(
                value,
                modifier = Modifier.fillMaxWidth(0.7f),
                style = MaterialTheme.typography.body2
            )
        }
    }
}

which I am using e.g.

Column (
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxWidth()
        .padding(all = 5.dp)
) {
    KeyValueRow(
        key = "Order No:",
        value = uiState.orderNo.toString()
    )
    KeyValueRow(
        key = "Customer:",
        value = uiState.customer
    )
}

While I have provided 0.7f for the TextField, the visible size (and the exact size as can be inspected in the Layout Inspector) ir only around 0.5f. Why is that? How can I as Android framework/Kotlin compiler to respect values that are greated than 0.5f?

Currently my components are aligned to the left side and that is why the row contains approx. 0.2f free space at the right side.

Upvotes: 0

Views: 742

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363379

Using fillMaxWidth(0.7f) you are filling the 70% of the available space, not the 70% of the width of the Row.

Use the weight modifier.

Row(
    modifier = Modifier
        .background(Yellow)
        .fillMaxWidth(1f)
) {

    Text(
        "key",
        modifier = Modifier.weight(0.28f),
        style = MaterialTheme.typography.subtitle2
    )
    Spacer(modifier = Modifier.weight(0.02f))
    Text(
        "text",
        modifier = Modifier.weight(0.7f),
        style = MaterialTheme.typography.subtitle2
    )
}

Upvotes: 2

Related Questions