Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate many snippets to use Material 3 instead of Material 2. #320

Merged
merged 12 commits into from
Aug 30, 2024
Merged

Migrate many snippets to use Material 3 instead of Material 2. #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ec38728
Do latest 1.7.0-beta06 version updates
riggaroo Jul 25, 2024
09baf6b
Apply Spotless
riggaroo Jul 25, 2024
d08c945
Code cleanup
riggaroo Jul 25, 2024
debec48
Merge branch 'riggaroo/stable-updates' of https://github.com/android/…
riggaroo Jul 25, 2024
abceb7b
Apply Spotless
riggaroo Jul 25, 2024
3fe9298
Fix broken test
riggaroo Jul 29, 2024
ed4062b
Remove M2 usage from many snippets.
riggaroo Aug 27, 2024
dc23e6a
Merge branch 'latest' into riggaroo/m2-remove
riggaroo Aug 29, 2024
26409b4
Apply Spotless
riggaroo Aug 29, 2024
a4c48c8
Remove M2 usage from many snippets.
riggaroo Aug 29, 2024
964a9e3
Remove M2 usage from many snippets.
riggaroo Aug 29, 2024
2e5baba
Revert incorrect commit
riggaroo Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 77 additions & 35 deletions compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.Crossfade
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.animateColor
import androidx.compose.animation.animateContentSize
Expand Down Expand Up @@ -81,18 +80,19 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Phone
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.State
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
Expand Down Expand Up @@ -156,7 +156,12 @@ private fun AnimatedVisibilityWithEnterAndExit() {
),
exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
Text("Hello", Modifier.fillMaxWidth().height(200.dp))
Text(
"Hello",
Modifier
.fillMaxWidth()
.height(200.dp)
)
}
// [END android_compose_animations_animated_visibility_enter_exit]
}
Expand Down Expand Up @@ -203,7 +208,11 @@ private fun AnimatedVisibilityAnimateEnterExitChildren() {
exit = fadeOut()
) {
// Fade in/out the background and the foreground.
Box(Modifier.fillMaxSize().background(Color.DarkGray)) {
Box(
Modifier
.fillMaxSize()
.background(Color.DarkGray)
) {
Box(
Modifier
.align(Alignment.Center)
Expand Down Expand Up @@ -238,7 +247,11 @@ private fun AnimatedVisibilityTransition() {
val background by transition.animateColor(label = "color") { state ->
if (state == EnterExitState.Visible) Color.Blue else Color.Gray
}
Box(modifier = Modifier.size(128.dp).background(background))
Box(
modifier = Modifier
.size(128.dp)
.background(background)
)
}
// [END android_compose_animations_animated_visibility_transition]
}
Expand All @@ -249,9 +262,10 @@ private fun AnimateAsStateSimple() {
// [START android_compose_animations_animate_as_state]
var enabled by remember { mutableStateOf(true) }

val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f)
val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f, label = "alpha")
Box(
Modifier.fillMaxSize()
Modifier
.fillMaxSize()
.graphicsLayer(alpha = alpha)
.background(Color.Red)
)
Expand All @@ -263,11 +277,14 @@ private fun AnimateAsStateSimple() {
private fun AnimatedContentSimple() {
// [START android_compose_animations_animated_content_simple]
Row {
var count by remember { mutableStateOf(0) }
var count by remember { mutableIntStateOf(0) }
Button(onClick = { count++ }) {
Text("Add")
}
AnimatedContent(targetState = count) { targetCount ->
AnimatedContent(
targetState = count,
label = "animated content"
) { targetCount ->
// Make sure to use `targetCount`, not `count`.
Text(text = "Count: $targetCount")
}
Expand Down Expand Up @@ -297,13 +314,13 @@ private fun AnimatedContentTransitionSpec(count: Int) {
// be displayed out of bounds.
SizeTransform(clip = false)
)
}
}, label = "animated content"
) { targetCount ->
Text(text = "$targetCount")
}
// [END android_compose_animations_animated_content_transition_spec]
}
@OptIn(ExperimentalAnimationApi::class, ExperimentalMaterialApi::class)

@Composable
private fun AnimatedContentSizeTransform() {
// [START android_compose_animations_animated_content_size_transform]
Expand Down Expand Up @@ -332,7 +349,7 @@ private fun AnimatedContentSizeTransform() {
}
}
}
}
}, label = "size transform"
) { targetExpanded ->
if (targetExpanded) {
Expanded()
Expand All @@ -349,7 +366,9 @@ private fun AnimateContentSizeSimple() {
// [START android_compose_animations_animated_content_size_modifier_simple]
var message by remember { mutableStateOf("Hello") }
Box(
modifier = Modifier.background(Color.Blue).animateContentSize()
modifier = Modifier
.background(Color.Blue)
.animateContentSize()
) { Text(text = message) }
// [END android_compose_animations_animated_content_size_modifier_simple]
}
Expand All @@ -358,7 +377,7 @@ private fun AnimateContentSizeSimple() {
private fun CrossfadeSimple() {
// [START android_compose_animations_crossfade_simple]
var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage) { screen ->
Crossfade(targetState = currentPage, label = "cross fade") { screen ->
when (screen) {
"A" -> Text("Page A")
"B" -> Text("Page B")
Expand Down Expand Up @@ -409,6 +428,7 @@ private object UpdateTransitionEnumState {
when {
BoxState.Expanded isTransitioningTo BoxState.Collapsed ->
spring(stiffness = 50f)

else ->
tween(durationMillis = 500)
}
Expand Down Expand Up @@ -476,7 +496,6 @@ private object UpdateTransitionCreateChildTransition {
// [END android_compose_animations_transitions_dialer_example]
}

@OptIn(ExperimentalAnimationApi::class, ExperimentalMaterialApi::class)
@Composable
private fun UpdateTransitionAnimatedVisibility() {
// [START android_compose_animations_transitions_animated_visibility]
Expand All @@ -493,9 +512,13 @@ private fun UpdateTransitionAnimatedVisibility() {
onClick = { selected = !selected },
shape = RoundedCornerShape(8.dp),
border = BorderStroke(2.dp, borderColor),
elevation = elevation
shadowElevation = elevation
) {
Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(text = "Hello, world!")
// AnimatedVisibility as a part of the transition.
transition.AnimatedVisibility(
Expand Down Expand Up @@ -566,17 +589,22 @@ private object UpdateTransitionEncapsulating {
@Composable
private fun RememberInfiniteTransitionSimple() {
// [START android_compose_animations_infinite_transition_simple]
val infiniteTransition = rememberInfiniteTransition()
val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
initialValue = Color.Red,
targetValue = Color.Green,
animationSpec = infiniteRepeatable(
animation = tween(1000, easing = LinearEasing),
repeatMode = RepeatMode.Reverse
)
),
label = "color"
)

Box(Modifier.fillMaxSize().background(color))
Box(
Modifier
.fillMaxSize()
.background(color)
)
// [END android_compose_animations_infinite_transition_simple]
}

Expand All @@ -588,9 +616,14 @@ private fun AnimatableSimple(ok: Boolean) {
LaunchedEffect(ok) {
color.animateTo(if (ok) Color.Green else Color.Red)
}
Box(Modifier.fillMaxSize().background(color.value))
Box(
Modifier
.fillMaxSize()
.background(color.value)
)
// [END android_compose_animations_animatable_simple]
}

@Composable
private fun TargetBasedAnimationSimple(someCustomCondition: () -> Boolean) {
// [START android_compose_animations_target_based_animation_simple]
Expand All @@ -602,7 +635,7 @@ private fun TargetBasedAnimationSimple(someCustomCondition: () -> Boolean) {
targetValue = 1000f
)
}
var playTime by remember { mutableStateOf(0L) }
var playTime by remember { mutableLongStateOf(0L) }

LaunchedEffect(anim) {
val startTime = withFrameNanos { it }
Expand All @@ -621,7 +654,8 @@ private fun AnimationSpecTween(enabled: Boolean) {
val alpha: Float by animateFloatAsState(
targetValue = if (enabled) 1f else 0.5f,
// Configure the animation duration and easing.
animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing),
label = "alpha"
)
// [END android_compose_animations_spec_tween]
}
Expand All @@ -634,7 +668,8 @@ private fun AnimationSpecSpring() {
animationSpec = spring(
dampingRatio = Spring.DampingRatioHighBouncy,
stiffness = Spring.StiffnessMedium
)
),
label = "spring spec"
)
// [END android_compose_animations_spec_spring]
}
Expand All @@ -648,7 +683,8 @@ private fun AnimationSpecTween() {
durationMillis = 300,
delayMillis = 50,
easing = LinearOutSlowInEasing
)
),
label = "tween delay"
)
// [END android_compose_animations_spec_tween_delay]
}
Expand All @@ -664,7 +700,8 @@ private fun AnimationSpecKeyframe() {
0.2f at 15 using FastOutLinearInEasing // for 15-75 ms
0.4f at 75 // ms
0.4f at 225 // ms
}
},
label = "keyframe"
)
// [END android_compose_animations_spec_keyframe]
}
Expand All @@ -678,7 +715,8 @@ private fun AnimationSpecRepeatable() {
iterations = 3,
animation = tween(durationMillis = 300),
repeatMode = RepeatMode.Reverse
)
),
label = "repeatable spec"
)
// [END android_compose_animations_spec_repeatable]
}
Expand All @@ -691,7 +729,8 @@ private fun AnimationSpecInfiniteRepeatable() {
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 300),
repeatMode = RepeatMode.Reverse
)
),
label = "infinite repeatable"
)
// [END android_compose_animations_spec_infinite_repeatable]
}
Expand All @@ -701,7 +740,8 @@ private fun AnimationSpecSnap() {
// [START android_compose_animations_spec_snap]
val value by animateFloatAsState(
targetValue = 1f,
animationSpec = snap(delayMillis = 50)
animationSpec = snap(delayMillis = 50),
label = "snap spec"
)
// [END android_compose_animations_spec_snap]
}
Expand All @@ -717,7 +757,8 @@ private object Easing {
animationSpec = tween(
durationMillis = 300,
easing = CustomEasing
)
),
label = "custom easing"
)
// ……
}
Expand Down Expand Up @@ -747,7 +788,8 @@ private object AnimationVectorCustomType {
convertFromVector = { vector: AnimationVector2D ->
MySize(vector.v1.dp, vector.v2.dp)
}
)
),
label = "size"
)
}
// [END android_compose_animations_vector_convertor_custom_type]
Expand Down
12 changes: 7 additions & 5 deletions ...e/snippets/src/main/java/com/example/compose/snippets/designsystems/CustomDesignSystem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@

package com.example.compose.snippets.designsystems

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.shape.ZeroCornerSize
import androidx.compose.material.Colors
import androidx.compose.material.ContentAlpha
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.material3.Shapes
Expand Down Expand Up @@ -57,8 +57,10 @@ import androidx.compose.ui.unit.sp
private object CustomDesignSystemExtend {
// [START android_compose_designsystems_custom_extend]
// Use with MaterialTheme.colors.snackbarAction
val Colors.snackbarAction: Color
get() = if (isLight) Red300 else Red700

val ColorScheme.snackbarAction: Color
@Composable
get() = if (isSystemInDarkTheme()) Red300 else Red700

// Use with MaterialTheme.typography.textFieldInput
val Typography.textFieldInput: TextStyle
Expand Down Expand Up @@ -339,7 +341,7 @@ object FullyCustomDesignSystem {
.copy(alpha = 0.12f)
.compositeOver(CustomTheme.colors.component),
disabledContentColor = CustomTheme.colors.content
.copy(alpha = ContentAlpha.disabled)
.copy(alpha = 0.5f)
),
shape = ButtonShape,
elevation = ButtonDefaults.elevatedButtonElevation(
Expand Down
Loading
Loading