Skip to content

Commit

Permalink
Adding Material3 Stepper to Compose for Wear OS
Browse files Browse the repository at this point in the history
Stepper allows users to make a selection from a range of values.
It's a full-screen control with increase button on the top, decrease
button on the bottom and a slot in the middle.
Value can be increased and decreased by clicking on the increase and
decrease buttons.
This version doesn't have range semantics by default. It can be added
using modifier such as Modifier.rangeSemantics.

Test: androidx.wear.compose.material3.Stepper tests
Bug: 266370734

Relnote: "Adding Material3 Stepper to Wear Compose. This version doesn't
	have range semantics by default. It can be added using modifier
	such as Modifier.rangeSemantics."

Change-Id: Ic39fddeb8f959bdff6aee0ee6b2cbe6c906feab8
  • Loading branch information
rajat4064g committed Jun 12, 2023
1 parent f3c90a3 commit 26f6c2d
Show file tree
Hide file tree
Showing 7 changed files with 1,069 additions and 0 deletions.
17 changes: 17 additions & 0 deletions wear/compose/compose-material3/api/current.txt
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,10 @@ package androidx.wear.compose.material3 {
method @androidx.compose.runtime.Composable public static void MaterialTheme(optional androidx.wear.compose.material3.ColorScheme colorScheme, optional androidx.wear.compose.material3.Typography typography, optional androidx.wear.compose.material3.Shapes shapes, kotlin.jvm.functions.Function0<kotlin.Unit> content);
}

public final class RangeSemanticsKt {
method public static androidx.compose.ui.Modifier rangeSemantics(androidx.compose.ui.Modifier, float value, boolean enabled, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, int steps);
}

public final class ShapeDefaults {
method public androidx.compose.foundation.shape.RoundedCornerShape getExtraLarge();
method public androidx.compose.foundation.shape.RoundedCornerShape getExtraSmall();
Expand Down Expand Up @@ -247,6 +251,19 @@ package androidx.wear.compose.material3 {
property public final androidx.compose.ui.graphics.Shape small;
}

public final class StepperDefaults {
method public androidx.compose.ui.graphics.vector.ImageVector getDecrease();
method public androidx.compose.ui.graphics.vector.ImageVector getIncrease();
property public final androidx.compose.ui.graphics.vector.ImageVector Decrease;
property public final androidx.compose.ui.graphics.vector.ImageVector Increase;
field public static final androidx.wear.compose.material3.StepperDefaults INSTANCE;
}

public final class StepperKt {
method @androidx.compose.runtime.Composable public static void Stepper(float value, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, int steps, kotlin.jvm.functions.Function0<kotlin.Unit> decreaseIcon, kotlin.jvm.functions.Function0<kotlin.Unit> increaseIcon, optional androidx.compose.ui.Modifier modifier, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional long backgroundColor, optional long contentColor, optional long iconColor, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
method @androidx.compose.runtime.Composable public static void Stepper(int value, kotlin.jvm.functions.Function1<? super java.lang.Integer,kotlin.Unit> onValueChange, kotlin.ranges.IntProgression valueProgression, kotlin.jvm.functions.Function0<kotlin.Unit> decreaseIcon, kotlin.jvm.functions.Function0<kotlin.Unit> increaseIcon, optional androidx.compose.ui.Modifier modifier, optional long backgroundColor, optional long contentColor, optional long iconColor, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
}

@androidx.compose.runtime.Immutable public final class TextButtonColors {
ctor public TextButtonColors(long containerColor, long contentColor, long disabledContainerColor, long disabledContentColor);
}
Expand Down
17 changes: 17 additions & 0 deletions wear/compose/compose-material3/api/restricted_current.txt
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,10 @@ package androidx.wear.compose.material3 {
method @androidx.compose.runtime.Composable public static void MaterialTheme(optional androidx.wear.compose.material3.ColorScheme colorScheme, optional androidx.wear.compose.material3.Typography typography, optional androidx.wear.compose.material3.Shapes shapes, kotlin.jvm.functions.Function0<kotlin.Unit> content);
}

public final class RangeSemanticsKt {
method public static androidx.compose.ui.Modifier rangeSemantics(androidx.compose.ui.Modifier, float value, boolean enabled, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, int steps);
}

public final class ShapeDefaults {
method public androidx.compose.foundation.shape.RoundedCornerShape getExtraLarge();
method public androidx.compose.foundation.shape.RoundedCornerShape getExtraSmall();
Expand Down Expand Up @@ -247,6 +251,19 @@ package androidx.wear.compose.material3 {
property public final androidx.compose.ui.graphics.Shape small;
}

public final class StepperDefaults {
method public androidx.compose.ui.graphics.vector.ImageVector getDecrease();
method public androidx.compose.ui.graphics.vector.ImageVector getIncrease();
property public final androidx.compose.ui.graphics.vector.ImageVector Decrease;
property public final androidx.compose.ui.graphics.vector.ImageVector Increase;
field public static final androidx.wear.compose.material3.StepperDefaults INSTANCE;
}

public final class StepperKt {
method @androidx.compose.runtime.Composable public static void Stepper(float value, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, int steps, kotlin.jvm.functions.Function0<kotlin.Unit> decreaseIcon, kotlin.jvm.functions.Function0<kotlin.Unit> increaseIcon, optional androidx.compose.ui.Modifier modifier, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional long backgroundColor, optional long contentColor, optional long iconColor, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
method @androidx.compose.runtime.Composable public static void Stepper(int value, kotlin.jvm.functions.Function1<? super java.lang.Integer,kotlin.Unit> onValueChange, kotlin.ranges.IntProgression valueProgression, kotlin.jvm.functions.Function0<kotlin.Unit> decreaseIcon, kotlin.jvm.functions.Function0<kotlin.Unit> increaseIcon, optional androidx.compose.ui.Modifier modifier, optional long backgroundColor, optional long contentColor, optional long iconColor, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
}

@androidx.compose.runtime.Immutable public final class TextButtonColors {
ctor public TextButtonColors(long containerColor, long contentColor, long disabledContainerColor, long disabledContentColor);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import androidx.wear.compose.integration.demos.common.Centralize
import androidx.wear.compose.integration.demos.common.ComposableDemo
import androidx.wear.compose.integration.demos.common.DemoCategory
import androidx.wear.compose.material3.samples.FixedFontSize
import androidx.wear.compose.material3.samples.StepperSample
import androidx.wear.compose.material3.samples.StepperWithIntegerSample
import androidx.wear.compose.material3.samples.StepperWithRangeSemanticsSample

val WearMaterial3Demos = DemoCategory(
"Material 3",
Expand Down Expand Up @@ -47,6 +50,31 @@ val WearMaterial3Demos = DemoCategory(
ComposableDemo("Icon Button") {
IconButtonDemo()
},
DemoCategory(
"Stepper",
listOf(
DemoCategory(
"Samples",
listOf(
ComposableDemo("Stepper") {
Centralize { StepperSample() }
},
ComposableDemo("Integer Stepper") {
Centralize { StepperWithIntegerSample() }
},
ComposableDemo("Stepper with rangeSemantics") {
Centralize { StepperWithRangeSemanticsSample() }
}
)
),
DemoCategory(
"Demos",
listOf(
// Add Stepper demos here
)
)
)
),
ComposableDemo(
title = "Fixed Font Size"
) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
* Copyright 2023 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package androidx.wear.compose.material3.samples

import androidx.annotation.Sampled
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rangeSemantics

@Sampled
@Composable
fun StepperSample() {
var value by remember { mutableStateOf(2f) }
Stepper(
value = value,
onValueChange = { value = it },
valueRange = 1f..4f,
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
steps = 7
) { Text("Value: $value") }
}

@Sampled
@Composable
fun StepperWithIntegerSample() {
var value by remember { mutableStateOf(2) }
Stepper(
value = value,
onValueChange = { value = it },
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
valueProgression = 1..10
) { Text("Value: $value") }
}

@Sampled
@Composable
fun StepperWithRangeSemanticsSample() {
var value by remember { mutableStateOf(2f) }
val valueRange = 1f..4f
val onValueChange = { i: Float -> value = i }
val steps = 7

Stepper(
value = value,
onValueChange = onValueChange,
valueRange = valueRange,
modifier = Modifier.rangeSemantics(value, true, onValueChange, valueRange, steps),
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
steps = steps,
) { Text("Value: $value") }
}
Loading

0 comments on commit 26f6c2d

Please sign in to comment.