How to align row elements by the baseline in Jetpack Compose

Question

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:

iknow · Accepted Answer · 2021-07-29T20:31:08.173

74

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)
    )
}

edited Jul 29 '21 at 20:31

answered Nov 30 '20 at 11:54

iknow

8,358
12
41
68

Can you help me with this? @iknow https://stackoverflow.com/questions/70975294/how-to-align-in-compose-row-with-column – StuartDTO Feb 04 '22 at 08:17
@StuartDTO I was looking at this question but currently I have no idea how to solve this – iknow Feb 04 '22 at 19:29

score 1 · Answer 2 · answered Jan 23 '22 at 12:52

I'm not at all proud of this; I'm just reporting. The answers listed on stackoverflow ( use Modifier.alignBy(LastBaseline), wrap Text() inside of a Box() and use Modifier.align(Alignment.BottomStart)) didn't work for me. Probably because I'm using an onTextLayout callback.

Until I can find something way less hacky, this will get me what I want.

@Composable
fun ForceTextToBottom(){
    val density=LocalDensity.current
    var offset by remember{mutableStateOf(0.dp)}
    var aHeightThatIAlreadyKnowInAdvance=100.dp
    Column{
           //some stuff before the stubborn Text()
        Row{//the parent of the stubborn Text()
            Image{//the sibling of the stubborn Text()
            Text(sentence, //This is the stubborn Text()
                ...
                ...
                modifier=Modifier
                    .height(aHeightThatIAlreadyKnowInAdvance)
                    .offset(y=offset)
                ...
                ...
                onTextLayout={textLayoutResult->
                    //Some layout size correction logic
                    offset=with(density){100.dp-textLayoutResult.getLineBottom(textLayoutResult.lineCount-1).toDp()}
                    }
                )
            }               
        }
    }
}

Not anything I'm happy about. But it gets the text to align to the bottom.

score 0 · Answer 3 · answered Feb 26 '20 at 07:34

0

Add the following modifier to both the Text composables and that should take care of it. Here is the code for your reference

Text(...,  modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))
Text(...,  modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))

Screenshot

answered Feb 26 '20 at 07:34

Vinay Gaba

1,156
3
12
26

1

Thank you, I didn't find anything like this in the docs, can you share the link to this, please – burkinafaso3741 Feb 26 '20 at 17:19
This was from a lot of experimentation as I was playing with Compose and reading through the code. Dive into the comments for `LayoutGravity.RelativeToSiblings` to get some more info! Unfortunately that's the only resource available at the moment. – Vinay Gaba Feb 27 '20 at 00:13
4

This is no longer valid – RickSanchez725 Sep 29 '20 at 17:49

RickSanchez725 · Answer 4 · 2021-09-27T14:06:55.350

0

UPDATE: This is no longer valid. Check @iknow's answer instead.

Currently, using Jetpack Compose 1.0.0-alpha03, you can achieve that with:

Text(modifier = Modifier.alignWithSiblings(FirstBaseline), ...)

edited Sep 27 '21 at 14:06

answered Sep 29 '20 at 17:42

RickSanchez725

336
1
6
14

How to align row elements by the baseline in Jetpack Compose

4 Answers4