How to align row elements by the baseline in Jetpack Compose

Issue

How to align elements inside a Row by the baseline. My issue is that I want to have a Row element with multiple Text elements and each of the Text elements will have different font and size. By default, they are aligned on the top. I need them to be aligned on the bottom. This is the code:

class MainActivity : ComponentActivity()  {
    override fun onCreate(savedInstanceState: Bundle?)  {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Row {
                    Text(
                        text = "Abrakadabra",
                        style = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold)
                    )
                    Text(
                        text = "Abrakadabra",
                        style = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Bold)
                    )
                }
            }
        }
    }
}

Here is the rendered view of the code:

Solution

In Jetpack Compose 1.0.0 it can be done in this way:

Row {
    Text(
        text = "One",
        fontSize = 20.sp,
        modifier = Modifier.alignByBaseline()
    )

    Text(
        text = "Two",
        fontSize = 12.sp,
        modifier = Modifier.alignByBaseline()
    )
}

Result:

---

If someone wants to align text to the last baseline when using multiline Text it can be done by using Modifier.alignBy(LastBaseline)

Row {
    Text(
        text = "Line 1\nLine 2",
        fontSize = 20.sp,
        modifier = Modifier.alignBy(LastBaseline)
    )

    Text(
        text = "Line 3",
        fontSize = 12.sp,
        modifier = Modifier.alignBy(LastBaseline)
    )
}

Answered By - iknow