# PlaceholderDefaults

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/Placeholder.kt+class:androidx.wear.compose.material.PlaceholderDefaults) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.1.0)

<br />

```
@ExperimentalWearMaterialApi
object PlaceholderDefaults
```

<br />

*** ** * ** ***

Contains the default values used for providing placeholders.

There are three distinct but coordinated aspects to placeholders in Compose for Wear OS. Firstly placeholder `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/placeholder.composable#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` which is drawn over content that is not yet loaded. Secondly a placeholder background which provides a background brush to cover the usual background of containers such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` until all of the content has loaded. Thirdly a placeholder shimmer effect `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/placeholderShimmer.composable#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` effect which runs in an animation loop while waiting for the data to load.

## Summary

| ### Public functions |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#painterWithPlaceholderOverlayBackgroundBrush(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color)( placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState, painter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Create a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` that wraps another painter and overlays a placeholder background brush on top. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderBackgroundBrush(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)( placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Create a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` that paints with a placeholder background brush. |
| `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)(placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color)` Create a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` that can be used for a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` that is used as a placeholder drawn on top of another `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)( originalChipColors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors, placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Create a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` that can be used in placeholder mode. |

## Public functions

### painterWithPlaceholderOverlayBackgroundBrush

Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@Composable
fun painterWithPlaceholderOverlayBackgroundBrush(
    placeholderState: PlaceholderState,
    painter: Painter,
    color: Color = MaterialTheme.colors.surface
): Painter
```

Create a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` that wraps another painter and overlays a placeholder background brush on top. If the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#painterWithPlaceholderOverlayBackgroundBrush(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color)` is `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState#isShowContent()` the original painter will be used. Otherwise the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#painterWithPlaceholderOverlayBackgroundBrush(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color)` will be drawn and then a placeholder background will be drawn over it or a wipe-off brush will be used to reveal the background when the state is `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState#isWipeOff()`.

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState` | the state of the placeholder |
| `painter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | the original painter that will be drawn over when in placeholder mode. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.surface` | the color to use for the placeholder background brush |

### placeholderBackgroundBrush

Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@Composable
fun placeholderBackgroundBrush(
    placeholderState: PlaceholderState,
    color: Color = MaterialTheme.colors.surface
): Painter
```

Create a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` that paints with a placeholder background brush. If the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderBackgroundBrush(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)` is `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState#isShowContent()` then a transparent background will be shown. Otherwise a placeholder background will be drawn or a wipe-off brush will be used to reveal the content underneath when `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState#isWipeOff()` is true.

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState` | the state of the placeholder |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.surface` | the color to use for the placeholder background brush |

### placeholderChipColors

Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@Composable
fun placeholderChipColors(
    placeholderState: PlaceholderState,
    color: Color = MaterialTheme.colors.surface
): ChipColors
```

Create a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` that can be used for a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` that is used as a placeholder drawn on top of another `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`. When not drawing a placeholder background brush the chip will be transparent allowing the contents of the chip below to be displayed.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` with icon and a primary and secondary labels that draws another `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` over the top of it when waiting for placeholder data to load and draws over the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`s normal background color with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)` as the placeholder background color which will be wiped away once all of the placeholder data is loaded:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.PlaceholderDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var secondaryLabelText by remember { mutableStateOf("") }
var iconResource: Int? by remember { mutableStateOf(null) }

val chipPlaceholderState = rememberPlaceholderState {
    labelText.isNotEmpty() && secondaryLabelText.isNotEmpty() && iconResource != null
}
Box {
    if (chipPlaceholderState.isShowContent || chipPlaceholderState.isWipeOff) {
        Chip(
            onClick = { /* Do something */ },
            enabled = true,
            label = {
                Text(
                    text = labelText,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.fillMaxWidth(),
                )
            },
            secondaryLabel = {
                Text(
                    text = secondaryLabelText,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.fillMaxWidth(),
                )
            },
            icon = {
                if (iconResource != null) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                        contentDescription = "airplane",
                        modifier =
                            Modifier.wrapContentSize(align = Alignment.Center)
                                .size(ChipDefaults.IconSize),
                    )
                }
            },
            colors = ChipDefaults.gradientBackgroundChipColors(),
            modifier = Modifier.fillMaxWidth(),
        )
    }
    if (!chipPlaceholderState.isShowContent) {
        Chip(
            onClick = { /* Do something */ },
            enabled = true,
            label = {
                Box(
                    modifier =
                        Modifier.fillMaxWidth()
                            .height(16.dp)
                            .padding(top = 1.dp, bottom = 1.dp)
                            .placeholder(placeholderState = chipPlaceholderState)
                )
            },
            secondaryLabel = {
                Box(
                    modifier =
                        Modifier.fillMaxWidth()
                            .height(16.dp)
                            .padding(top = 1.dp, bottom = 1.dp)
                            .placeholder(placeholderState = chipPlaceholderState)
                )
            },
            icon = {
                Box(
                    modifier =
                        Modifier.size(ChipDefaults.IconSize).placeholder(chipPlaceholderState)
                )
                // Simulate the icon becoming ready after a period of time
                LaunchedEffect(Unit) {
                    delay(2000)
                    iconResource = R.drawable.ic_airplanemode_active_24px
                }
            },
            colors =
                PlaceholderDefaults.placeholderChipColors(
                    placeholderState = chipPlaceholderState
                ),
            modifier = Modifier.fillMaxWidth().placeholderShimmer(chipPlaceholderState),
        )
    }
}
// Simulate data being loaded after a delay
LaunchedEffect(Unit) {
    delay(2500)
    secondaryLabelText = "A secondary label"
    delay(500)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState` | the current placeholder state. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.surface` | the color to use for the placeholder background brush. |

### placeholderChipColors

Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@Composable
fun placeholderChipColors(
    originalChipColors: ChipColors,
    placeholderState: PlaceholderState,
    color: Color = MaterialTheme.colors.surface
): ChipColors
```

Create a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` that can be used in placeholder mode. This will provide the placeholder background effect that covers the normal chip background with a solid background of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)` when the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)` is set to show the placeholder and a wipe off gradient brush when the state is in wipe-off mode. If the state is `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState#isShowContent()` then the normal background will be used. All other colors will be delegated to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)`.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` with icon and a label that put placeholders over individual content slots and then draws a placeholder shimmer over the result and draws over the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`s normal background color with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderDefaults#placeholderChipColors(androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Color)` as the placeholder background color which will be wiped away once all of the placeholder data is loaded:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.PlaceholderDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var iconResource: Int? by remember { mutableStateOf(null) }
val chipPlaceholderState = rememberPlaceholderState {
    labelText.isNotEmpty() && iconResource != null
}

Chip(
    onClick = { /* Do something */ },
    enabled = true,
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(chipPlaceholderState),
        )
    },
    icon = {
        Box(modifier = Modifier.size(ChipDefaults.IconSize).placeholder(chipPlaceholderState)) {
            if (iconResource != null) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ChipDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
    colors =
        PlaceholderDefaults.placeholderChipColors(
            originalChipColors = ChipDefaults.primaryChipColors(),
            placeholderState = chipPlaceholderState,
        ),
    modifier = Modifier.fillMaxWidth().placeholderShimmer(chipPlaceholderState),
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    iconResource = R.drawable.ic_airplanemode_active_24px
    delay(1000)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

| Parameters |
|---|---|
| `originalChipColors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ChipColors` | the chip colors to use when not in placeholder mode. |
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState` | the placeholder state of the component |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.surface` | the color to use for the placeholder background brush |