feat: implement liquid glass effect in bottom navigation and mini player

Author: maxrave-dev

app/src/main/java/com/maxrave/simpmusic/extension/UIExt.kt

@@ -46,6 +46,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.ColorMatrix
 import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
@@ -60,12 +61,18 @@ import androidx.compose.ui.platform.LocalResources
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
 import androidx.core.app.PictureInPictureModeChangedInfo
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.ColorUtils
 import androidx.core.graphics.drawable.toBitmap
 import androidx.core.util.Consumer
 import com.kmpalette.palette.graphics.Palette
+import com.kyant.backdrop.Backdrop
+import com.kyant.backdrop.drawBackdrop
+import com.kyant.backdrop.effects.dispersion
+import com.kyant.backdrop.effects.refraction
+import com.kyant.backdrop.effects.saturation
 import com.maxrave.domain.data.model.ui.ScreenSizeInfo
 import com.maxrave.logger.Logger
 import com.maxrave.simpmusic.ui.theme.md_theme_dark_background
@@ -557,4 +564,29 @@ fun animateAlignmentAsState(targetAlignment: Alignment): State<Alignment> {
     val horizontal by animateFloatAsState(biased.horizontalBias)
     val vertical by animateFloatAsState(biased.verticalBias)
     return remember { derivedStateOf { BiasAlignment(horizontal, vertical) } }
-}
+}
+
+fun Modifier.drawBackdropCustomShape(
+    backdrop: Backdrop,
+    shape: Shape,
+    alpha: Float = 0.6f,
+): Modifier =
+    this.drawBackdrop(
+        backdrop = backdrop,
+        shapeProvider = { shape },
+        onDrawSurface = { drawRect(Color.Black.copy(alpha = alpha.coerceIn(0f, 1f))) },
+    ) {
+        // saturation boost
+        saturation()
+        // blur
+        // lens
+        refraction(
+            height = 24f.dp.toPx(),
+            amount = 64f.dp.toPx(),
+            hasDepthEffect = true,
+        )
+        dispersion(
+            height = 12.dp.toPx(),
+            amount = 24.dp.toPx(),
+        )
+    }

app/src/main/java/com/maxrave/simpmusic/ui/MainActivity.kt

@@ -52,6 +52,7 @@ import androidx.compose.ui.window.DialogProperties
 import androidx.core.net.toUri
 import androidx.core.os.LocaleListCompat
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.navigation.NavDestination.Companion.hasRoute
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.kyant.backdrop.backdrop
@@ -68,10 +69,12 @@ import com.maxrave.domain.mediaservice.handler.MediaPlayerHandler
 import com.maxrave.logger.Logger
 import com.maxrave.simpmusic.di.viewModelModule
 import com.maxrave.simpmusic.ui.component.AppBottomNavigationBar
+import com.maxrave.simpmusic.ui.component.LiquidGlassAppBottomNavigationBar
 import com.maxrave.simpmusic.ui.navigation.destination.home.NotificationDestination
 import com.maxrave.simpmusic.ui.navigation.destination.list.AlbumDestination
 import com.maxrave.simpmusic.ui.navigation.destination.list.ArtistDestination
 import com.maxrave.simpmusic.ui.navigation.destination.list.PlaylistDestination
+import com.maxrave.simpmusic.ui.navigation.destination.search.SearchDestination
 import com.maxrave.simpmusic.ui.navigation.graph.AppNavigationGraph
 import com.maxrave.simpmusic.ui.screen.MiniPlayer
 import com.maxrave.simpmusic.ui.screen.player.NowPlayingScreen
@@ -238,11 +241,16 @@ class MainActivity : AppCompatActivity() {
             val intent by viewModel.intent.collectAsStateWithLifecycle()
 
             val isTranslucentBottomBar by viewModel.getTranslucentBottomBar().collectAsStateWithLifecycle(DataStoreManager.FALSE)
+            val isLiquidGlassEnabled by viewModel.getEnableLiquidGlass().collectAsStateWithLifecycle(DataStoreManager.FALSE)
             // MiniPlayer visibility logic
             var isShowMiniPlayer by rememberSaveable {
                 mutableStateOf(true)
             }
 
+            var isInSearchPage by rememberSaveable {
+                mutableStateOf(false)
+            }
+
             // Now playing screen
             var isShowNowPlaylistScreen by rememberSaveable {
                 mutableStateOf(false)
@@ -349,6 +357,9 @@ class MainActivity : AppCompatActivity() {
                 if (navBackStackEntry?.destination?.route?.contains("FullscreenDestination") == true) {
                     isShowNowPlaylistScreen = false
                 }
+                navBackStackEntry?.destination?.let { current ->
+                    isInSearchPage = current.hasRoute(SearchDestination::class)
+                }
             }
             val backdrop = rememberBackdrop()
             AppTheme {
@@ -361,7 +372,7 @@ class MainActivity : AppCompatActivity() {
                         ) {
                             Column {
                                 AnimatedVisibility(
-                                    isShowMiniPlayer,
+                                    isShowMiniPlayer && (!isInSearchPage || isLiquidGlassEnabled == DataStoreManager.FALSE),
                                     enter = fadeIn() + slideInHorizontally(),
                                     exit = fadeOut(),
                                 ) {
@@ -374,6 +385,7 @@ class MainActivity : AppCompatActivity() {
                                             ).padding(
                                                 bottom = 4.dp,
                                             ),
+                                        backdrop = backdrop,
                                         onClick = {
                                             isShowNowPlaylistScreen = true
                                         },
@@ -383,12 +395,23 @@ class MainActivity : AppCompatActivity() {
                                         },
                                     )
                                 }
-                                AppBottomNavigationBar(
-                                    navController = navController,
-                                    isTranslucentBackground = isTranslucentBottomBar == DataStoreManager.TRUE,
-                                    backdrop = backdrop,
-                                ) { klass ->
-                                    viewModel.reloadDestination(klass)
+                                if (isLiquidGlassEnabled == DataStoreManager.TRUE) {
+                                    LiquidGlassAppBottomNavigationBar(
+                                        navController = navController,
+                                        backdrop = backdrop,
+                                        viewModel = viewModel,
+                                        shouldShowMiniPlayer = isShowMiniPlayer,
+                                        onOpenNowPlaying = { isShowNowPlaylistScreen = true },
+                                    ) { klass ->
+                                        viewModel.reloadDestination(klass)
+                                    }
+                                } else {
+                                    AppBottomNavigationBar(
+                                        navController = navController,
+                                        isTranslucentBackground = isTranslucentBottomBar == DataStoreManager.TRUE,
+                                    ) { klass ->
+                                        viewModel.reloadDestination(klass)
+                                    }
                                 }
                             }
                         }