kotlinandroid-jetpack-compose

Justify Text in Jetpack Compose


I have started taking training courses at developer.android.com. I can't figure out why TextAlign.Justify doesn't work.

There's my code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LearnTogetherTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Tutorial()
                }
            }
        }
    }
}

@Composable
fun TutorialHeaderImage(image: Painter) {
    Image(
        painter = image,
        contentDescription = null
    )
}

@Composable
fun TutorialText(
    header: String,
    p1: String,
    p2: String
) {
    Text(
        text = header,
        fontSize = 24.sp,
        modifier = Modifier.padding(16.dp)
    )
    Text(
        text = p1,
        fontSize = 16.sp,
        modifier = Modifier.padding(start = 16.dp, end = 16.dp),
        textAlign = TextAlign.Justify,
    )
    Text(
        text = p2,
        fontSize = 16.sp,
        modifier = Modifier.padding(16.dp),
        textAlign = TextAlign.Justify,
    )
}

@Composable
fun Tutorial(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
    ) {
        TutorialHeaderImage(image = painterResource(R.drawable.bg_compose_background))
        TutorialText(
            header = stringResource(R.string.tutorial_header_text),
            p1 = stringResource(R.string.tutorial_p1_text),
            p2 = stringResource(R.string.tutorial_p2_text)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun TutorialPreview() {
    LearnTogetherTheme {
        Tutorial()
    }
}

There is an expected result

While my actual result is

It seems like the alignment is not applied correctly, if you look to the right side

I would appreciate any help.

Upd: The course and the exercise


Solution

  • This very likely is a bug, as described in this Issue on the Google Issue Tracker. I would suggest to upvote the issue there to draw more attention to it.

    If you execute your code on an emulator with API <= 34 (left), you will see that it behaves as expected, while on API35 (right), the issue starts occuring:

    Screenshot 1 | Screenshot 2

    There also seems to be a dependency on the letterSpacing argument, because if you apply 0.sp there, the issue goes away on API35:

    Text(
        modifier = Modifier
            .fillMaxSize()
            .safeContentPadding()
            .border(2.dp, Color.Black),
        text = LoremIpsum(500).values.joinToString(),
        fontSize = 16.sp,
        letterSpacing = 0.sp,  // this appears to be a workaround
        textAlign = TextAlign.Justify,
    )