Skip to content

Showkase

akshay-at-yml edited this page Aug 25, 2022 · 11 revisions

Intro

Quick Setup

1. Add the dependency to the module which has a number of UI components

implementation "com.airbnb.android:showkase:1.0.0-beta14"
kapt "com.airbnb.android:showkase-processor:1.0.0-beta14"

2. Define the same module as ShowkaseRootModule
Each module can have only one Showkase root annotation.

@ShowkaseRoot
class MyRootModule: ShowkaseRootModule

3. Now provide @Previews for each of the composables you want to view in the Showkase Browser.
Showkase also has @ShowkaseComposable, which also can be used instead of @Preview.
Use group and name parameters of @Preview or @ShowkaseComposable for proper categorization of UI elements in the Showkase Browser
Eg :

@Preview(
    name = "filled",
    group = "card"
)
@Composable
fun CardFilled() {
    HealthCareTheme {
        HCard(
            title = "Here is the title",
            description = "this is description \nSecond line continued... Some text\nThird Line",
            tags = listOf("Blog", "Reports")
        )
    }
}
  1. Additional Info
  • If any @Preview should be skipped from Showkase browser, add @ShowkaseComposable(skip=true) to your preview composable
  • @ShowkaseColor - Any Compose color can be marked with this annotation, to make it a part of Showkase browser
  • @ShowkaseTypography - A typography marked with this annotation will be available in Showkase Browser Please see Showkase for detailed documentation

Showkase in Screenshot Testing

Clone this wiki locally