Jetpack Compose button alignment

Question

I'm writing an interface in Kotlin using Jetpack Compose. I'm just learning and there is a problem with button layout.

I want to make "Check" and "Delete" buttons to be located right after the input field. Take a look at the screenshots, how it looks like now and how I am trying to do it.

Code:


Row(
    Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Players", style = Typography.titleLarge)

    IconButton(onClick = { isNewPlayer = true }) {
        Icon(imageVector = Icons.Default.Add, contentDescription = "")
    }
}

if (isNewPlayer) {

    EditTextFieldSmall(
        label = "New Player",
        value = newPlayer.toStringWithEmpty(),
        onValueChange = { newPlayer = it.toIntWithEmpty() }
    )

    IconButton(
        onClick = {
            val newList = club.player.toMutableList()

            newList.add(newPlayer)

            club = club.copy(player = newList)

            newPlayer = 0

            isNewPlayer = false
        }
    ) {
        Icon(
            imageVector = Icons.Default.Check,
            contentDescription = "",
            tint = Color.Green,
            modifier = Modifier.size(16.dp)
        )
    }

    IconButton(
        onClick = {
            newPlayer = 0

            isNewPlayer = false
        }
    ) {
        Icon(
            imageVector = Icons.Default.Delete,
            contentDescription = "",
            tint = Color.Red,
            modifier = Modifier.size(16.dp)
        )
    }
}

for (i in club.player.indices) {

    EditTextFieldSmall(
        label = "Player",
        value = club.player[i].toStringWithEmpty(),
        onValueChange = {
            val newList = club.player.toMutableList()

            newList[i] = it.toIntWithEmpty()

            club = club.copy(player = newList)
        }
    )

    IconButton(
        onClick = {
            val newList = club.player.toMutableList()

            newList.removeAt(i)

            club = club.copy(player = newList)
        }
    ) {
        Icon(
            imageVector = Icons.Default.Delete,
            contentDescription = "",
            tint = Color.Red,
            modifier = Modifier.size(16.dp)
        )
    }
}

And:


@Composable
fun EditTextFieldSmall(label: String, value: String, onValueChange: (String) -> Unit) {

    Row(Modifier.fillMaxWidth().padding(top = 4.dp)) {
        Text(text = label, color = Color.White)

        Spacer(modifier = Modifier.width(8.dp))

        BasicTextField(
            modifier =
                Modifier.width(130.dp)
                    .height(24.dp)
                    .background(EditTextFieldBackground, shapes.extraSmall),
            value = value,
            onValueChange = { newValue ->
                if (newValue.length <= 6) {

                    onValueChange(newValue)
                }
            },
            textStyle =
                LocalTextStyle.current.copy(
                    color = EditTextFieldTextColor,
                    textAlign = TextAlign.Center
                ),
            keyboardOptions =
                KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done)
        )
    }
}

The screenshot above is what it looks like now:

// Image

Bottom screen - how I want it to look

Tried adding Row and Column before BasicTextField

BenjyTec · Accepted Answer · 2024-10-14 11:23:14Z

1

Please try to wrap all occurences of these three Composables with an additional Row like this:

Row {
    EditTextFieldSmall(
        //...
    )

    IconButton(
        //...
    ) {
        //...
    }

    IconButton(
        //...
    ) {
        //...
    }
}

Also, remove the fillMaxWidth() Modifier from the Row inside of the EditTextFieldSmall Composable:

@Composable
fun EditTextFieldSmall(label: String, value: String, onValueChange: (String) -> Unit) {

    Row(Modifier.padding(top = 4.dp)) {
        //...
    }
}

answered Oct 14, 2024 at 11:23

BenjyTec

12.6k4 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jetpack Compose button alignment

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related