CODEWITHSUNDEEP
androidlive-previewandroid-jetpack-compose
Khizar Hayat
Khizar Hayat

Reputation: 3805

Jetpack compose live preview

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.

Upvotes: 7

Views: 16420

Answers (6)

Rajen Trivedi
Rajen Trivedi

Reputation: 3

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.

Upvotes: 0

Chris
Chris

Reputation: 5191

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.

Upvotes: 0

Raka Adi Nugroho
Raka Adi Nugroho

Reputation: 4253

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

Upvotes: 2

pRaNaY
pRaNaY

Reputation: 25312

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.

Upvotes: 2

Akshay Nandwana
Akshay Nandwana

Reputation: 1292

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

Upvotes: 2

Anas Mehar
Anas Mehar

Reputation: 2835

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.

Upvotes: 12

Related Questions