The second Android 11 Developer Preview is now available, test it out and share your feedback.

androidx.ui.material.surface

Top-level functions summary

Unit
Card(modifier: Modifier = Modifier.None, shape: Shape = MaterialTheme.shapes().card, color: Color = MaterialTheme.colors().surface, contentColor: Color = contentColorFor(color), border: Border? = null, elevation: Dp = 1.dp, children: () -> Unit)

Cards are Surfaces that display content and actions on a single topic.

Unit
Surface(modifier: Modifier = Modifier.None, shape: Shape = RectangleShape, color: Color = MaterialTheme.colors().surface, contentColor: Color = contentColorFor(color), border: Border? = null, elevation: Dp = 0.dp, children: () -> Unit)

The Surface is responsible for:

Extension properties summary

For ColorPalette
Color

primarySurface represents the background color of components that are ColorPalette.primary in light theme, and ColorPalette.surface in dark theme, such as androidx.ui.material.TabRow and androidx.ui.material.TopAppBar.

Top-level functions

Card

@Composable fun Card(
    modifier: Modifier = Modifier.None,
    shape: Shape = MaterialTheme.shapes().card,
    color: Color = MaterialTheme.colors().surface,
    contentColor: Color = contentColorFor(color),
    border: Border? = null,
    elevation: Dp = 1.dp,
    children: () -> Unit
): Unit

Cards are Surfaces that display content and actions on a single topic.

import androidx.ui.core.Text
import androidx.ui.material.surface.Card

Card {
    Text("Card Content")
}
Parameters
modifier: Modifier = Modifier.None Modifier to be applied to the layout of the card.
shape: Shape = MaterialTheme.shapes().card Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors().surface The background color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this Surface to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: Border? = null Optional border to draw on top of the card
elevation: Dp = 1.dp The z-coordinate at which to place this surface. This controls the size of the shadow below the surface.

Surface

@Composable fun Surface(
    modifier: Modifier = Modifier.None,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors().surface,
    contentColor: Color = contentColorFor(color),
    border: Border? = null,
    elevation: Dp = 0.dp,
    children: () -> Unit
): Unit

The Surface is responsible for:

  1. Clipping: Surface clips its children to the shape specified by shape
  2. Elevation: Surface elevates its children on the Z axis by elevation pixels, and draws the appropriate shadow.
  3. Borders: If shape has a border, then it will also be drawn.

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface casts shadows.

contentColor is the preferred color for any children inside this surface - any Text inside this Surface will use this color by default.

If no contentColor is set, this surface will try and match its background color to a color defined in the theme ColorPalette, and return the corresponding onFoo color. For example, if the color of this surface is ColorPalette.surface, contentColor will be set to ColorPalette.onSurface. If color is not part of the theme palette, contentColor will keep the same value set above this Surface.

To modify these default style values used by text, use CurrentTextStyleProvider or explicitly pass a new TextStyle to your text.

To manually retrieve the content color inside a surface, use contentColor.

Parameters
modifier: Modifier = Modifier.None Modifier to be applied to the layout corresponding to the surface
shape: Shape = RectangleShape Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors().surface The background color. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this Surface to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: Border? = null Optional border to draw on top of the surface
elevation: Dp = 0.dp The z-coordinate at which to place this surface. This controls the size of the shadow below the surface.

Extension properties

primarySurface

val ColorPalette.primarySurface: Color

primarySurface represents the background color of components that are ColorPalette.primary in light theme, and ColorPalette.surface in dark theme, such as androidx.ui.material.TabRow and androidx.ui.material.TopAppBar. This is to reduce brightness of large surfaces in dark theme, aiding contrast and readability. See Dark Theme.

Return
ColorPalette.primary if in light theme, else ColorPalette.surface