Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Left and Right align text simultaneously inside a button on the same line in Jetpack Compose

I am trying to add two text portions inside a button. The first text aligns to the left, while the second one should align to the right. Here’s what I tried:

OutlinedButton(
            colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
            border = BorderStroke(0.dp, Color.Transparent),
            modifier = Modifier.fillMaxWidth()
                               .background(
                color = Color.Transparent,
        shape = RectangleShape, // Oval shape

        //border = androidx.compose.ui.drawBorder(2.dp, Color.Red) // Border color and width
        ),
            onClick = {}
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = text,
                    textAlign = TextAlign.Start,
                    fontSize = 15.sp,
                )
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = ">",
                    textAlign = TextAlign.End,
                    fontSize = 15.sp,
                )
            }
        }

However, this doesn’t give me the expected behavior. It aligns both texts to the left:

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

How to solve this?

>Solution :

Add Horizontal Arrangement SpaceBetween, it will work

 OutlinedButton(
        onClick = { }, modifier = Modifier
            .fillMaxWidth()
            .height(48.dp)
    ) {

        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text(text = "Button Text1", textAlign = TextAlign.Start)
            Text(text = "Button Text2", textAlign = TextAlign.End)

        }


    }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading