4

I just started working on jetpack compose and downloaded sample of Jetnews.

When I opened MainActivity or JetnewsApp.kt I am unable to see preview of Composable function, I added @Preview annotation as well but unable to see live preview.

Can anyone please help me to find live preview.
Thanks in advance.

pRaNaY
  • 21,330
  • 22
  • 85
  • 134
Khizar Hayat
  • 2,629
  • 2
  • 14
  • 21

4 Answers4

8

If your Preview never show after add @Preview annotation in JetnewsApp class. In my case after adding @Preview i close project and then open project again it's working fine for me in Macbook pro.

Anas Mehar
  • 2,390
  • 9
  • 19
2

In JetnewsApp, SelectTopicButton.kt only have @Preview() tags. When in any file we have @Preview() it will automatically show preview in the right side.

In show decoration mode you can get the preview of the item with the mobile image, how does it look on the screen.

To get a live preview we need to add @Preview tag before @Composable tag and the fun must have something to render.


I had tried adding @Preview() and @Preview("MyScreen preview") in JetnewsApp.kt and it shows the preview.

enter image description here

Akshay Nandwana
  • 1,130
  • 10
  • 17
  • Thanks for detailed answer but as I mentioned in my question I already added @Preview annotation and even then it didn't work. I wokred when I build and re open. – Khizar Hayat Oct 24 '19 at 10:49
  • 1
    There is a delay when we add preview tag in the file. I think as this is the canary version, the official release will have some solution for this or may be the delay will get short. – Akshay Nandwana Oct 24 '19 at 11:24
0

Update:

Before that we have to add @Preview on JetnewsApp to get preview.

@Preview
@Composable
fun JetnewsApp() { ... }

You just need to check the "Show Decorations" option to show real layout preview.

You can toggle both preview using same option.

Check the below image:

enter image description here

Update 2:

Also invalidate and restart Android Studio if it doesn't work at first. Remember this is still in development.

ZF007
  • 3,318
  • 8
  • 26
  • 39
pRaNaY
  • 21,330
  • 22
  • 85
  • 134
  • @prany Please let me know from where this window will be open? – Khizar Hayat Oct 24 '19 at 10:16
  • this just decorates the preview, if the preview pane is not visible then you don't even have this button – Tim Oct 24 '19 at 10:17
  • he said "I added @Preview annotation as well" – Tim Oct 24 '19 at 10:22
  • First I just misunderstood the que content. As I am trying the same example and by adding `@Preview` on `JetnewsApp`, I can see the preview. https://imgur.com/lbXE8I5 – pRaNaY Oct 24 '19 at 10:30
  • @KhizarHayat Check Akshay's answer. You need to add `@Preview` annotation to see preview. – pRaNaY Oct 24 '19 at 10:33
  • 1
    Thanks pRaNay acutally i already added preview annotation but it didn't work at that time I build app and ropened class then this preview window automatically appeared. – Khizar Hayat Oct 24 '19 at 10:36
0

btw currently @Preview just work for @Composable function without params. so please check again your composable function

Raka Adi Nugroho
  • 585
  • 4
  • 5