From 633d036dd7ea20bfd134d0358073c0111c5d0456 Mon Sep 17 00:00:00 2001 From: Kavish Devar Date: Sat, 13 Jun 2026 15:48:54 +0530 Subject: [PATCH] android: match ios27 icon button and top bar style --- .../components/StyledIconButton.kt | 45 ++++++++++++++++--- .../presentation/components/StyledScaffold.kt | 32 +++++++------ 2 files changed, 57 insertions(+), 20 deletions(-) diff --git a/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledIconButton.kt b/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledIconButton.kt index 6937587a..ca50300f 100644 --- a/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledIconButton.kt +++ b/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledIconButton.kt @@ -18,15 +18,21 @@ package me.kavishdevar.librepods.presentation.components +import android.content.res.Configuration.UI_MODE_NIGHT_NO +import android.content.res.Configuration.UI_MODE_NIGHT_YES import android.graphics.RuntimeShader import android.os.Build import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.VectorConverter import androidx.compose.animation.core.VisibilityThreshold import androidx.compose.animation.core.spring +import androidx.compose.foundation.background import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text import androidx.compose.material3.TextButton @@ -36,6 +42,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.BlendMode @@ -44,6 +51,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ShaderBrush import androidx.compose.ui.graphics.TileMode import androidx.compose.ui.graphics.drawOutline +import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.graphics.drawscope.translate import androidx.compose.ui.graphics.isSpecified import androidx.compose.ui.graphics.layer.CompositingStrategy @@ -58,6 +66,8 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.compose.ui.util.fastCoerceAtMost @@ -68,7 +78,7 @@ import com.kyant.backdrop.backdrops.rememberLayerBackdrop import com.kyant.backdrop.drawBackdrop import com.kyant.backdrop.effects.lens import com.kyant.backdrop.highlight.Highlight -import com.kyant.backdrop.shadow.Shadow +import com.kyant.backdrop.shadow.InnerShadow import kotlinx.coroutines.launch import me.kavishdevar.librepods.R import me.kavishdevar.librepods.utils.inspectDragGestures @@ -136,11 +146,14 @@ half4 main(float2 coord) { backdrop = backdrop, shape = { RoundedCornerShape(56.dp) }, highlight = { Highlight.Ambient.copy(alpha = if (isDarkTheme) 1f else 0f) }, - shadow = { - Shadow( - radius = 12f.dp, - color = Color.Black.copy(if (isDarkTheme) 0.08f else 0.2f) - ) + innerShadow = { + if (isDarkTheme) { + InnerShadow( + radius = 0.5.dp, + offset = DpOffset(1.dp, 1.dp), + color = Color.White.copy(0.6f), + ) + } else InnerShadow() }, layerBlock = { if (!enabled) return@drawBackdrop @@ -204,6 +217,14 @@ half4 main(float2 coord) { drawRect(surfaceColor) } + if (!isDarkTheme) { + drawOutline( + outline = outline, + color = Color.Black.copy(0.4f), + style = Stroke(1f), + ) + } + drawRect( (if (isDarkTheme) Color(0xFFAFAFAF) else Color.White).copy( progress.coerceIn( @@ -304,3 +325,15 @@ half4 main(float2 coord) { ) } } + +@Preview(uiMode = UI_MODE_NIGHT_NO, name = "Light") +@Preview(uiMode = UI_MODE_NIGHT_YES, name = "Dark") +@Composable +fun StyledIconButtonPreview() { + Box(modifier = Modifier.height(120.dp).width(200.dp).background(if (isSystemInDarkTheme()) Color(0xFF000000) else Color(0xFFF2F2F7), RoundedCornerShape(28.dp)), contentAlignment = Alignment.Center) { + StyledIconButton( + icon = "􀍟", + onClick = { } + ) + } +} diff --git a/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledScaffold.kt b/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledScaffold.kt index 6376188c..0175ad9f 100644 --- a/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledScaffold.kt +++ b/android/app/src/main/java/me/kavishdevar/librepods/presentation/components/StyledScaffold.kt @@ -52,7 +52,6 @@ import androidx.compose.ui.zIndex import com.kyant.backdrop.backdrops.LayerBackdrop import com.kyant.backdrop.backdrops.layerBackdrop import com.kyant.backdrop.backdrops.rememberLayerBackdrop -import dev.chrisbanes.haze.HazeProgressive import dev.chrisbanes.haze.HazeState import dev.chrisbanes.haze.HazeTint import dev.chrisbanes.haze.hazeEffect @@ -93,24 +92,29 @@ fun StyledScaffold( .height(64.dp + topPadding) .fillMaxWidth() .layerBackdrop(backdrop) - .hazeEffect(state = hazeState) { - tints = listOf(HazeTint(color = if (isDarkTheme) Color.Black else Color.White)) - progressive = HazeProgressive.verticalGradient(startIntensity = 1f, endIntensity = 0f) + .hazeEffect( + state = hazeState + ) { + backgroundColor = if (isDarkTheme) Color(0xFF000000) else Color(0xFFF2F2F7) + tints = listOf(HazeTint( + if (isDarkTheme) Color.Black.copy(0.55f) else Color(0xFFF2F2F7).copy(alpha = 0.85f) + )) + blurRadius = 6.dp } ) { Column(modifier = Modifier.fillMaxSize()) { Spacer(modifier = Modifier.height(topPadding + 12.dp)) Text( - text = title, - style = TextStyle( - fontSize = 20.sp, - fontWeight = FontWeight.Medium, - color = if (isDarkTheme) Color.White else Color.Black, - fontFamily = FontFamily(Font(R.font.sf_pro)) - ), - modifier = Modifier.fillMaxWidth(), - textAlign = TextAlign.Center - ) + text = title, + style = TextStyle( + fontSize = 20.sp, + fontWeight = FontWeight.SemiBold, + color = if (isDarkTheme) Color.White else Color.Black, + fontFamily = FontFamily(Font(R.font.sf_pro)) + ), + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center + ) } } Row(