CurvedModifier

sealed interface CurvedModifier

Known direct subclasses
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

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

Public companion functions

open String

Public functions

open infix CurvedModifier

Concatenates this curved modifier with another.

Extension functions

CurvedModifier
CurvedModifier.angularGradientBackground(
    vararg colorStops: Pair<FloatColor>,
    cap: StrokeCap
)

Specifies a sweep gradient background for a curved element.

CurvedModifier

Specifies a sweep gradient background for a curved element.

CurvedModifier

Specified a solid background for a curved element.

CurvedModifier
CurvedModifier.radialGradientBackground(
    vararg colorStops: Pair<FloatColor>,
    cap: StrokeCap
)

Specifies a radial gradient background for a curved element.

CurvedModifier

Specifies a radial gradient background for a curved element.

CurvedModifier

Apply all dp space around the component.

CurvedModifier

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

Specify the sweep (angular size) for the content.

CurvedModifier

Specify the sweep (arc length) for the content in Dp.

CurvedModifier

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

fun CurvedModifier.angularGradientBackground(
    vararg colorStops: Pair<FloatColor>,
    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<FloatColor>

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

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.

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

fun CurvedModifier.radialGradientBackground(
    vararg colorStops: Pair<FloatColor>,
    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<FloatColor>

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

fun CurvedModifier.radialSize(thickness: Dp): CurvedModifier

Specify the radialSize (thickness) for the content.

Parameters
thickness: Dp

Indicates the thickness of the content.

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.

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.