Third Text layer in a function is overlapping in Jetpack Compose- Android Studio

Satyam Raj 0
Viewed 16

I was trying to build basic app with jetpack compose. I tried this:

@Composable
fun thisWillAppearInView(){
    Text(text = "Hello")
    Text(text = "\nLarger font")
}

this worked completely fine.First :

But when I tried to use the third Text Function, the preview started getting overlapped. The code was like this:

@Composable
fun thisWillAppearInView(){
    Text(text = "\nHello")
    Text(text = "\nLarger font")
    Text(text = "Smaller font")
}

Second:

android-jetpack-compose kotlin android
1 Answers
@Composable
fun thisWillAppearInView(){
    Text(text = "Hello")
    Text(text = "\nLarger font")
}

The reason this looks like working because you are creating a Composable that has height as 2 times of your font height because you have 2 lines due to Text(text = "\nLarger font") while leaving space above. Actually these 2 Texts are overlapping each other. If you change background of second Text it will be clear.

If you wish to place Composables one after another vertically you should use Column Composable.

@Composable
fun thisWillAppearInView(){
   Column{
    Text(text = "Hello")
    Text(text = "Larger font")
    Text(text = "Smaller font")
   }
}
Thracian0
Related