Why does Android Studio Kotlin Compose Template display text wrong when app is run?

Question

I built an app from the Android Studio template using the new Compose feature (official docs).

The Preview looks like the following:

However, when I run the application, it looks like this (text is much smaller & is not centered in the View):

Is that not an actual Preview of the UI in the editor? Is there a way to do a true preview of Compose in Android Studio?

Answer 1

Jetpack Compose Preview shows only the elements contained in the function that has the annotation, not the entire device display.
You set the @Preview on the Greeting function, which contain just a Text() element, and that's what you got in the preview panel.
You can wrap your Text with a Column or Box and tell Compose to fill the entire screen with a modifier.

Box(
   Modifier.fillMaxSize()
){
   Text(text = "Hello $name!")
}

Note that even on your device, the text does not fill the entire screen, it is only placed in the first available space. Everything works fine.