# Preview

Artifact: [androidx.compose.ui:ui-tooling-preview](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/tooling/preview/Preview.kt+class:androidx.compose.ui.tooling.preview.Preview) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0) Common/All
- Cmn

  ```
  @MustBeDocumented
  @Retention(value = AnnotationRetention.BINARY)
  @Target(allowedTargets = [AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION])
  @Repeatable
  annotation Preview
  ```

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview` can be applied to either of the following:

- @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` methods with no parameters to show them in the Android Studio preview.

- Annotation classes, that could then be used to annotate @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` methods or other annotation classes, which will then be considered as indirectly annotated with that `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview`.

The annotation contains a number of parameters that allow to define the way the @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered within the preview.

The passed parameters are only read by Studio when rendering the preview.

## Summary

| ### Public constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#Preview(kotlin.String,kotlin.String,kotlin.Int,kotlin.Int,kotlin.Int,kotlin.String,kotlin.Float,kotlin.Boolean,kotlin.Boolean,kotlin.Long,kotlin.Int,kotlin.String,kotlin.Int)( name: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, group: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, apiLevel: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, widthDp: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, heightDp: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, locale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, fontScale: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.01) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, showSystemUi: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, showBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, backgroundColor: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html, uiMode: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, device: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, wallpaper: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` | Cmn |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#apiLevel()` API level to be used when rendering the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#backgroundColor()` The 32-bit ARGB color int for the background or 0 if not set | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#device()` Device string indicating the device to use in the preview. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#fontScale()` User preference for the scaling factor for fonts, relative to the base density scaling. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#group()` Group name for this @`https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#heightDp()` Max height in DP the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#locale()` Current user preference for the locale, corresponding to [locale](https://d.android.com/guide/topics/resources/providing-resources.html#LocaleQualifier) resource qualifier. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#name()` Display name of this preview allowing to identify it in the panel. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#showBackground()` If true, the @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will use a default background color. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#showSystemUi()` If true, the status bar and action bar of the device will be displayed. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#uiMode()` Bit mask of the ui mode as per `android.content.res.Configuration.uiMode` | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#wallpaper()` Integer defining which wallpaper from those available in Android Studio to use for dynamic theming. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview#widthDp()` Max width in DP the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in. | Cmn |

## Public constructors

### Preview

Cmn Added in [1.9.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.9.0)

```
Preview(
    name: String = "",
    group: String = "",
    apiLevel: @IntRange(from = 1) Int = -1,
    widthDp: Int = -1,
    heightDp: Int = -1,
    locale: String = "",
    fontScale: @FloatRange(from = 0.01) Float = 1.0f,
    showSystemUi: Boolean = false,
    showBackground: Boolean = false,
    backgroundColor: Long = 0,
    uiMode: Int = 0,
    device: String = Devices.DEFAULT,
    wallpaper: Int = Wallpapers.NONE
)
```

| Parameters |
|---|---|
| `name: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = ""` | Display name of this preview allowing to identify it in the panel. |
| `group: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = ""` | Group name for this @`https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview`. This allows grouping them in the UI and display only one or more of them. |
| `apiLevel: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = -1` | API level to be used when rendering the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` |
| `widthDp: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = -1` | Max width in DP the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in. Use this to restrict the size of the rendering viewport. |
| `heightDp: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = -1` | Max height in DP the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in. Use this to restrict the size of the rendering viewport. |
| `locale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = ""` | Current user preference for the locale, corresponding to [locale](https://d.android.com/guide/topics/resources/providing-resources.html#LocaleQualifier) resource qualifier. By default, the `default` folder will be used. To preview an RTL layout use a locale that uses right to left script, such as `ar` (or the `ar-rXB` pseudo locale). |
| `fontScale: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.01) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | User preference for the scaling factor for fonts, relative to the base density scaling. |
| `showSystemUi: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | If true, the status bar and action bar of the device will be displayed. The @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in the context of a full activity. |
| `showBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | If true, the @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will use a default background color. |
| `backgroundColor: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html = 0` | The 32-bit ARGB color int for the background or 0 if not set |
| `uiMode: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | Bit mask of the ui mode as per `android.content.res.Configuration.uiMode` Value is one of the following: - `15` - `0` - `5` - `3` - `2` - `1` - `4` - `7` - `6` - `48` - `16` - `32` <br /> |
| `device: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = Devices.DEFAULT` | Device string indicating the device to use in the preview. See the available devices in `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Devices`. Value is one of the following: - - `id:Nexus 7` - `id:Nexus 7 2013` - `id:Nexus 5` - `id:Nexus 6` - `id:Nexus 9` - `name:Nexus 10` - `id:Nexus 5X` - `id:Nexus 6P` - `id:pixel_c` - `id:pixel` - `id:pixel_xl` - `id:pixel_2` - `id:pixel_2_xl` - `id:pixel_3` - `id:pixel_3_xl` - `id:pixel_3a` - `id:pixel_3a_xl` - `id:pixel_4` - `id:pixel_4_xl` - `id:pixel_4a` - `id:pixel_5` - `id:pixel_6` - `id:pixel_6_pro` - `id:pixel_6a` - `id:pixel_7` - `id:pixel_7_pro` - `id:pixel_7a` - `id:pixel_8` - `id:pixel_8_pro` - `id:pixel_8a` - `id:pixel_9` - `id:pixel_9_pro` - `id:pixel_9_pro_xl` - `id:pixel_9_pro_fold` - `id:pixel_fold` - `id:pixel_tablet` - `id:automotive_1024p_landscape` - `id:wearos_large_round` - `id:wearos_small_round` - `id:wearos_square` - `id:wearos_rect` - `spec:width=411dp,height=891dp` - `spec:width=673dp,height=841dp` - `spec:width=1280dp,height=800dp,dpi=240` - `spec:width=1920dp,height=1080dp,dpi=160` - `spec:width=1280dp,height=720dp` - `spec:width=1920dp,height=1080dp` <br /> |
| `wallpaper: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Wallpapers.NONE` | Integer defining which wallpaper from those available in Android Studio to use for dynamic theming. Value is one of the following: - `-1` - `0` - `1` - `2` - `3` <br /> |

## Public properties

### apiLevel

Cmn

```
val apiLevel: Int
```

API level to be used when rendering the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable`

### backgroundColor

Cmn

```
val backgroundColor: Long
```

The 32-bit ARGB color int for the background or 0 if not set

### device

Cmn

```
val device: String
```

Device string indicating the device to use in the preview. See the available devices in `https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Devices`.

Value is one of the following:

- 
- `id:Nexus 7`
- `id:Nexus 7 2013`
- `id:Nexus 5`
- `id:Nexus 6`
- `id:Nexus 9`
- `name:Nexus 10`
- `id:Nexus 5X`
- `id:Nexus 6P`
- `id:pixel_c`
- `id:pixel`
- `id:pixel_xl`
- `id:pixel_2`
- `id:pixel_2_xl`
- `id:pixel_3`
- `id:pixel_3_xl`
- `id:pixel_3a`
- `id:pixel_3a_xl`
- `id:pixel_4`
- `id:pixel_4_xl`
- `id:pixel_4a`
- `id:pixel_5`
- `id:pixel_6`
- `id:pixel_6_pro`
- `id:pixel_6a`
- `id:pixel_7`
- `id:pixel_7_pro`
- `id:pixel_7a`
- `id:pixel_8`
- `id:pixel_8_pro`
- `id:pixel_8a`
- `id:pixel_9`
- `id:pixel_9_pro`
- `id:pixel_9_pro_xl`
- `id:pixel_9_pro_fold`
- `id:pixel_fold`
- `id:pixel_tablet`
- `id:automotive_1024p_landscape`
- `id:wearos_large_round`
- `id:wearos_small_round`
- `id:wearos_square`
- `id:wearos_rect`
- `spec:width=411dp,height=891dp`
- `spec:width=673dp,height=841dp`
- `spec:width=1280dp,height=800dp,dpi=240`
- `spec:width=1920dp,height=1080dp,dpi=160`
- `spec:width=1280dp,height=720dp`
- `spec:width=1920dp,height=1080dp`

<br />

### fontScale

Cmn

```
val fontScale: Float
```

User preference for the scaling factor for fonts, relative to the base density scaling.

### group

Cmn

```
val group: String
```

Group name for this @`https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/Preview`. This allows grouping them in the UI and display only one or more of them.

### heightDp

Cmn

```
val heightDp: Int
```

Max height in DP the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in. Use this to restrict the size of the rendering viewport.

### locale

Cmn

```
val locale: String
```

Current user preference for the locale, corresponding to [locale](https://d.android.com/guide/topics/resources/providing-resources.html#LocaleQualifier) resource qualifier. By default, the `default` folder will be used. To preview an RTL layout use a locale that uses right to left script, such as `ar` (or the `ar-rXB` pseudo locale).

### name

Cmn

```
val name: String
```

Display name of this preview allowing to identify it in the panel.

### showBackground

Cmn

```
val showBackground: Boolean
```

If true, the @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will use a default background color.

### showSystemUi

Cmn

```
val showSystemUi: Boolean
```

If true, the status bar and action bar of the device will be displayed. The @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in the context of a full activity.

### uiMode

Cmn

```
val uiMode: Int
```

Bit mask of the ui mode as per `android.content.res.Configuration.uiMode`

Value is one of the following:

- `15`
- `0`
- `5`
- `3`
- `2`
- `1`
- `4`
- `7`
- `6`
- `48`
- `16`
- `32`

<br />

### wallpaper

Cmn

```
val wallpaper: Int
```

Integer defining which wallpaper from those available in Android Studio to use for dynamic theming.

Value is one of the following:

- `-1`
- `0`
- `1`
- `2`
- `3`

<br />

### widthDp

Cmn

```
val widthDp: Int
```

Max width in DP the annotated @`https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` will be rendered in. Use this to restrict the size of the rendering viewport.