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


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

Issue

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.href=”https://i.stack.imgur.com/Ikpja.png” rel=”nofollow noreferrer”>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:

Solution

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

Answered By – Thracian

people found this article helpful. What about you?