Code snippets to quickly test Compose Composables

README.md

Compose Preview code snippets

Code snippets

Standard

@Preview(
    name = "Component Name",
    locale = "",
    showBackground = true,
    device = Devices.PIXEL_4_XL
)
@Composable
fun previewComponentName() {
    // Composable goes here
}

Dark Mode

@Preview(
    name = "Component Name (Dark Mode)",
    locale = "",
    showBackground = true,
    device = Devices.PIXEL_4_XL,
    uiMode = UI_MODE_NIGHT_YES
)
@Composable
fun previewComponentNameDarkMode() {
    // Composable goes here
}

Android Studio Live Templates

1. Download GhostbearComposePreview.xml
2. Place the xml file in the templates folder for Android Studio

Windows: %APPDATA%\Google\AndroidStudio<VERSION>\templates

macOS: ~/Library/Application Support/Google/AndroidStudio<VERSION>/templates

Linux: ~/.config/Google/AndroidStudio<VERSION>/templates

GhostbearComposePreview.xml

<templateSet group="GhostbearComposePreview">
  <template name="prew" value="@Preview(&#10;    name = &quot;$NAME$&quot;,&#10;    locale = &quot;$LANG$&quot;,&#10;    showBackground = true,&#10;    device = Devices.PIXEL_4_XL&#10;)&#10;@Composable&#10;fun preview$COMPONENT_NAME$() {&#10;    $END$&#10;}" description="Create @Preview composable function" toReformat="false" toShortenFQNames="true">
    <variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="LANG" expression="" defaultValue="en" alwaysStopAt="false" />
    <variable name="COMPONENT_NAME" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="KOTLIN" value="true" />
      <option name="KOTLIN_COMMENT" value="false" />
    </context>
  </template>
  <template name="prewDark" value="@Preview(&#10;    name = &quot;$NAME$&quot;,&#10;    locale = &quot;$LANG$&quot;,&#10;    showBackground = true,&#10;    device = Devices.PIXEL_4_XL,&#10;    uiMode = UI_MODE_NIGHT_YES&#10;)&#10;@Composable&#10;fun preview$COMPONENT_NAME$DarkMode() {&#10;    $END$&#10;}" description="Create @Preview composable function with dark mode enabled" toReformat="false" toShortenFQNames="true">
    <variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
    <variable name="LANG" expression="" defaultValue="en" alwaysStopAt="true" />
    <variable name="COMPONENT_NAME" expression="" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="KOTLIN" value="true" />
      <option name="KOTLIN_COMMENT" value="false" />
    </context>
  </template>
</templateSet>