Blog Infos
Author
Published
Topics
Published

The @Preview annotation has several capabilities to help manage previewing composable functions. This article, going deep dive and covering the power of @Preview! 🔥

Theme preview
@Preview
@Composable
fun MyButtonPreview() {
    MyAppTheme {
        MyButton()
    }
}

This function generate the preview:

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyButtonPreview() {
    ComposeNewsTheme {
        MyButton()
    }
}

Here we got:

@Preview(name = "Light")
@Preview(
    name = "Dark",
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
annotation class ThemePreviews

Now, It can be used like this:

@ThemePreviews
@Composable
fun MyButtonPreview() {
    MyAppTheme {
        MyButton()
    }
}
Font scale preview
@Preview(fontScale = 1.0f, name = "Default (100%)")
@Preview(fontScale = 0.85f, name = "Small (85%) ")
@Preview(fontScale = 1.15f, name = "Large (115%)")
@Preview(fontScale = 1.3f, name = "Largest (130%) ")
annotation class FontScalePreview

And the result:

Multi-Language preview
@Preview(locale = "en", name = "English")
@Preview(locale = "fr", name = "French")
@Preview(locale = "ar", name = "Arabic")
@Preview(locale = "ja", name = "Japanese")
annotation class MultiLanguagePreview
Screen sizes preview
@Preview(name = "Phone", device = "spec:width=411dp,height=891dp")
@Preview(name = "Foldable", device = "spec:width=673.5dp,height=841dp,dpi=480")
@Preview(name = "Tablet", device = "spec:width=1280dp,height=800dp,dpi=480")
@Preview(name = "Desktop", device = "spec:width=1920dp,height=1080dp,dpi=480")
annotation class DevicesPreviews

Here the result:

The device attribute also have some predefined phones specifications for testing more easily:

Preview a Screen
@Composable
fun NewsListScreen(
    viewModel: NewsListViewModel,
    onNavigateToDetailScreen: (news: News) -> Unit,
) {

    ...

}

For seeing the preview of this composable, you must provide a viewModel instance that makes previewing difficult. For handling this scenario, you can define a composable wrapper:

@Composable
fun NewsListRoute(
    viewModel: NewsListViewModel,
    onNavigateToDetailScreen: (news: News) -> Unit,
) {

    ...

    NewsListScreen(...)

}

Then change the Screen composable to a stateless version:

@Composable
private fun NewsListScreen(
    newsListState: NewsListState,
    onNavigateToDetailScreen: (news: News) -> Unit,
    onFavoriteClick: (news: News) -> Unit,
    onRefresh: () -> Unit,
) {

    ...

}
Provide parameter for previewing
@Composable
fun NewsItem(
    news: News,
    onFavoriteClick: (news: News) -> Unit,
) {

    ...

}

To prevent hard coding default values for previewing above composable, there is an annotation called @PreviewParameter.

@Preview
@Composable
private fun NewsItemPreview(
    @PreviewParameter(NewsProvider::class)
    news: News,
) {
    NewsItem(news = news, onFavoriteClick = {})
}

This is how the NewsProvider class define:

class NewsProvider: PreviewParameterProvider<News> {
    override val values = sequenceOf(
        News(
            author = "Kaaveh Mohamedi",
            description = "This is a sample description.",
            publishedAt = "2022/02.10",
            ...
        ),
        News(...),
        ...
    )
}

Job Offers

Job Offers


    Senior Android Engineer – Courier Apps (m/f/d)

    Just Eat Takeaway.com
    Berlin
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

Branching out to Jetpack Compose

As one of the most widely used social media platforms, Twitter is always hunting for ways to better connect its users. In early 2021 the Client UI team at Twitter began the task of integrating…
Watch Video

Branching out to Jetpack Compose

Nacho López & Chris Banes
Staff Software Engineer
Twitter

Branching out to Jetpack Compose

Nacho López & Chr ...
Staff Software Engin ...
Twitter

Branching out to Jetpack Compose

Nacho López & C ...
Staff Software Engineer
Twitter

Jobs

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu