CurvedModifier

Artifact: androidx.wear.compose:compose-foundation

View Source

Added in 1.0.0

sealed interface CurvedModifier

Known direct subclasses

CurvedModifier.Companion

CurvedModifier.Companion

The companion object CurvedModifier is the empty, default, or starter CurvedModifier that contains no Elements.

---

An ordered, immutable, collection of modifier elements that work with curved components, in a polar coordinate space.

This plays the same role as androidx.compose.ui.Modifier, but for the Curved composables.

Summary

Nested types
object CurvedModifier.Companion : CurvedModifier The companion object CurvedModifier is the empty, default, or starter CurvedModifier that contains no Elements.

Public companion functions
open String	toString()

Public functions
open infix CurvedModifier	then(other: CurvedModifier) Concatenates this curved modifier with another.

Extension functions
CurvedModifier	CurvedModifier.angularGradientBackground(     vararg colorStops: Pair<Float, Color>,     cap: StrokeCap ) Specifies a sweep gradient background for a curved element.
CurvedModifier	CurvedModifier.angularGradientBackground(     colors: List<Color>,     cap: StrokeCap ) Specifies a sweep gradient background for a curved element.
CurvedModifier	CurvedModifier.background(color: Color, cap: StrokeCap) Specified a solid background for a curved element.
CurvedModifier	CurvedModifier.radialGradientBackground(     vararg colorStops: Pair<Float, Color>,     cap: StrokeCap ) Specifies a radial gradient background for a curved element.
CurvedModifier	CurvedModifier.radialGradientBackground(     colors: List<Color>,     cap: StrokeCap ) Specifies a radial gradient background for a curved element.
CurvedModifier	CurvedModifier.padding(all: Dp) Apply all dp space around the component.
CurvedModifier	CurvedModifier.padding(paddingValues: ArcPaddingValues) Apply additional space along the edges of the content.
CurvedModifier	CurvedModifier.padding(radial: Dp, angular: Dp) Apply angular dp space before and after the component, and radial dp space to the outer and inner edges.
CurvedModifier	CurvedModifier.padding(outer: Dp, inner: Dp, before: Dp, after: Dp) Apply additional space along the edges of the content.
CurvedModifier	CurvedModifier.parentDataModifier(modifyParentData: (Any?) -> Any) A CurvedModifier that provides data to the parent layout.
CurvedModifier	CurvedModifier.weight(     weight: @FloatRange(from = 0.0, fromInclusive = false) Float ) Size the element's proportional to its weight relative to other weighted sibling elements in the container (this will be the height in a curvedColumn and the width in a curvedRow).
CurvedModifier	CurvedModifier.angularSize(sweepDegrees: Float) Specify the sweep (angular size) for the content.
CurvedModifier	CurvedModifier.angularSizeDp(angularWidth: Dp) Specify the sweep (arc length) for the content in Dp.
CurvedModifier	CurvedModifier.radialSize(thickness: Dp) Specify the radialSize (thickness) for the content.
CurvedModifier	CurvedModifier.size(     sweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float,     thickness: Dp ) Specify the dimensions (sweep and thickness) for the content.
CurvedModifier	CurvedModifier.sizeIn(     minSweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float,     maxSweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float,     minThickness: Dp,     maxThickness: Dp ) Specify the dimensions of the content to be restricted between the given bounds.

Public companion functions

toString

open fun toString(): String

Public functions

then

Added in 1.0.0

open infix fun then(other: CurvedModifier): CurvedModifier

Concatenates this curved modifier with another.

Returns a CurvedModifier representing this curved modifier followed by other in sequence.

Extension functions

angularGradientBackground

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.angularGradientBackground(
    vararg colorStops: Pair<Float, Color>,
    cap: StrokeCap = StrokeCap.Butt
): CurvedModifier

Specifies a sweep gradient background for a curved element.

Example usage:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.CurvedTextStyle
import androidx.wear.compose.foundation.angularGradientBackground
import androidx.wear.compose.foundation.basicCurvedText
import androidx.wear.compose.foundation.padding
import androidx.wear.compose.foundation.radialGradientBackground

CurvedLayout(modifier = Modifier.fillMaxSize()) {
    basicCurvedText(
        "Radial",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.radialGradientBackground(0f to Color.White, 1f to Color.Black)
                .padding(5.dp)
    )
    basicCurvedText(
        "Angular",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.angularGradientBackground(0f to Color.White, 1f to Color.Black)
                .padding(5.dp)
    )
}

Parameters
vararg colorStops: Pair<Float, Color>	Colors and their offset in the gradient area. Note that the offsets should be in ascending order. 0 means where the curved element starts laying out, 1 means the end
cap: StrokeCap = StrokeCap.Butt	How to start and end the background.

angularGradientBackground

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.angularGradientBackground(
    colors: List<Color>,
    cap: StrokeCap = StrokeCap.Butt
): CurvedModifier

Specifies a sweep gradient background for a curved element.

Parameters
colors: List<Color>	Colors in the gradient area. Gradient goes in the clockwise direction.
cap: StrokeCap = StrokeCap.Butt	How to start and end the background.

background

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.background(color: Color, cap: StrokeCap = StrokeCap.Butt): CurvedModifier

Specified a solid background for a curved element.

Parameters
color: Color	The color to use to paint the background.
cap: StrokeCap = StrokeCap.Butt	How to start and end the background.

radialGradientBackground

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.radialGradientBackground(
    vararg colorStops: Pair<Float, Color>,
    cap: StrokeCap = StrokeCap.Butt
): CurvedModifier

Specifies a radial gradient background for a curved element.

Example usage:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.CurvedTextStyle
import androidx.wear.compose.foundation.angularGradientBackground
import androidx.wear.compose.foundation.basicCurvedText
import androidx.wear.compose.foundation.padding
import androidx.wear.compose.foundation.radialGradientBackground

CurvedLayout(modifier = Modifier.fillMaxSize()) {
    basicCurvedText(
        "Radial",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.radialGradientBackground(0f to Color.White, 1f to Color.Black)
                .padding(5.dp)
    )
    basicCurvedText(
        "Angular",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.angularGradientBackground(0f to Color.White, 1f to Color.Black)
                .padding(5.dp)
    )
}

Parameters
vararg colorStops: Pair<Float, Color>	Colors and their offset in the gradient area. Note that the offsets should be in ascending order. 0 means the outer curve and 1 means the inner curve of the curved element.
cap: StrokeCap = StrokeCap.Butt	How to start and end the background.

radialGradientBackground

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.radialGradientBackground(
    colors: List<Color>,
    cap: StrokeCap = StrokeCap.Butt
): CurvedModifier

Specifies a radial gradient background for a curved element.

Parameters
colors: List<Color>	Colors in the gradient area. Gradient goes from the outer curve to the inner curve of the curved element.
cap: StrokeCap = StrokeCap.Butt	How to start and end the background.

padding

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.padding(all: Dp = 0.dp): CurvedModifier

Apply all dp space around the component.

Parameters
all: Dp = 0.dp	The space added to all edges.

padding

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.padding(paddingValues: ArcPaddingValues): CurvedModifier

Apply additional space along the edges of the content.

Parameters
paddingValues: ArcPaddingValues	The ArcPaddingValues to use. See that class and factory methods to see how paddings can be specified.

padding

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.padding(radial: Dp = 0.dp, angular: Dp = 0.dp): CurvedModifier

Apply angular dp space before and after the component, and radial dp space to the outer and inner edges.

Parameters
radial: Dp = 0.dp	The space added to the outer and inner edges of the content, in dp.
angular: Dp = 0.dp	The space added before and after the content, in dp.

padding

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.padding(outer: Dp, inner: Dp, before: Dp, after: Dp): CurvedModifier

Apply additional space along the edges of the content. Dimmensions are in dp. For before and after they will be considered as if they are at the midpoint of the content (for conversion between dimension and angle).

Parameters
outer: Dp	The space to add to the outer edge of the content (away from the center of the containing CurvedLayout)
inner: Dp	The space to add to the inner edge of the content (towards the center of the containing CurvedLayout)
before: Dp	The space added before the component, if it was draw clockwise. This is the edge of the component with the "smallest" angle.
after: Dp	The space added after the component, if it was draw clockwise. This is the edge of the component with the "biggest" angle.

parentDataModifier

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.parentDataModifier(modifyParentData: (Any?) -> Any): CurvedModifier

A CurvedModifier that provides data to the parent layout. The parent data is commonly used to inform the parent how the child Layout should be measured and positioned.

Parameters
modifyParentData: (Any?) -> Any	provides a parentData, given the parentData provided through the modifier's chain.

weight

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.weight(
    weight: @FloatRange(from = 0.0, fromInclusive = false) Float
): CurvedModifier

Size the element's proportional to its weight relative to other weighted sibling elements in the container (this will be the height in a curvedColumn and the width in a curvedRow). The parent will divide the space remaining after measuring unweighted child elements and distribute it according to this weight.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.angularSize
import androidx.wear.compose.foundation.background
import androidx.wear.compose.foundation.basicCurvedText
import androidx.wear.compose.foundation.curvedRow
import androidx.wear.compose.foundation.weight

CurvedLayout(modifier = Modifier.fillMaxSize().background(Color.White)) {
    // Evenly spread A, B & C in a 90 degree angle.
    curvedRow(modifier = CurvedModifier.angularSize(90f)) {
        basicCurvedText("A")
        curvedRow(
            modifier = CurvedModifier.weight(1f),
        ) {}
        basicCurvedText("B")
        curvedRow(
            modifier = CurvedModifier.weight(1f),
        ) {}
        basicCurvedText("C")
    }
}

Parameters
weight: @FloatRange(from = 0.0, fromInclusive = false) Float	The proportional size to give to this element, as related to the total of all weighted siblings. Must be positive.

angularSize

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.angularSize(sweepDegrees: Float): CurvedModifier

Specify the sweep (angular size) for the content.

Parameters
sweepDegrees: Float	Indicates the sweep (angular size) of the content.

angularSizeDp

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.angularSizeDp(angularWidth: Dp): CurvedModifier

Specify the sweep (arc length) for the content in Dp. The arc length will be measured at the center of the item, except for basicCurvedText, where it will be measured at the text baseline.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.CurvedTextStyle
import androidx.wear.compose.foundation.angularSize
import androidx.wear.compose.foundation.angularSizeDp
import androidx.wear.compose.foundation.background
import androidx.wear.compose.foundation.basicCurvedText
import androidx.wear.compose.foundation.radialSize
import androidx.wear.compose.foundation.size

CurvedLayout(modifier = Modifier.fillMaxSize()) {
    basicCurvedText(
        "45 deg",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.background(Color.White).size(sweepDegrees = 45f, thickness = 40.dp),
    )
    basicCurvedText(
        "40 dp",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.background(Color.Yellow).radialSize(40.dp).angularSizeDp(40.dp),
    )
}

Parameters
angularWidth: Dp	Indicates the arc length of the content in Dp.

radialSize

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.radialSize(thickness: Dp): CurvedModifier

Specify the radialSize (thickness) for the content.

Parameters
thickness: Dp	Indicates the thickness of the content.

size

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.size(
    sweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float,
    thickness: Dp
): CurvedModifier

Specify the dimensions (sweep and thickness) for the content.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.CurvedTextStyle
import androidx.wear.compose.foundation.angularSize
import androidx.wear.compose.foundation.angularSizeDp
import androidx.wear.compose.foundation.background
import androidx.wear.compose.foundation.basicCurvedText
import androidx.wear.compose.foundation.radialSize
import androidx.wear.compose.foundation.size

CurvedLayout(modifier = Modifier.fillMaxSize()) {
    basicCurvedText(
        "45 deg",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.background(Color.White).size(sweepDegrees = 45f, thickness = 40.dp),
    )
    basicCurvedText(
        "40 dp",
        style = { CurvedTextStyle(fontSize = 16.sp, color = Color.Black) },
        modifier =
            CurvedModifier.background(Color.Yellow).radialSize(40.dp).angularSizeDp(40.dp),
    )
}

Parameters
sweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float	Indicates the sweep (angular size) of the content.
thickness: Dp	Indicates the thickness (radial size) of the content.

sizeIn

Artifact: androidx.wear.compose:compose-foundation

View Source

fun CurvedModifier.sizeIn(
    minSweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float = 0.0f,
    maxSweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float = 360.0f,
    minThickness: Dp = 0.dp,
    maxThickness: Dp = Dp.Infinity
): CurvedModifier

Specify the dimensions of the content to be restricted between the given bounds.

Parameters
minSweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float = 0.0f	the minimum angle (in degrees) for the content.
maxSweepDegrees: @FloatRange(from = 0.0, to = 360.0) Float = 360.0f	the maximum angle (in degrees) for the content.
minThickness: Dp = 0.dp	the minimum thickness (radial size) for the content.
maxThickness: Dp = Dp.Infinity	the maximum thickness (radial size) for the content.