Make a Row of rotated Text in Jetpack compose

Question

I want to make a Row of -90 degrees rotated Text Composables to make something like below:

However this code (repro case):

@Preview(showBackground = true, backgroundColor = 0xffffffff)
@Composable
fun Preview_Row_With_Rotated_Text() {
    Row {
        Text(
            text = "A text",
            modifier = Modifier
                .padding(2.dp)
                .rotate(-90f),
            maxLines = 1,
        )
        Text(
            text = "A text which is a bit longer",
            modifier = Modifier
                .padding(2.dp)
                .rotate(-90f),
            maxLines = 1,
        )
        Text(
            text = "A text which is kinda longer than previous one",
            modifier = Modifier
                .padding(2.dp)
                .rotate(-90f),
            maxLines = 1,
        )
    }
}

produces this:

The Row uses old width of Text composables (the width of non-rotated Text) to place them one after another.

Where is the reason of this problem?

user_7746134 · Answer

You can try using it in a Column and then rotating that Column by -90f:

@Composable
fun Main() {
    Column(
        modifier = Modifier
            .width(200.dp)
            .rotate(-90f)
    ) {
        MyText(text = "Financial Advice")
        MyText(text = "Strategy and Marketing")
        MyText(text = "Information Technology")
    }
}

@Composable
fun MyText(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .padding(4.dp)
            .fillMaxWidth()
            .background(MaterialTheme.colors.secondary)
            .padding(16.dp),
        textAlign = TextAlign.Center,
        maxLines = 1
    )
}

Make a Row of rotated Text in Jetpack compose

1 Answers