1

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

The Preview looks like the following:

Android Compose preview

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

Android Compose running example

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?

Nimantha
  • 6,405
  • 6
  • 28
  • 69
raddevus
  • 8,142
  • 7
  • 66
  • 87

1 Answers1

0

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.

Stefano Sansone
  • 2,377
  • 7
  • 20
  • 39
  • The code isn't mine, it's the Android Studio Template's code. So I was wondering why the preview wasn't displaying the same way that the final app displays. Thanks for your answer, but it doesn't actually compile. There is an error on fillMaxSize(). You can see what the error looks like in android studio in this image: https://i.stack.imgur.com/cIhqY.png – raddevus Dec 06 '21 at 15:45
  • 1
    Hi @raddevus , where are your `Box` and `Modifier` coming from? Check your imports. However this is an [example from the official docs](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)) . You can also try with `Column` instead of `Box` , but I think you imported the wrong modifier. – Stefano Sansone Dec 06 '21 at 15:52