feature: change color in GlassLike BottoomNavigation and NavRail

DroidKaigi · Sep 1, 2024 · 0b5bfe0 · 0b5bfe0
1 parent 40d3585
commit 0b5bfe0
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 27 deletions.
diff --git a/...ommonMain/kotlin/io/github/droidkaigi/confsched/main/section/GlassLikeBottomNavigation.kt b/...ommonMain/kotlin/io/github/droidkaigi/confsched/main/section/GlassLikeBottomNavigation.kt
@@ -6,6 +6,7 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
@@ -21,6 +22,7 @@ import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -77,7 +79,13 @@ fun GlassLikeBottomNavigation(
             .padding(horizontal = 48.dp)
             .fillMaxWidth()
             .height(64.dp)
-            .hazeChild(state = hazeState, shape = CircleShape)
+            .run {
+                if (isBlurSupported()) {
+                    hazeChild(state = hazeState, shape = CircleShape)
+                } else {
+                    background(MaterialTheme.colorScheme.background.copy(alpha = .95f))
+                }
+            }
             .border(
                 width = Dp.Hairline,
                 brush =
@@ -130,15 +138,32 @@ fun GlassLikeBottomNavigation(
                 },
         ) {
             val tabWidth = size.width / MainScreenTab.size
-            drawCircle(
-                color = animatedColor.copy(alpha = .6f),
-                radius = size.height / 2,
-                center =
-                Offset(
-                    (tabWidth * animatedSelectedTabIndex) + tabWidth / 2,
-                    size.height / 2,
-                ),
+            val center = Offset(
+                (tabWidth * animatedSelectedTabIndex) + tabWidth / 2,
+                size.height / 2,
             )
+            val radius = size.height / 2
+
+            if (isBlurSupported()) {
+                drawCircle(
+                    color = animatedColor.copy(alpha = .6f),
+                    radius = radius,
+                    center = center,
+                )
+            } else {
+                drawCircle(
+                    brush = Brush.radialGradient(
+                        colors = listOf(
+                            animatedColor.copy(alpha = .5f),
+                            animatedColor.copy(alpha = .1f),
+                        ),
+                        center = center,
+                        radius = radius,
+                    ),
+                    radius = radius,
+                    center = center,
+                )
+            }
         }
 
         Canvas(

diff --git a/...ain/src/commonMain/kotlin/io/github/droidkaigi/confsched/main/section/GlassLikeNavRail.kt b/...ain/src/commonMain/kotlin/io/github/droidkaigi/confsched/main/section/GlassLikeNavRail.kt
@@ -5,6 +5,7 @@ import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
@@ -19,6 +20,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -59,6 +61,7 @@ import io.github.droidkaigi.confsched.designsystem.theme.KaigiTheme
 import io.github.droidkaigi.confsched.droidkaigiui.animation.onGloballyPositionedWithFavoriteAnimationScope
 import io.github.droidkaigi.confsched.droidkaigiui.useIf
 import io.github.droidkaigi.confsched.main.MainScreenTab
+import io.github.droidkaigi.confsched.model.isBlurSupported
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
@@ -72,16 +75,22 @@ fun GlassLikeNavRail(
 ) {
     Box(
         modifier = modifier.size(width = 64.dp, height = 320.dp)
-            .hazeChild(state = hazeState, shape = CircleShape).border(
-                width = Dp.Hairline,
-                brush = Brush.verticalGradient(
-                    colors = listOf(
-                        Color.White.copy(alpha = .8f),
-                        Color.White.copy(alpha = .2f),
-                    ),
-                ),
-                shape = CircleShape,
-            ),
+            .run {
+                if (isBlurSupported()) {
+                    hazeChild(state = hazeState, shape = CircleShape).border(
+                        width = Dp.Hairline,
+                        brush = Brush.verticalGradient(
+                            colors = listOf(
+                                Color.White.copy(alpha = .8f),
+                                Color.White.copy(alpha = .2f),
+                            ),
+                        ),
+                        shape = CircleShape,
+                    )
+                } else {
+                    background(MaterialTheme.colorScheme.background.copy(alpha = .95f))
+                }
+            },
     ) {
         NavRailTabs(
             selectedTab = currentTab,
@@ -113,15 +122,32 @@ fun GlassLikeNavRail(
                 .blur(50.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded),
         ) {
             val tabWidth = size.height / MainScreenTab.size
-            drawCircle(
-                color = animatedColor.copy(alpha = .6f),
-                radius = size.width / 2,
-                center =
-                Offset(
-                    size.width / 2,
-                    (tabWidth * animatedSelectedTabIndex) + tabWidth / 2,
-                ),
+            val radius = size.width / 2
+            val center = Offset(
+                size.width / 2,
+                (tabWidth * animatedSelectedTabIndex) + tabWidth / 2,
             )
+
+            if (isBlurSupported()) {
+                drawCircle(
+                    color = animatedColor.copy(alpha = .6f),
+                    radius = radius,
+                    center = center,
+                )
+            } else {
+                drawCircle(
+                    brush = Brush.radialGradient(
+                        colors = listOf(
+                            animatedColor.copy(alpha = .5f),
+                            animatedColor.copy(alpha = .1f),
+                        ),
+                        center = center,
+                        radius = radius,
+                    ),
+                    radius = radius,
+                    center = center,
+                )
+            }
         }
 
         Canvas(