Jetpack compose live preview

Question

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.

Vacationist

Answer 1

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.

Philomenaphiloo

Answer 2

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:

Update 2:

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

Marquand

@prany Please let me know from where this window will be open? – Vacationist

this just decorates the preview, if the preview pane is not visible then you don't even have this button – Binate

he said "I added @Preview annotation as well" – Binate

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. imgur.com/lbXE8I5 – Marquand

@KhizarHayat Check Akshay's answer. You need to add @Preview annotation to see preview. – Marquand

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. – Vacationist

Answer 3

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.

Predial

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. – Vacationist

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. – Predial

Answer 4

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

Mantilla

It will also work for parameters with default value. – Skitter

Answer 5

I had a similar problem where the preview wouldn't show. The problem was that I had a call to setContent in the function also. Removing this and rebuilding rendered the preview as expected.

So

    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        setContent {
            Greeting()
        }
    }

would fail and

    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        Greeting()
    }

worked as expected.

Surprisingly, and this is the bit I don't understand, once the preview had rendered correctly, I could add the setContent again and it would update and still show.

Pollie

Answer 6

I hope the answers in the previous post helped. However, I want to add a simple feature that will assist while minor modifications are made to the Jetpack compose code, preventing the need to frequently launch your app in order to view the altered layout.

Steps

1. Live edit of literals should be ON. It will be placed to the left side of Code|Split|Design.

2. Start interactive mode. It will be placed to the page of function preview. below Code|Split|Design.

Teriann