style: use a material you themed top and bottom bar for wallpaper view

you-apps · Feb 13, 2024 · ad1f448 · ad1f448
1 parent 475ba32
commit ad1f448
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 29 deletions.
diff --git a/app/src/main/java/com/bnyro/wallpaper/ui/components/WallpaperView.kt b/app/src/main/java/com/bnyro/wallpaper/ui/components/WallpaperView.kt
@@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
@@ -23,7 +25,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
-import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
@@ -119,18 +121,12 @@ fun WallpaperView(
             Column(
                 Modifier
                     .fillMaxWidth()
-                    .background(
-                        Brush.verticalGradient(
-                            colors = listOf(Color.Black, Color.Transparent)
-                        )
-                    )
                     .align(Alignment.TopCenter)
             ) {
                 AnimatedVisibility(
                     visible = showUi
                 ) {
                     WallpaperViewTopBar(
-                        modifier = Modifier.padding(top = 30.dp),
                         onClickBack = onClickBack,
                         onClickInfo = {
                             showInfoSheet = true
@@ -142,18 +138,18 @@ fun WallpaperView(
             Column(
                 Modifier
                     .fillMaxWidth()
-                    .background(
-                        Brush.verticalGradient(
-                            colors = listOf(Color.Transparent, Color.Black)
-                        )
-                    )
-                    .align(Alignment.BottomCenter)
+                    .align(Alignment.BottomCenter),
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 AnimatedVisibility(
                     visible = showUi
                 ) {
                     BottomBar(
-                        modifier = Modifier.padding(top = 30.dp),
+                        modifier = Modifier
+                            .padding(bottom = 30.dp)
+                            .clip(RoundedCornerShape(16.dp))
+                            .background(MaterialTheme.colorScheme.primaryContainer),
+                        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                         onClickEdit = {
                             showEditView = true
                         },

diff --git a/app/src/main/java/com/bnyro/wallpaper/ui/components/bottombar/BottomBar.kt b/app/src/main/java/com/bnyro/wallpaper/ui/components/bottombar/BottomBar.kt
@@ -1,27 +1,24 @@
 package com.bnyro.wallpaper.ui.components.bottombar
 
-import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 
 @Composable
 fun BottomBar(
     modifier: Modifier = Modifier,
+    contentColor: Color,
     onClickEdit: () -> Unit,
     onClickFavourite: () -> Unit,
     onClickDownload: () -> Unit,
     onClickWallpaper: () -> Unit,
     isFavourite: Boolean
 ) {
     Row(
-        modifier = modifier
-            .fillMaxWidth()
-            .horizontalScroll(rememberScrollState()),
+        modifier = modifier,
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceEvenly
     ) {
@@ -30,7 +27,8 @@ fun BottomBar(
             onClickDownload = onClickDownload,
             onClickWallpaper = onClickWallpaper,
             onClickFavourite = onClickFavourite,
-            isFavourite = isFavourite
+            isFavourite = isFavourite,
+            color = contentColor
         )
     }
 

diff --git a/app/src/main/java/com/bnyro/wallpaper/ui/components/bottombar/TopBar.kt b/app/src/main/java/com/bnyro/wallpaper/ui/components/bottombar/TopBar.kt
@@ -8,10 +8,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import com.bnyro.wallpaper.R
@@ -35,12 +33,6 @@ fun WallpaperViewTopBar(
             }
         },
         title = { Text(title, maxLines = 1, overflow = TextOverflow.Ellipsis) },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
-            titleContentColor = Color.White,
-            actionIconContentColor = Color.White,
-            navigationIconContentColor = Color.White
-        ),
         actions = {
             IconButton(onClick = onClickInfo) {
                 Icon(