androidx.ui.foundation

Classes

Border

Class to specify border appearance.

DrawBorder

InteractionState

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

ScrollerPosition

This is the state of a VerticalScroller and HorizontalScroller that allows the developer to change the scroll position by calling methods on this object.

TextFieldValue

A class holding information about the editing state.

Type-aliases

ContentGravity

Top-level functions summary

Unit

Unit
AdapterList(data: List<T>, modifier: Modifier = Modifier, itemCallback: <ERROR CLASS>, Unit: <ERROR CLASS>)

A vertically scrolling list that only composes and lays out the currently visible items.

Border
Border(size: Dp, color: Color)

Create Border class with size and Color

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

A convenience composable that combines common layout and draw logic.

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

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

Unit
Clickable(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onClickLabel: String? = null, interactionState: InteractionState? = null, children: <ERROR CLASS>, Unit: <ERROR CLASS>)

Combines tapGestureFilter and Semantics for the clickable components like Button.

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
DeterminateProgressIndicator(progress: Float, children: <ERROR CLASS>, Unit: <ERROR CLASS>)

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

Unit
Dialog(onCloseRequest: () -> Unit, children: <ERROR CLASS>, Unit: <ERROR CLASS>)

Opens a dialog with the given content.

Modifier
DrawBorder(border: Border, shape: Shape = RectangleShape)

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

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

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

DrawBorder
DrawBorder(size: Dp, brush: Brush, shape: Shape)

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

Unit
HorizontalScroller(scrollerPosition: ScrollerPosition = ScrollerPosition(), modifier: Modifier = Modifier, isScrollable: Boolean = true, children: RowScope.() -> Unit)

A container that composes all of its contents and lays it out, fitting the height of the child.

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.Inside, 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.Inside, 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.Inside, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null)

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

Unit
ProvideTextStyle(value: TextStyle, children: <ERROR CLASS>, Unit: <ERROR CLASS>)

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

ScrollerPosition
ScrollerPosition(initial: Float = 0f, isReversed: Boolean = false)

Create and remember the state for a VerticalScroller or HorizontalScroller based on the currently appropriate scroll configuration to allow changing scroll position or observing scroll behavior.

Unit
SimpleImage(image: ImageAsset, tint: Color = Color.Unset)

Fits an image into the container with sizes equals to the image size, while maintaining the image aspect ratio.

Unit
Text(text: String, modifier: Modifier = Modifier, color: Color = Color.Unset, fontSize: TextUnit = TextUnit.Inherit, fontStyle: FontStyle? = 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, 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
TextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, textColor: Color = Color.Unset, textStyle: TextStyle = currentTextStyle(), keyboardType: KeyboardType = KeyboardType.Text, imeAction: ImeAction = ImeAction.Unspecified, onFocusChange: (Boolean) -> Unit = {}, onImeActionPerformed: (ImeAction) -> Unit = {}, visualTransformation: VisualTransformation = VisualTransformation.None, onTextLayout: (TextLayoutResult) -> Unit = {}, onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, cursorColor: Color = contentColor())

A user interface element for entering and modifying text.

Unit
VerticalScroller(scrollerPosition: ScrollerPosition = ScrollerPosition(), modifier: Modifier = Modifier, isScrollable: Boolean = true, children: ColumnScope.() -> Unit)

A container that composes all of its contents and lays it out, fitting the width of the child.

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 effect should be used to help build responsive UIs that follow the system setting, to avoid harsh contrast changes when switching between applications.

Top-level properties summary

ProvidableAmbient<Color>

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

<ERROR CLASS>

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

Extension functions summary

For Modifier
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

Draws shape with paint behind the content.

Modifier
Modifier.drawBackground(color: Color, shape: Shape = RectangleShape, alpha: Float = DrawScope.DefaultAlpha, style: DrawStyle = Fill, colorFilter: ColorFilter? = null, blendMode: BlendMode = DrawScope.DefaultBlendMode)

Draws shape with a solid color behind the content.

Modifier
Modifier.drawBackground(brush: Brush, shape: Shape = RectangleShape, alpha: Float = DrawScope.DefaultAlpha, style: DrawStyle = Fill, colorFilter: ColorFilter? = null, blendMode: BlendMode = DrawScope.DefaultBlendMode)

Draws shape with brush behind the content.

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.indication(interactionState: InteractionState, indication: Indication? = null)

Show visual indicator for an InteractionState.

Top-level functions

<no name provided>

fun <no name provided>(): Unit

AdapterList

@Composable fun <T> AdapterList(
    data: List<T>,
    modifier: Modifier = Modifier,
    itemCallback: <ERROR CLASS>,
    Unit: <ERROR CLASS>
): Unit

A vertically scrolling list that only composes and lays out the currently visible items.

Parameters
data: List<T> the backing list of data to display
modifier: Modifier = Modifier the modifier to apply to this AdapterList
itemCallback: <ERROR CLASS> a callback that takes an item from data and emits the UI for that item. May emit any number of components, which will be stacked vertically

Border

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

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

Box

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

A convenience composable that combines common layout and draw logic.

In order to define the size of the Box, the androidx.ui.layout.LayoutWidth, androidx.ui.layout.LayoutHeight and androidx.ui.layout.LayoutSize 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.ui.layout.LayoutPadding modifier should be used.

import androidx.ui.foundation.Border
import androidx.ui.foundation.Box
import androidx.ui.foundation.Text
import androidx.ui.layout.preferredSize

Box(
    modifier = Modifier.preferredSize(100.dp),
    backgroundColor = Color.Cyan,
    border = Border(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: Border? = null Border object that specifies border appearance, such as size and color. If null, there will be no border
padding: Dp = border?.size ?: 0.dp The padding to be applied inside Box, along its edges. Unless otherwise specified, content will be padded by the Border.size, 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,
    onCanvas: 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 LayoutSize modifier, or relative to parent, via LayoutSize.Fill, ColumnScope.LayoutWeight, etc. If parent wraps this child, only exact sizes must be specified.

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

Canvas(modifier = Modifier.preferredSize(100.dp)) {
    drawRect(Color.Magenta)
    inset(10.0f) {
        drawLine(
            p1 = Offset.zero,
            p2 = Offset(size.width, size.height),
            stroke = Stroke(width = 5.0f),
            color = Color.Red
        )
    }
}
Parameters
modifier: Modifier mandatory modifier to specify size strategy for this composable
onCanvas: 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

Clickable

@Composable fun Clickable(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    interactionState: InteractionState? = null,
    children: <ERROR CLASS>,
    Unit: <ERROR CLASS>
): Unit

Deprecated.

Combines tapGestureFilter and Semantics for the clickable components like Button.

import androidx.compose.state
import androidx.ui.foundation.Text
import androidx.ui.foundation.clickable

val count = state { 0 }
// content that you want to make clickable
Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
Parameters
onClick: () -> Unit will be called when user clicked on the button
modifier: Modifier = Modifier allows to provide a modifier to be added before the gesture detector, for example Ripple should be added at this point. this will be easier once we migrate this function to a Modifier
enabled: Boolean = true Controls the enabled state. When false, this component will not be clickable
onClickLabel: String? = null semantic / accessibility label for the onClick action
interactionState: InteractionState? = null InteractionState that will be updated when this Clickable is pressed, using Interaction.Pressed. Only initial (first) press will be recorded and added to InteractionState

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.ui.foundation.ClickableText
import androidx.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.state
import androidx.ui.core.gesture.longPressGestureFilter
import androidx.ui.foundation.Text

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

Text(text = text,
    modifier = modifier + 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.

DeterminateProgressIndicator

@Composable fun DeterminateProgressIndicator(
    progress: Float,
    children: <ERROR CLASS>,
    Unit: <ERROR CLASS>
): Unit

Contains the Semantics required for a determinate progress indicator, that represents progress ranging from 0.0 to 1.0.

import androidx.ui.foundation.Box
import androidx.ui.foundation.DeterminateProgressIndicator
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.preferredSize

val progress = 0.5f // emulate progress from some state
DeterminateProgressIndicator(progress) {
    Box(Modifier.preferredSize((progress * 100).dp, 4.dp).drawBackground(Color.Cyan))
}
Parameters
progress: Float The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress
children: <ERROR CLASS> The progress indicator that is drawn on screen, representing progress
Exceptions
IllegalArgumentException when the progress is not within range

Dialog

@Composable fun Dialog(
    onCloseRequest: () -> Unit,
    children: <ERROR CLASS>,
    Unit: <ERROR CLASS>
): Unit

Opens a dialog with the given content.

The dialog is visible as long as it is part of the composition hierarchy. In order to let the user dismiss the Dialog, the implementation of onCloseRequest should contain a way to remove to remove the dialog from the composition hierarchy.

Example usage:

import androidx.compose.state
import androidx.ui.foundation.Box
import androidx.ui.foundation.Dialog
import androidx.ui.layout.preferredSize

val openDialog = state { true }
val dialogWidth = 200.dp
val dialogHeight = 50.dp

if (openDialog.value) {
    Dialog(onCloseRequest = { openDialog.value = false }) {
        // Draw a rectangle shape with rounded corners inside the dialog
        Box(Modifier.preferredSize(dialogWidth, dialogHeight), backgroundColor = Color.White)
    }
}
Parameters
onCloseRequest: () -> Unit Executes when the user tries to dismiss the Dialog.
children: <ERROR CLASS> The content to be displayed inside the dialog.

DrawBorder

@Composable fun 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.ui.foundation.Text
import androidx.ui.foundation.drawBorder
import androidx.ui.layout.padding

Text(
    "Text with  square border",
    modifier = Modifier.drawBorder(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

@Composable fun 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.ui.foundation.Border
import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBorder
import androidx.ui.foundation.shape.corner.CutCornerShape
import androidx.ui.layout.padding

Text(
    "Text with gradient border",
    modifier = Modifier.drawBorder(
        border = Border(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

@Composable fun DrawBorder(
    size: Dp,
    brush: Brush,
    shape: Shape
): DrawBorder

Deprecated.

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

import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBorder
import androidx.ui.graphics.HorizontalGradient
import androidx.ui.layout.padding

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.drawBorder(size = 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

HorizontalScroller

@Composable fun HorizontalScroller(
    scrollerPosition: ScrollerPosition = ScrollerPosition(),
    modifier: Modifier = Modifier,
    isScrollable: Boolean = true,
    children: RowScope.() -> Unit
): Unit

A container that composes all of its contents and lays it out, fitting the height of the child. If the child's width is less than the Constraints.maxWidth, the child's width is used, or the Constraints.maxWidth otherwise. If the contents don't fit the width, the drag gesture allows scrolling its content horizontally. The contents of the HorizontalScroller are clipped to the HorizontalScroller's bounds.

import androidx.ui.foundation.HorizontalScroller
import androidx.ui.layout.Row

HorizontalScroller {
    Row {
        repeat(100) { index ->
            Square(index)
        }
    }
}
If you want to control scrolling position from the code, e.g smooth scroll to position,you must own memorized instance of ScrollerPosition and then use it to call scrollTo...functions on it. Same tactic can be applied to the VerticalScroller
import androidx.compose.state
import androidx.ui.foundation.HorizontalScroller
import androidx.ui.foundation.ScrollerPosition
import androidx.ui.layout.Column

// Create and own ScrollerPosition to call `smoothScrollTo` later
val position = ScrollerPosition()
val scrollable = state { true }
Column {
    HorizontalScroller(
        scrollerPosition = position,
        isScrollable = scrollable.value
    ) {
        repeat(1000) { index ->
            Square(index)
        }
    }
    // Controls that will call `smoothScrollTo`, `scrollTo` or toggle `scrollable` state
    ScrollControl(position, scrollable)
}
Parameters
scrollerPosition: ScrollerPosition = ScrollerPosition() state of this Scroller that holds current scroll position and provides user with useful methods like smooth scrolling
modifier: Modifier = Modifier Modifier to be applied to the Scroller content layout
isScrollable: Boolean = true param to enabled or disable touch input scrolling, default is true

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.Inside,
    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.ui.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.ui.foundation.Image
import androidx.ui.geometry.Offset
import androidx.ui.geometry.Size
import androidx.ui.graphics.painter.ImagePainter

val imageAsset = createTestImage()
// Lays out and draws an image sized to the rectangular subsection of the ImageAsset
Image(
    painter = ImagePainter(
        imageAsset,
        Offset(10.0f, 12.0f),
        Size(50.0f, 60.0f)
    )
)
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.Inside 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.Inside,
    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.ui.foundation.Image
import androidx.ui.layout.preferredSize
import androidx.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.Inside 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.Inside,
    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.remember
import androidx.ui.foundation.Image
import androidx.ui.geometry.Size
import androidx.ui.layout.preferredSize

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.Inside 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: <ERROR CLASS>,
    Unit: <ERROR CLASS>
): 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.

ScrollerPosition

@Composable fun ScrollerPosition(
    initial: Float = 0f,
    isReversed: Boolean = false
): ScrollerPosition

Create and remember the state for a VerticalScroller or HorizontalScroller based on the currently appropriate scroll configuration to allow changing scroll position or observing scroll behavior.

Parameters
initial: Float = 0f initial scroller position to start with
isReversed: Boolean = false whether position will be reversed, e.g. 0 will mean bottom for VerticalScroller and end for HorizontalScroller

SimpleImage

@Composable fun SimpleImage(
    image: ImageAsset,
    tint: Color = Color.Unset
): Unit

Deprecated.

Fits an image into the container with sizes equals to the image size, while maintaining the image aspect ratio. The image will be clipped if the aspect ratios of the image and the parent don't match.

This component has the same behavior as ImageView.ScaleType.CENTER_CROP currently.

Parameters
image: ImageAsset The image to draw.
tint: Color = Color.Unset The tint color to apply for the image.

Text

@Composable fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unset,
    fontSize: TextUnit = TextUnit.Inherit,
    fontStyle: FontStyle? = 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.
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,
    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.
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.

TextField

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

A user interface element for entering and modifying text.

The TextField component renders an input and additional decorations set by input service which is software keyboard in Android. Once input service modify the text, you will get callback onValueChange with new text. Then, you can set this new text so that this component renders up-to-date text from input service.

Example usage:

import androidx.ui.foundation.TextField
import androidx.ui.foundation.TextFieldValue
import androidx.ui.savedinstancestate.savedInstanceState

var value by savedInstanceState(saver = TextFieldValue.Saver) { TextFieldValue() }
TextField(
    value = value,
    onValueChange = { value = it }
)
Note: Please be careful if you setting model other than the one passed to onValueChangecallback including selection or cursor. Especially, it is not recommended to modify the modelpassed to onValueChange callback. Any change to text, selection or cursor may be translated tofull context reset by input service and end up with input session restart. This will be visibleto users, for example, any ongoing composition text will be cleared or committed, then softwarekeyboard may go back to the default one.
Parameters
value: TextFieldValue The TextFieldValue to be shown in the TextField.
onValueChange: (TextFieldValue) -> Unit Called when the input service updates the text, selection or cursor. When the input service update the text, selection or cursor, this callback is called with the updated TextFieldValue. If you want to observe the composition text, use TextField with compositionRange instead.
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.
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.
onFocusChange: (Boolean) -> Unit = {} Called with true value when the input field gains focus and with false value when the input field loses focus. Use FocusModifier.requestFocus to obtain text input focus to this TextField.
onImeActionPerformed: (ImeAction) -> Unit = {} Called when the input service requested an IME action. When the input service emitted an IME action, this callback is called with the emitted IME action. Note that this IME action may be different from what you specified in 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.

VerticalScroller

@Composable fun VerticalScroller(
    scrollerPosition: ScrollerPosition = ScrollerPosition(),
    modifier: Modifier = Modifier,
    isScrollable: Boolean = true,
    children: ColumnScope.() -> Unit
): Unit

A container that composes all of its contents and lays it out, fitting the width of the child. If the child's height is less than the Constraints.maxHeight, the child's height is used, or the Constraints.maxHeight otherwise. If the contents don't fit the height, the drag gesture allows scrolling its content vertically. The contents of the VerticalScroller are clipped to the VerticalScroller's bounds.

import androidx.ui.foundation.Text
import androidx.ui.foundation.VerticalScroller
import androidx.ui.text.TextStyle

val style = TextStyle(fontSize = 30.sp)
// Scroller will be clipped to this padding
VerticalScroller {
    phrases.forEach { phrase ->
        Text(phrase, style)
    }
}
Parameters
scrollerPosition: ScrollerPosition = ScrollerPosition() state of this Scroller that holds current scroll position and provides user with useful methods like smooth scrolling
modifier: Modifier = Modifier Modifier to be applied to the Scroller content layout
isScrollable: Boolean = true param to enabled or disable touch input scrolling, default is true

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 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 effect should be used to help build responsive UIs that follow the system setting, to avoid harsh contrast changes when switching between applications. The behaviour differs depending on API:

On Build.VERSION_CODES.Q and above: returns the system-wide dark theme setting.

On Build.VERSION_CODES.P and below: returns whether the device is in power saving mode or not, which can be considered analogous to dark theme for these devices.

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.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.foundation.isSystemInDarkTheme
import androidx.ui.layout.Stack
import androidx.ui.layout.preferredSize

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

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: <ERROR CLASS>

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

By default there will be DefaultDebugIndication created.

Extension functions

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.state
import androidx.ui.foundation.Text
import androidx.ui.foundation.clickable

val count = state { 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

drawBackground

fun Modifier.drawBackground(
    paint: Paint,
    shape: Shape
): Modifier

Deprecated.

Draws shape with paint behind the content.

drawBackground

fun Modifier.drawBackground(
    color: Color,
    shape: Shape = RectangleShape,
    alpha: Float = DrawScope.DefaultAlpha,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Modifier

Draws shape with a solid color behind the content.

import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.padding

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

drawBackground

fun Modifier.drawBackground(
    brush: Brush,
    shape: Shape = RectangleShape,
    alpha: Float = DrawScope.DefaultAlpha,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Modifier

Draws shape with brush behind the content.

import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBackground
import androidx.ui.foundation.shape.corner.CutCornerShape
import androidx.ui.graphics.HorizontalGradient
import androidx.ui.layout.padding

val gradientBrush = HorizontalGradient(
    colors = listOf(Color.Red, Color.Blue, Color.Green),
    startX = 0.0f,
    endX = 500.0f
)
Text(
    "Text with gradient back",
    Modifier.drawBackground(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

drawBorder

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

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

import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBorder
import androidx.ui.layout.padding

Text(
    "Text with  square border",
    modifier = Modifier.drawBorder(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

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

import androidx.ui.foundation.Border
import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBorder
import androidx.ui.foundation.shape.corner.CutCornerShape
import androidx.ui.layout.padding

Text(
    "Text with gradient border",
    modifier = Modifier.drawBorder(
        border = Border(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

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

import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBorder
import androidx.ui.graphics.HorizontalGradient
import androidx.ui.layout.padding

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.drawBorder(size = 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

indication

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

Show visual indicator for an InteractionState.

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

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