Google is committed to advancing racial equity for Black communities. See how.

androidx.compose.foundation

Interfaces

Indication

Generic interface to define visual effects when certain interaction happens.

IndicationInstance

Generic interface to define the instance if the Indication to draw visual effects when certain interaction happens.

Interaction

An Interaction represents transient UI state for a component, typically separate from the actual 'business' state that a component may control.

Classes

Border

Class to specify border appearance.

BorderStroke

Class to specify the stroke to draw border with.

InteractionState

InteractionState represents a Set of Interactions present on a given component.

ScrollState

State of the scroll.

Type-aliases

ContentGravity

Annotations

ExperimentalFoundationApi

InternalFoundationApi

Top-level functions summary

Unit
BaseTextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, textColor: Color = Color.Unset, textStyle: TextStyle = currentTextStyle(), keyboardType: KeyboardType = KeyboardType.Text, imeAction: ImeAction = ImeAction.Unspecified, onImeActionPerformed: (ImeAction) -> Unit = {}, visualTransformation: VisualTransformation = VisualTransformation.None, onTextLayout: (TextLayoutResult) -> Unit = {}, onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, cursorColor: Color = contentColor())

Composable that enables users to edit text via hardware or software keyboard.

Border
Border(size: Dp, color: Color)

Create Border class with size and Color

BorderStroke
BorderStroke(width: Dp, color: Color)

Create BorderStroke class with width and Color

Unit
Box(modifier: Modifier = Modifier, shape: Shape = RectangleShape, backgroundColor: Color = Color.Transparent, border: BorderStroke? = null, padding: Dp = border?.width ?: 0.dp, paddingStart: Dp = Dp.Unspecified, paddingTop: Dp = Dp.Unspecified, paddingEnd: Dp = Dp.Unspecified, paddingBottom: Dp = Dp.Unspecified, gravity: ContentGravity = ContentGravity.TopStart, children: () -> Unit = emptyContent())

A convenience composable that combines common layout and draw logic.

Unit
Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit)

Component that allow you to specify an area on the screen and perform canvas drawing on this area.

Unit
ClickableText(text: AnnotatedString, modifier: Modifier = Modifier, style: TextStyle = TextStyle.Default, softWrap: Boolean = true, overflow: TextOverflow = TextOverflow.Clip, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, onClick: (Int) -> Unit)

A continent version of Text component to be able to handle click event on the text.

Unit
Icon(asset: VectorAsset, modifier: Modifier = Modifier, tint: Color = contentColor())

Icon component that draws asset using tint, defaulting to contentColor.

Unit
Icon(asset: ImageAsset, modifier: Modifier = Modifier, tint: Color = contentColor())

Icon component that draws asset using tint, defaulting to contentColor.

Unit
Icon(painter: Painter, modifier: Modifier = Modifier, tint: Color = contentColor())

Icon component that draws a painter using tint, defaulting to contentColor.

Unit
Image(asset: ImageAsset, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null)

A composable that lays out and draws a given ImageAsset.

Unit
Image(asset: VectorAsset, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null)

A composable that lays out and draws a given VectorAsset.

Unit
Image(painter: Painter, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null)

Creates a composable that lays out and draws a given Painter.

Unit
ProvideTextStyle(value: TextStyle, children: () -> Unit)

This component is used to set the current value of the Text style ambient.

Unit
ScrollableColumn(modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(0f), verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalAlignment: Alignment.Horizontal = Alignment.Start, reverseScrollDirection: Boolean = false, isScrollEnabled: Boolean = true, contentPadding: PaddingValues = PaddingValues(0.dp), children: ColumnScope.() -> Unit)

Variation of Column that scrolls when content is bigger than its height.

Unit
ScrollableRow(modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(0f), horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, verticalAlignment: Alignment.Vertical = Alignment.Top, reverseScrollDirection: Boolean = false, isScrollEnabled: Boolean = true, contentPadding: PaddingValues = PaddingValues(0.dp), children: RowScope.() -> Unit)

Variation of Row that scrolls when content is bigger than its width.

Unit
Text(text: String, modifier: Modifier = Modifier, color: Color = Color.Unset, fontSize: TextUnit = TextUnit.Inherit, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Inherit, textDecoration: TextDecoration? = null, textAlign: TextAlign? = null, lineHeight: TextUnit = TextUnit.Inherit, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, inlineContent: Map<String, InlineTextContent> = mapOf(), onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = currentTextStyle())

High level element that displays text and provides semantics / accessibility information.

Unit
Text(text: AnnotatedString, modifier: Modifier = Modifier, color: Color = Color.Unset, fontSize: TextUnit = TextUnit.Inherit, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Inherit, textDecoration: TextDecoration? = null, textAlign: TextAlign? = null, lineHeight: TextUnit = TextUnit.Inherit, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, inlineContent: Map<String, InlineTextContent> = mapOf(), onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = currentTextStyle())

High level element that displays text and provides semantics / accessibility information.

Color

Returns the preferred content color at the call site's position in the hierarchy.

TextStyle

This effect is used to read the current value of the Text style ambient.

Boolean

This function should be used to help build responsive UIs that follow the system setting, to avoid harsh contrast changes when switching between applications.

ScrollState
rememberScrollState(initial: Float = 0f)

Create and remember the ScrollState based on the currently appropriate scroll configuration to allow changing scroll position or observing scroll behavior.

Top-level properties summary

ProvidableAmbient<Color>

Ambient containing the preferred content color for a given position in the hierarchy.

ProvidableAmbient<() -> Indication>

Ambient to provide IndicationInstance to draw visual indication for press and other events.

Extension functions summary

For Modifier
Modifier
Modifier.background(color: Color, shape: Shape = RectangleShape)

Draws shape with a solid color behind the content.

Modifier
Modifier.background(brush: Brush, shape: Shape = RectangleShape, @FloatRange(0.0, 1.0) alpha: Float = 1.0f)

Draws shape with brush behind the content.

Modifier
Modifier.border(border: BorderStroke, shape: Shape = RectangleShape)

Modify element to add border with appearance specified with a border and a shape, pad the content by the BorderStroke.width and clip it.

Modifier
Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape)

Returns a Modifier that adds border with appearance specified with width, color and a shape, pads the content by the width and clips it.

Modifier
Modifier.border(width: Dp, brush: Brush, shape: Shape)

Returns a Modifier that adds border with appearance specified with width, brush and a shape, pads the content by the width and clips it.

Modifier
Modifier.clickable(enabled: Boolean = true, onClickLabel: String? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = IndicationAmbient.current(), onLongClick: () -> Unit = null, onDoubleClick: () -> Unit = null, onClick: () -> Unit)

Configure component to receive clicks via input or accessibility "click" event.

Modifier
Modifier.drawBorder(border: Border, shape: Shape = RectangleShape)

Returns a Modifier that adds border with appearance specified with a border and a shape

Modifier
Modifier.drawBorder(size: Dp, color: Color, shape: Shape = RectangleShape)

Returns a Modifier that adds border with appearance specified with size, color and a shape

Modifier
Modifier.drawBorder(size: Dp, brush: Brush, shape: Shape)

Returns a Modifier that adds border with appearance specified with size, brush and a shape

Modifier
Modifier.horizontalScroll(state: ScrollState, enabled: Boolean = true, reverseScrolling: Boolean = false)

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

Modifier
Modifier.indication(interactionState: InteractionState, indication: Indication? = null)

Show visual indicator for an InteractionState.

Modifier
Modifier.progressSemantics(@FloatRange(0.0, 1.0) progress: Float)

Contains the semantics required for a determinate progress indicator, that represents progress ranging from 0.

Modifier

Contains the semantics required for an indeterminate progress indicator, that represents the fact of the in-progress operation.

Modifier
Modifier.verticalScroll(state: ScrollState, enabled: Boolean = true, reverseScrolling: Boolean = false)

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

Top-level functions

BaseTextField

@Composable fun BaseTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    textColor: Color = Color.Unset,
    textStyle: TextStyle = currentTextStyle(),
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Unspecified,
    onImeActionPerformed: (ImeAction) -> Unit = {},
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {},
    cursorColor: Color = contentColor()
): Unit

Composable that enables users to edit text via hardware or software keyboard.

Whenever the user edits the text, onValueChange is called with the most up to date state represented by TextFieldValue. TextFieldValue contains the text entered by user, as well as selection, cursor and text composition information. Please check TextFieldValue for the description of its contents.

It is crucial that the value provided in the onValueChange is fed back into BaseTextField in order to have the final state of the text being displayed. Example usage:

import androidx.compose.foundation.BaseTextField
import androidx.compose.runtime.savedinstancestate.savedInstanceState
import androidx.compose.ui.text.input.TextFieldValue

var value by savedInstanceState(saver = TextFieldValue.Saver) { TextFieldValue() }
BaseTextField(
    value = value,
    onValueChange = { value = it }
)

Please keep in mind that onValueChange is useful to be informed about the latest state of the text input by users, however it is generally not recommended to modify the values in the TextFieldValue that you get via onValueChange callback. Any change to the values in TextFieldValue may result in a context reset and end up with input session restart. Such a scenario would cause glitches in the UI or text input experience for users.

This composable provides basic text editing functionality, however does not include any decorations such as borders, hints/placeholder. A design system based implementation such as Material Design Filled text field is typically what is needed to cover most of the needs. This composable is designed to be used when a custom implementation for different design system is needed.

For example, if you need to include a hint in your TextField you can write a composable as below:

import androidx.compose.foundation.BaseTextField
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Stack
import androidx.compose.runtime.savedinstancestate.savedInstanceState
import androidx.compose.ui.text.input.TextFieldValue

val state = savedInstanceState(saver = TextFieldValue.Saver) { TextFieldValue() }
Stack {
    BaseTextField(
        value = state.value,
        onValueChange = { state.value = it }
    )
    if (state.value.text.isEmpty()) {
        Text(
            text = "Placeholder"
        )
    }
}
Parameters
value: TextFieldValue The TextFieldValue to be shown in the BaseTextField.
onValueChange: (TextFieldValue) -> Unit Called when the input service updates values in TextFieldValue.
modifier: Modifier = Modifier optional Modifier for this text field.
textColor: Color = Color.Unset Color to apply to the text. If Color.Unset, and textStyle has no color set, this will be contentColor.
textStyle: TextStyle = currentTextStyle() Style configuration that applies at character level such as color, font etc. The default textStyle uses the currentTextStyle defined by the theme
keyboardType: KeyboardType = KeyboardType.Text The keyboard type to be used in this text field. Note that this input type is honored by IME and shows corresponding keyboard but this is not guaranteed. For example, some IME may send non-ASCII character even if you set KeyboardType.Ascii.
imeAction: ImeAction = ImeAction.Unspecified The IME action. This IME action is honored by IME and may show specific icons on the keyboard. For example, search icon may be shown if ImeAction.Search is specified. Then, when user tap that key, the onImeActionPerformed callback is called with specified ImeAction.
visualTransformation: VisualTransformation = VisualTransformation.None The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.
onTextLayout: (TextLayoutResult) -> Unit = {} Callback that is executed when a new text layout is calculated.
onTextInputStarted: (SoftwareKeyboardController) -> Unit = {} Callback that is executed when the initialization has done for communicating with platform text input service, e.g. software keyboard on Android. Called with SoftwareKeyboardController instance which can be used for requesting input show/hide software keyboard.
cursorColor: Color = contentColor() Color of the cursor.

Border

@Stable fun Border(
    size: Dp,
    color: Color
): Border

Deprecated.

Create Border class with size and Color

Parameters
size: Dp size of the border in Dp. Use Dp.Hairline for one-pixel border.
color: Color color to paint the border with

BorderStroke

@Stable fun BorderStroke(
    width: Dp,
    color: Color
): BorderStroke

Create BorderStroke class with width and Color

Parameters
width: Dp width of the border in Dp. Use Dp.Hairline for one-pixel border.
color: Color color to paint the border with

Box

@Composable fun Box(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    backgroundColor: Color = Color.Transparent,
    border: BorderStroke? = null,
    padding: Dp = border?.width ?: 0.dp,
    paddingStart: Dp = Dp.Unspecified,
    paddingTop: Dp = Dp.Unspecified,
    paddingEnd: Dp = Dp.Unspecified,
    paddingBottom: Dp = Dp.Unspecified,
    gravity: ContentGravity = ContentGravity.TopStart,
    children: () -> Unit = emptyContent()
): Unit

A convenience composable that combines common layout and draw logic.

In order to define the size of the Box, the androidx.compose.foundation.layout.width, androidx.compose.foundation.layout.height and androidx.compose.foundation.layout.size modifiers can be used. The Box will try to be only as small as its content. However, if it is constrained otherwise, Box will allow its content to be smaller and will position the content inside, according to gravity.

The specified padding will be applied inside the Box. In order to apply padding outside the Box, the androidx.compose.foundation.layout.padding modifier should be used.

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.preferredSize

Box(
    modifier = Modifier.preferredSize(100.dp),
    backgroundColor = Color.Cyan,
    border = BorderStroke(10.dp, Color.Red),
    shape = CircleShape,
    gravity = ContentGravity.Center
) {
    Text("I'm box")
}
Parameters
modifier: Modifier = Modifier The modifier to be applied to the Box
shape: Shape = RectangleShape The shape of the box
backgroundColor: Color = Color.Transparent The Color for background with. If Color.Transparent, there will be no background
border: BorderStroke? = null BorderStroke object that specifies border appearance, such as size and color. If null, there will be no border
padding: Dp = border?.width ?: 0.dp The padding to be applied inside Box, along its edges. Unless otherwise specified, content will be padded by the BorderStroke.width, if border is provided
paddingStart: Dp = Dp.Unspecified sets the padding of the start edge. Setting this will override padding for the start edge
paddingTop: Dp = Dp.Unspecified sets the padding of the top edge. Setting this will override padding for the top edge
paddingEnd: Dp = Dp.Unspecified sets the padding of the end edge. Setting this will override padding for the end edge
paddingBottom: Dp = Dp.Unspecified sets the padding of the bottom edge. Setting this will override padding for the bottom edge
gravity: ContentGravity = ContentGravity.TopStart The gravity of the content inside Box

Canvas

@Composable fun Canvas(
    modifier: Modifier,
    onDraw: DrawScope.() -> Unit
): Unit

Component that allow you to specify an area on the screen and perform canvas drawing on this area. You MUST specify size with modifier, whether with exact sizes via Modifier.size modifier, or relative to parent, via Modifier.fillMaxSize, ColumnScope.weight, etc. If parent wraps this child, only exact sizes must be specified.

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.drawscope.inset

Canvas(modifier = Modifier.preferredSize(100.dp)) {
    drawRect(Color.Magenta)
    inset(10.0f) {
        drawLine(
            color = Color.Red,
            start = Offset.Zero,
            end = Offset(size.width, size.height),
            strokeWidth = 5.0f
        )
    }
}
Parameters
modifier: Modifier mandatory modifier to specify size strategy for this composable
onDraw: DrawScope.() -> Unit lambda that will be called to perform drawing. Note that this lambda will be called during draw stage, you have no access to composition scope, meaning that Composable function invocation inside it will result to runtime exception

ClickableText

@Composable fun ClickableText(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    softWrap: Boolean = true,
    overflow: TextOverflow = TextOverflow.Clip,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onClick: (Int) -> Unit
): Unit

A continent version of Text component to be able to handle click event on the text.

This is a shorthand of Text with pressIndicatorGestureFilter to be able to handle click event easily.

import androidx.compose.foundation.ClickableText
import androidx.compose.ui.text.AnnotatedString

ClickableText(
    text = AnnotatedString("Click Me"),
    onClick = { offset ->
        Log.d("ClickableText", "$offset -th character is clicked.")
    }
)
For other gestures, e.g. long press, dragging, follow sample code.
import androidx.compose.foundation.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.gesture.longPressGestureFilter

val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
val gesture = Modifier.longPressGestureFilter(
    onLongPress = { pos ->
        layoutResult.value?.let { layout ->
            onLongClick(layout.getOffsetForPosition(pos))
        }
    }
)

Text(text = text,
    modifier = modifier.then(gesture),
    style = style,
    softWrap = softWrap,
    overflow = overflow,
    maxLines = maxLines,
    onTextLayout = {
        onTextLayout(it)
        layoutResult.value = it
    }
)
Parameters
text: AnnotatedString The text to be displayed.
modifier: Modifier = Modifier Modifier to apply to this layout node.
style: TextStyle = TextStyle.Default Style configuration for the text such as color, font, line height etc.
softWrap: Boolean = true Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
overflow: TextOverflow = TextOverflow.Clip How visual overflow should be handled.
maxLines: Int = Int.MAX_VALUE An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
onTextLayout: (TextLayoutResult) -> Unit = {} Callback that is executed when a new text layout is calculated.
onClick: (Int) -> Unit Callback that is executed when users click the text. This callback is called with clicked character's offset.

Icon

@Composable fun Icon(
    asset: VectorAsset,
    modifier: Modifier = Modifier,
    tint: Color = contentColor()
): Unit

Icon component that draws asset using tint, defaulting to contentColor.

Parameters
asset: VectorAsset VectorAsset to draw inside this Icon
modifier: Modifier = Modifier optional Modifier for this Icon
tint: Color = contentColor() tint to be applied to asset

Icon

@Composable fun Icon(
    asset: ImageAsset,
    modifier: Modifier = Modifier,
    tint: Color = contentColor()
): Unit

Icon component that draws asset using tint, defaulting to contentColor.

Parameters
asset: ImageAsset ImageAsset to draw inside this Icon
modifier: Modifier = Modifier optional Modifier for this Icon
tint: Color = contentColor() tint to be applied to asset

Icon

@Composable fun Icon(
    painter: Painter,
    modifier: Modifier = Modifier,
    tint: Color = contentColor()
): Unit

Icon component that draws a painter using tint, defaulting to contentColor.

Parameters
painter: Painter Painter to draw inside this Icon
modifier: Modifier = Modifier optional Modifier for this Icon
tint: Color = contentColor() tint to be applied to painter

Image

@Composable inline fun Image(
    asset: ImageAsset,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): Unit

A composable that lays out and draws a given ImageAsset. This will attempt to size the composable according to the ImageAsset's given width and height. However, an optional Modifier parameter can be provided to adjust sizing or draw additional content (ex. background). Any unspecified dimension will leverage the ImageAsset's size as a minimum constraint.

The following sample shows basic usage of an Image composable to position and draw an ImageAsset on screen

import androidx.compose.foundation.Image

val imageAsset = createTestImage()
// Lays out and draws an image sized to the dimensions of the ImageAsset
Image(asset = imageAsset)
For use cases that require drawing a rectangular subset of the ImageAsset consumers can useoverload that consumes a Painter parameter shown in this sample
import androidx.compose.foundation.Image
import androidx.compose.ui.graphics.painter.ImagePainter
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize

val imageAsset = createTestImage()
// Lays out and draws an image sized to the rectangular subsection of the ImageAsset
Image(
    painter = ImagePainter(
        imageAsset,
        IntOffset(10, 12),
        IntSize(50, 60)
    )
)
Parameters
asset: ImageAsset The ImageAsset to draw.
modifier: Modifier = Modifier Modifier used to adjust the layout algorithm or draw decoration content (ex. background)
alignment: Alignment = Alignment.Center Optional alignment parameter used to place the ImageAsset in the given bounds defined by the width and height.
contentScale: ContentScale = ContentScale.Fit Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the ImageAsset.
alpha: Float = DefaultAlpha Optional opacity to be applied to the ImageAsset when it is rendered onscreen
colorFilter: ColorFilter? = null Optional ColorFilter to apply for the ImageAsset when it is rendered onscreen

Image

@Composable inline fun Image(
    asset: VectorAsset,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): Unit

A composable that lays out and draws a given VectorAsset. This will attempt to size the composable according to the VectorAsset's given width and height. However, an optional Modifier parameter can be provided to adjust sizing or draw additional content (ex. background). Any unspecified dimension will leverage the VectorAsset's size as a minimum constraint.

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.ui.res.loadVectorResource

val vectorAsset = loadVectorResource(R.drawable.ic_sample_vector)
vectorAsset.resource.resource?.let {
    Image(
        asset = it,
        modifier = Modifier.preferredSize(200.dp, 200.dp),
        contentScale = ContentScale.Fit,
        colorFilter = ColorFilter.tint(Color.Cyan)
    )
}
Parameters
asset: VectorAsset The VectorAsset to draw.
modifier: Modifier = Modifier Modifier used to adjust the layout algorithm or draw decoration content (ex. background)
alignment: Alignment = Alignment.Center Optional alignment parameter used to place the VectorAsset in the given bounds defined by the width and height.
contentScale: ContentScale = ContentScale.Fit Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the VectorAsset.
alpha: Float = DefaultAlpha Optional opacity to be applied to the VectorAsset when it is rendered onscreen
colorFilter: ColorFilter? = null Optional ColorFilter to apply for the VectorAsset when it is rendered onscreen

Image

@Composable fun Image(
    painter: Painter,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): Unit

Creates a composable that lays out and draws a given Painter. This will attempt to size the composable according to the Painter's intrinsic size. However, an optional Modifier parameter can be provided to adjust sizing or draw additional content (ex. background)

NOTE a Painter might not have an intrinsic size, so if no LayoutModifier is provided as part of the Modifier chain this might size the Image composable to a width and height of zero and will not draw any content. This can happen for Painter implementations that always attempt to fill the bounds like ColorPainter

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.runtime.remember
import androidx.compose.ui.geometry.Size

val customPainter = remember {
    object : Painter() {

        override val intrinsicSize: Size
            get() = Size(100.0f, 100.0f)

        override fun DrawScope.onDraw() {
            drawRect(color = Color.Cyan)
        }
    }
}

Image(painter = customPainter, modifier = Modifier.preferredSize(100.dp, 100.dp))
Parameters
painter: Painter to draw
modifier: Modifier = Modifier Modifier used to adjust the layout algorithm or draw decoration content (ex. background)
alignment: Alignment = Alignment.Center Optional alignment parameter used to place the Painter in the given bounds defined by the width and height.
contentScale: ContentScale = ContentScale.Fit Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the Painter.
alpha: Float = DefaultAlpha Optional opacity to be applied to the Painter when it is rendered onscreen the default renders the Painter completely opaque
colorFilter: ColorFilter? = null Optional colorFilter to apply for the Painter when it is rendered onscreen

ProvideTextStyle

@Composable fun ProvideTextStyle(
    value: TextStyle,
    children: () -> Unit
): Unit

This component is used to set the current value of the Text style ambient. The given style will be merged with the current style values for any missing attributes. Any Text components included in this component's children will be styled with this style unless styled explicitly.

ScrollableColumn

@Composable fun ScrollableColumn(
    modifier: Modifier = Modifier,
    scrollState: ScrollState = rememberScrollState(0f),
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    reverseScrollDirection: Boolean = false,
    isScrollEnabled: Boolean = true,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    children: ColumnScope.() -> Unit
): Unit

Variation of Column that scrolls when content is bigger than its height.

The content of the ScrollableColumn is clipped to its bounds.

import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.Text

ScrollableColumn {
    phrases.forEach { phrase ->
        Text(phrase, fontSize = 30.sp)
    }
}
Parameters
modifier: Modifier = Modifier modifier for this ScrollableColumn
scrollState: ScrollState = rememberScrollState(0f) state of the scroll, such as current offset and max offset
verticalArrangement: Arrangement.Vertical = Arrangement.Top The vertical arrangement of the layout's children
horizontalAlignment: Alignment.Horizontal = Alignment.Start The horizontal alignment of the layout's children
reverseScrollDirection: Boolean = false reverse the direction of scrolling, when true, ScrollState.value = 0 will mean bottom, when false, ScrollState.value = 0 will mean top
isScrollEnabled: Boolean = true param to enable or disable touch input scrolling. If you own ScrollState, you still can call ScrollState.smoothScrollTo and other methods on it.
contentPadding: PaddingValues = PaddingValues(0.dp) convenience param to specify padding around content. This will add padding for the content after it has been clipped, which is not possible via modifier param

ScrollableRow

@Composable fun ScrollableRow(
    modifier: Modifier = Modifier,
    scrollState: ScrollState = rememberScrollState(0f),
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    reverseScrollDirection: Boolean = false,
    isScrollEnabled: Boolean = true,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    children: RowScope.() -> Unit
): Unit

Variation of Row that scrolls when content is bigger than its width.

The content of the ScrollableRow is clipped to its bounds.

import androidx.compose.foundation.ScrollableRow

ScrollableRow {
    repeat(100) { index ->
        Square(index)
    }
}
Parameters
modifier: Modifier = Modifier modifier for this ScrollableRow
scrollState: ScrollState = rememberScrollState(0f) state of the scroll, such as current offset and max offset
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start The horizontal arrangement of the layout's children
verticalAlignment: Alignment.Vertical = Alignment.Top The vertical alignment of the layout's children
reverseScrollDirection: Boolean = false reverse the direction of scrolling, when true, ScrollState.value = 0 will mean right, when false, ScrollState.value = 0 will mean left
isScrollEnabled: Boolean = true param to enable or disable touch input scrolling. If you own ScrollState, you still can call ScrollState.smoothScrollTo and other methods on it.
contentPadding: PaddingValues = PaddingValues(0.dp) convenience param to specify padding around content. This will add padding for the content after it has been clipped, which is not possible via modifier param.

Text

@Composable fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unset,
    fontSize: TextUnit = TextUnit.Inherit,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Inherit,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Inherit,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = currentTextStyle()
): Unit

High level element that displays text and provides semantics / accessibility information.

The default style uses the currentTextStyle defined by a theme. If you are setting your own style, you may want to consider first retrieving currentTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

  • If a parameter is explicitly set here (i.e, it is not null or TextUnit.Inherit), then this parameter will always be used.
  • If a parameter is not set, (null or TextUnit.Inherit), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then contentColor will be used - this allows this Text or element containing this Text to adapt to different background colors and still maintain contrast and accessibility.

Parameters
text: String The text to be displayed.
modifier: Modifier = Modifier Modifier to apply to this layout node.
color: Color = Color.Unset Color to apply to the text. If Color.Unset, and style has no color set, this will be contentColor.
fontSize: TextUnit = TextUnit.Inherit The size of glyphs to use when painting the text. See TextStyle.fontSize.
fontStyle: FontStyle? = null The typeface variant to use when drawing the letters (e.g., italic). See TextStyle.fontStyle.
fontWeight: FontWeight? = null The typeface thickness to use when painting the text (e.g., FontWeight.Bold).
fontFamily: FontFamily? = null The font family to be used when rendering the text. See TextStyle.fontFamily.
letterSpacing: TextUnit = TextUnit.Inherit The amount of space to add between each letter. See TextStyle.letterSpacing.
textDecoration: TextDecoration? = null The decorations to paint on the text (e.g., an underline). See TextStyle.textDecoration.
textAlign: TextAlign? = null The alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
lineHeight: TextUnit = TextUnit.Inherit Line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
overflow: TextOverflow = TextOverflow.Clip How visual overflow should be handled.
softWrap: Boolean = true Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
inlineContent: Map<String, InlineTextContent> = mapOf() A map store composables that replaces certain ranges of the text. It's used to insert composables into text layout. Check InlineTextContent for more information.
onTextLayout: (TextLayoutResult) -> Unit = {} Callback that is executed when a new text layout is calculated.
style: TextStyle = currentTextStyle() Style configuration for the text such as color, font, line height etc.

Text

@Composable fun Text(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unset,
    fontSize: TextUnit = TextUnit.Inherit,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Inherit,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Inherit,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = currentTextStyle()
): Unit

High level element that displays text and provides semantics / accessibility information.

The default style uses the currentTextStyle defined by a theme. If you are setting your own style, you may want to consider first retrieving currentTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

  • If a parameter is explicitly set here (i.e, it is not null or TextUnit.Inherit), then this parameter will always be used.
  • If a parameter is not set, (null or TextUnit.Inherit), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then contentColor will be used - this allows this Text or element containing this Text to adapt to different background colors and still maintain contrast and accessibility.

Parameters
text: AnnotatedString The text to be displayed.
modifier: Modifier = Modifier Modifier to apply to this layout node.
color: Color = Color.Unset Color to apply to the text. If Color.Unset, and style has no color set, this will be contentColor.
fontSize: TextUnit = TextUnit.Inherit The size of glyphs to use when painting the text. See TextStyle.fontSize.
fontStyle: FontStyle? = null The typeface variant to use when drawing the letters (e.g., italic). See TextStyle.fontStyle.
fontWeight: FontWeight? = null The typeface thickness to use when painting the text (e.g., FontWeight.Bold).
fontFamily: FontFamily? = null The font family to be used when rendering the text. See TextStyle.fontFamily.
letterSpacing: TextUnit = TextUnit.Inherit The amount of space to add between each letter. See TextStyle.letterSpacing.
textDecoration: TextDecoration? = null The decorations to paint on the text (e.g., an underline). See TextStyle.textDecoration.
textAlign: TextAlign? = null The alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
lineHeight: TextUnit = TextUnit.Inherit Line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
overflow: TextOverflow = TextOverflow.Clip How visual overflow should be handled.
softWrap: Boolean = true Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
inlineContent: Map<String, InlineTextContent> = mapOf() A map store composables that replaces certain ranges of the text. It's used to insert composables into text layout. Check InlineTextContent for more information.
onTextLayout: (TextLayoutResult) -> Unit = {} Callback that is executed when a new text layout is calculated.
style: TextStyle = currentTextStyle() Style configuration for the text such as color, font, line height etc.

contentColor

@Composable fun contentColor(): Color

Returns the preferred content color at the call site's position in the hierarchy.

This color should be used for any typography / iconography, to ensure that the color of these adjusts when the background color changes. For example, on a dark background, text should be light, and on a light background, text should be dark.

Return
the preferred content color specified by a parent, defaulting to Color.Black if unspecified.

currentTextStyle

@Composable @ComposableContract(true) fun currentTextStyle(): TextStyle

This effect is used to read the current value of the Text style ambient. Any Text components included in this component's children will be styled with this style unless styled explicitly.

isSystemInDarkTheme

@Composable fun isSystemInDarkTheme(): Boolean

This function should be used to help build responsive UIs that follow the system setting, to avoid harsh contrast changes when switching between applications.

This function returns true if the Configuration.UI_MODE_NIGHT_YES bit is set. It is also possible for this bit to be Configuration.UI_MODE_NIGHT_UNDEFINED, in which case light theme is treated as the default, and this function returns false.

It is also recommended to provide user accessible overrides in your application, so users can choose to force an always-light or always-dark theme. To do this, you should provide the current theme value in an ambient or similar to components further down your hierarchy, only calling this effect once at the top level if no user override has been set. This also helps avoid multiple calls to this effect, which can be expensive as it queries system configuration.

For example, to draw a white rectangle when in dark theme, and a black rectangle when in light theme:

import androidx.compose.foundation.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Stack
import androidx.compose.foundation.layout.preferredSize

val dark = isSystemInDarkTheme()
val color = if (dark) Color.White else Color.Black
Stack {
    Box(Modifier.preferredSize(50.dp).background(color = color))
}
Return
true if the system is considered to be in 'dark theme'.

rememberScrollState

@Composable fun rememberScrollState(initial: Float = 0f): ScrollState

Create and remember the ScrollState based on the currently appropriate scroll configuration to allow changing scroll position or observing scroll behavior.

Learn how to control ScrollableColumn or ScrollableRow:

import androidx.compose.foundation.ScrollableRow
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.rememberScrollState

// Create ScrollState to own it and be able to control scroll behaviour of ScrollableRow below
val scrollState = rememberScrollState()
Column {
    ScrollableRow(scrollState = scrollState) {
        repeat(1000) { index ->
            Square(index)
        }
    }
    // Controls for scrolling
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text("Scroll")
        Button(onClick = { scrollState.scrollTo(scrollState.value - 1000) }) {
            Text("< -")
        }
        Button(onClick = { scrollState.scrollBy(10000f) }) {
            Text("--- >")
        }
    }
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text("Smooth Scroll")
        Button(onClick = { scrollState.smoothScrollTo(scrollState.value - 1000) }) {
            Text("< -")
        }
        Button(onClick = { scrollState.smoothScrollBy(10000f) }) {
            Text("--- >")
        }
    }
}
Parameters
initial: Float = 0f initial scroller position to start with

Top-level properties

ContentColorAmbient

val ContentColorAmbient: ProvidableAmbient<Color>

Ambient containing the preferred content color for a given position in the hierarchy.

See contentColor for a more descriptive alias to consume the value from this ambient.

IndicationAmbient

val IndicationAmbient: ProvidableAmbient<() -> Indication>

Ambient to provide IndicationInstance to draw visual indication for press and other events.

By default there will be DefaultDebugIndication created.

Extension functions

background

fun Modifier.background(
    color: Color,
    shape: Shape = RectangleShape
): Modifier

Draws shape with a solid color behind the content.

import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding

Text(
    "Text with background",
    Modifier.background(color = Color.Magenta).padding(10.dp)
)
Parameters
color: Color color to paint background with
shape: Shape = RectangleShape desired shape of the background

background

fun Modifier.background(
    brush: Brush,
    shape: Shape = RectangleShape,
    @FloatRange(0.0, 1.0) alpha: Float = 1.0f
): Modifier

Draws shape with brush behind the content.

import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.ui.graphics.HorizontalGradient

val gradientBrush = HorizontalGradient(
    colors = listOf(Color.Red, Color.Blue, Color.Green),
    startX = 0.0f,
    endX = 500.0f
)
Text(
    "Text with gradient back",
    Modifier.background(brush = gradientBrush, shape = CutCornerShape(8.dp))
        .padding(10.dp)
)
Parameters
brush: Brush brush to paint background with
shape: Shape = RectangleShape desired shape of the background
alpha: Float = 1.0f Opacity to be applied to the brush

border

fun Modifier.border(
    border: BorderStroke,
    shape: Shape = RectangleShape
): Modifier

Modify element to add border with appearance specified with a border and a shape, pad the content by the BorderStroke.width and clip it.

import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding

Text(
    "Text with  square border",
    modifier = Modifier.border(4.dp, Color.Magenta).padding(10.dp)
)
()
Parameters
border: BorderStroke Border class that specifies border appearance, such as size and color
shape: Shape = RectangleShape shape of the border

border

fun Modifier.border(
    width: Dp,
    color: Color,
    shape: Shape = RectangleShape
): Modifier

Returns a Modifier that adds border with appearance specified with width, color and a shape, pads the content by the width and clips it.

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape

Text(
    "Text with gradient border",
    modifier = Modifier.border(
        border = BorderStroke(2.dp, Color.Blue),
        shape = CutCornerShape(8.dp)
    )
        .padding(10.dp)
)
()
Parameters
width: Dp width of the border. Use Dp.Hairline for a hairline border.
color: Color color to paint the border with
shape: Shape = RectangleShape shape of the border

border

fun Modifier.border(
    width: Dp,
    brush: Brush,
    shape: Shape
): Modifier

Returns a Modifier that adds border with appearance specified with width, brush and a shape, pads the content by the width and clips it.

import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.graphics.HorizontalGradient

val gradientBrush = HorizontalGradient(
    colors = listOf(Color.Red, Color.Blue, Color.Green),
    startX = 0.0f,
    endX = 500.0f,
    tileMode = TileMode.Repeated
)
Text(
    "Text with gradient border",
    modifier = Modifier.border(width = 2.dp, brush = gradientBrush, shape = CircleShape)
        .padding(10.dp)
)
()
Parameters
width: Dp width of the border. Use Dp.Hairline for a hairline border.
brush: Brush brush to paint the border with
shape: Shape shape of the border

clickable

@Composable fun Modifier.clickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    interactionState: InteractionState = remember { InteractionState() },
    indication: Indication? = IndicationAmbient.current(),
    onLongClick: () -> Unit = null,
    onDoubleClick: () -> Unit = null,
    onClick: () -> Unit
): Modifier

Configure component to receive clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds.

import androidx.compose.foundation.Text
import androidx.compose.foundation.clickable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val count = remember { mutableStateOf(0) }
// content that you want to make clickable
Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
Parameters
enabled: Boolean = true Controls the enabled state. When false, onClick, onLongClick or onDoubleClick won't be invoked
onClickLabel: String? = null semantic / accessibility label for the onClick action
interactionState: InteractionState = remember { InteractionState() } InteractionState that will be updated when this Clickable is pressed, using Interaction.Pressed. Only initial (first) press will be recorded and added to InteractionState
indication: Indication? = IndicationAmbient.current() indication to be shown when modified element is pressed. Be default, indication from IndicationAmbient will be used. Pass null to show no indication
onLongClick: () -> Unit = null will be called when user long presses on the element
onDoubleClick: () -> Unit = null will be called when user double clicks on the element
onClick: () -> Unit will be called when user clicks on the element

drawBorder

fun Modifier.drawBorder(
    border: Border,
    shape: Shape = RectangleShape
): Modifier

Deprecated.

Returns a Modifier that adds border with appearance specified with a border and a shape

import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding

Text(
    "Text with  square border",
    modifier = Modifier.border(4.dp, Color.Magenta).padding(10.dp)
)
()
Parameters
border: Border Border class that specifies border appearance, such as size and color
shape: Shape = RectangleShape shape of the border

drawBorder

fun Modifier.drawBorder(
    size: Dp,
    color: Color,
    shape: Shape = RectangleShape
): Modifier

Deprecated.

Returns a Modifier that adds border with appearance specified with size, color and a shape

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape

Text(
    "Text with gradient border",
    modifier = Modifier.border(
        border = BorderStroke(2.dp, Color.Blue),
        shape = CutCornerShape(8.dp)
    )
        .padding(10.dp)
)
()
Parameters
size: Dp width of the border. Use Dp.Hairline for a hairline border.
color: Color color to paint the border with
shape: Shape = RectangleShape shape of the border

drawBorder

fun Modifier.drawBorder(
    size: Dp,
    brush: Brush,
    shape: Shape
): Modifier

Deprecated.

Returns a Modifier that adds border with appearance specified with size, brush and a shape

import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.graphics.HorizontalGradient

val gradientBrush = HorizontalGradient(
    colors = listOf(Color.Red, Color.Blue, Color.Green),
    startX = 0.0f,
    endX = 500.0f,
    tileMode = TileMode.Repeated
)
Text(
    "Text with gradient border",
    modifier = Modifier.border(width = 2.dp, brush = gradientBrush, shape = CircleShape)
        .padding(10.dp)
)
()
Parameters
size: Dp width of the border. Use Dp.Hairline for a hairline border.
brush: Brush brush to paint the border with
shape: Shape shape of the border

horizontalScroll

fun Modifier.horizontalScroll(
    state: ScrollState,
    enabled: Boolean = true,
    reverseScrolling: Boolean = false
): Modifier

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

import androidx.compose.foundation.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.ui.graphics.HorizontalGradient

val scrollState = rememberScrollState()
val gradient = HorizontalGradient(
    listOf(Color.Red, Color.Blue, Color.Green), 0.0f, 10000.0f, TileMode.Repeated
)
Box(
    Modifier
        .horizontalScroll(scrollState)
        .size(width = 10000.dp, height = 200.dp)
        .background(brush = gradient)
)
In order to use this modifier, you need to create and own ScrollState
Parameters
state: ScrollState state of the scroll
enabled: Boolean = true whether or not scrolling via touch input is enabled
reverseScrolling: Boolean = false reverse the direction of scrolling, when true, 0 ScrollState.value will mean right, when false, 0 ScrollState.value will mean left

indication

fun Modifier.indication(
    interactionState: InteractionState,
    indication: Indication? = null
): Modifier

Show visual indicator for an InteractionState.

import androidx.compose.foundation.InteractionState
import androidx.compose.foundation.Text
import androidx.compose.foundation.clickable
import androidx.compose.foundation.indication
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember

val interactionState = remember { InteractionState() }
Column {
    Text(
        text = "Click me and my neighbour will indicate as well!",
        modifier = Modifier
            // clickable will update interaction state and show indication for this element
            .clickable(interactionState = interactionState) { /** do something */ }
            .padding(10.dp)
    )
    Spacer(Modifier.height(10.dp))
    Text(
        text = "I'm neighbour and I indicate when you click the other one",
        modifier = Modifier
            // this element doesn't have a click, but will indicate as it accepts same
            // interaction state
            .indication(interactionState, IndicationAmbient.current())
            .padding(10.dp)
    )
}
Parameters
interactionState: InteractionState state for indication to indicate against. This state is updates by modifier such as Clickable.
indication: Indication? = null indication to be drawn. If null, there will be no indication shown

progressSemantics

@Stable fun Modifier.progressSemantics(@FloatRange(0.0, 1.0) progress: Float): Modifier

Contains the semantics required for a determinate progress indicator, that represents progress ranging from 0.0 to 1.0. Values for progress outside of this range will be coerced into this range.

import androidx.compose.foundation.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.progressSemantics

val progress = 0.5f // emulate progress from some state
Box(
    Modifier
        .progressSemantics(progress)
        .preferredSize((progress * 100).dp, 4.dp)
        .background(color = Color.Cyan)
)
Parameters
progress: Float The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. If the value is outside of this range, it will be coerced into the range.

progressSemantics

@Stable fun Modifier.progressSemantics(): Modifier

Contains the semantics required for an indeterminate progress indicator, that represents the fact of the in-progress operation.

If you need determinate progress 0.0 to 1.0, consider using overload with the progress parameter.

import androidx.compose.foundation.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.progressSemantics

Box(Modifier.progressSemantics().background(color = Color.Cyan)) {
    Text("Operation is on progress")
}

verticalScroll

fun Modifier.verticalScroll(
    state: ScrollState,
    enabled: Boolean = true,
    reverseScrolling: Boolean = false
): Modifier

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

import androidx.compose.foundation.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.ui.graphics.VerticalGradient

val scrollState = rememberScrollState()
val gradient = VerticalGradient(
    listOf(Color.Red, Color.Blue, Color.Green), 0.0f, 10000.0f, TileMode.Repeated
)
Box(
    Modifier
        .verticalScroll(scrollState)
        .fillMaxWidth()
        .height(10000.dp)
        .background(brush = gradient)
)
In order to use this modifier, you need to create and own ScrollState
Parameters
state: ScrollState state of the scroll
enabled: Boolean = true whether or not scrolling via touch input is enabled
reverseScrolling: Boolean = false reverse the direction of scrolling, when true, 0 ScrollState.value will mean bottom, when false, 0 ScrollState.value will mean top