androidx.compose.material3.common
This library contains themeless components that can be shared between different Compose Material libraries to build Material Design components. It builds upon the Jetpack Compose libraries.
In this page, you'll find documentation for types, properties, and functions available in the androidx.compose.material3.common package.
Overview
Color Palette
| APIs | Description | |
| Tonal Palette | TonalPalette |
Tonal palette used to build the M3 color scheme |
Icons
| APIs | Description | |
| Icon | Icon |
M3 icon |
Also check out the androidx.compose.material.icons package.
Classes
TonalPalette |
Tonal Palette structure in Material. |
Cmn
|
Objects
Annotations
Top-level functions summary
Unit |
@ComposableA Material Design icon component that draws |
Cmn
|
Unit |
@ComposableA Material Design icon component that draws |
Cmn
|
Unit |
A Material Design icon component that draws |
Cmn
|
Unit |
@ComposableA Material Design icon component that draws |
Cmn
|
Extension functions summary
Modifier |
Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller. |
Cmn
|
Top-level properties summary
ProvidableCompositionLocal<Dp> |
CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible. |
Cmn
|
Top-level functions
Icon
@Composable
fun Icon(
bitmap: ImageBitmap,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = Color.Unspecified
): Unit
A Material Design icon component that draws bitmap using tint, with an optional tint color. If bitmap has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.
To learn more about icons, see Material Design icons
| Parameters | |
|---|---|
bitmap: ImageBitmap |
|
contentDescription: String? |
text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar |
modifier: Modifier = Modifier |
the |
tint: Color = Color.Unspecified |
tint to be applied to |
Icon
@Composable
fun Icon(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = Color.Unspecified
): Unit
A Material Design icon component that draws imageVector using tint, with an optional tint color. If imageVector has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use null for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.
To learn more about icons, see Material Design icons
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.common.Icon
import androidx.compose.material3.common.TonalPaletteDefaults
Icon(
Icons.Outlined.Lock,
contentDescription = "Localized description",
tint = TonalPaletteDefaults.BaselineTonalPalette.primary100
)
| Parameters | |
|---|---|
imageVector: ImageVector |
|
contentDescription: String? |
text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar |
modifier: Modifier = Modifier |
the |
tint: Color = Color.Unspecified |
tint to be applied to |
Icon
@Composable
fun Icon(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = Color.Unspecified
): Unit
A Material Design icon component that draws painter using tint, with an optional tint color. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.
To learn more about icons, see Material Design icons
| Parameters | |
|---|---|
painter: Painter |
|
contentDescription: String? |
text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar |
modifier: Modifier = Modifier |
the |
tint: Color = Color.Unspecified |
tint to be applied to |
Icon
@Composable
fun Icon(
painter: Painter,
tint: ColorProducer?,
contentDescription: String?,
modifier: Modifier = Modifier
): Unit
A Material Design icon component that draws painter using tint, with an optional tint color. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.
To learn more about icons, see Material Design icons
| Parameters | |
|---|---|
painter: Painter |
|
tint: ColorProducer? |
tint to be applied to |
contentDescription: String? |
text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar |
modifier: Modifier = Modifier |
the |
Extension functions
minimumInteractiveComponentSize
fun Modifier.minimumInteractiveComponentSize(): Modifier
Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.
https://m3.material.io/foundations/designing/structure#dab862b1-e042-4c40-b680-b484b9f077f6
This uses the Material recommended minimum size of 48.dp x 48.dp, which may not the same as the system enforced minimum size. The minimum clickable / touch target size (48.dp by default) is controlled by the system via ViewConfiguration and automatically expanded at the touch input layer.
This modifier is not needed for touch target expansion to happen. It only affects layout, to make sure there is adequate space for touch target expansion.
Because layout constraints are affected by modifier order, for this modifier to take effect, it must come before any size modifiers on the element that might limit its constraints.
| See also | |
|---|---|
LocalMinimumInteractiveComponentSize |
Top-level properties
LocalMinimumInteractiveComponentSize
val LocalMinimumInteractiveComponentSize: ProvidableCompositionLocal<Dp>
CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible. If a component has a visual size that is lower than the minimum touch target size, extra space outside the component will be included. If set to 0.dp, there will be no extra space, and so it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.