How to align view in end without using nested column in jetpack compose

April 25, 2023

I want to show view Text 1, Text 2 at Start position and Text 3 at End position. Something like this image

I did with the help of this logic

@Composable
fun XyzContent(isVisible: Boolean) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Text 1",
            style = SlateTypography.body1,
        )
        Text(
            text = "Text 2",
            style = SlateTypography.body1,
        )
        AnimatedVisibility(visible = isVisible) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.End
            ) {
                Text(
                    text = "Text 3",
                    style = SlateTypography.body1,
                )
            }
        }
    }
}

I want to avoid nested Column inside AnimatedVisibility. so I passed directly modifier in the AnimatedVisibility and remove Column, but now it’s not working correctly. It showing me Text 3 at Start position.

@Composable
fun XyzContent(isVisible: Boolean) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Text 1",
            style = SlateTypography.body1,
        )
        Text(
            text = "Text 2",
            style = SlateTypography.body1,
        )
        AnimatedVisibility(
            modifier = Modifier
                .fillMaxWidth()
                .align(End),
            visible = isVisible
        ) {
            Text(
                text = "Text 3",
                style = SlateTypography.body1,
            )
        }
    }
}

It looks like this

So what is the best way to avoid this nested Column ?

>Solution :

You can remove the .fillMaxWidth() from the AnimatedVisibility‘s modifier. If that text gets the entire width, it doesn’t have a chance to align itself to the end (*actually, you could also do that by changing the text alignment, but it’s specific to text and doesn’t seem to be necessary here).

You can try this:

@Composable
fun XyzContent(isVisible: Boolean) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Text 1",
            style = SlateTypography.body1,
        )
        Text(
            text = "Text 2",
            style = SlateTypography.body1,
        )
        AnimatedVisibility(
            modifier = Modifier.align(End),
            visible = isVisible
        ) {
            Text(
                text = "Text 3",
                style = SlateTypography.body1,
            )
        }
    }
}