Fix Material Design System 3

oudaykhaled · Dec 17, 2023 · 41dcb0c · 41dcb0c
1 parent e49f2ad
commit 41dcb0c
Show file tree

Hide file tree

Showing 15 changed files with 524 additions and 124 deletions.
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/MainActivity.kt b/app/src/main/java/com/ouday/cryptowalletsample/MainActivity.kt
@@ -11,15 +11,15 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
 import com.ouday.cryptowalletsample.home.ui.view.MainScreen
-import com.ouday.cryptowalletsample.ui.theme.CryptoWalletSampleTheme
+import com.ouday.cryptowalletsample.ui.theme.AppTheme
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            CryptoWalletSampleTheme {
+            AppTheme {
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background

diff --git a/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -33,12 +34,10 @@ import com.ouday.cryptowalletsample.bills.ui.viewmodel.BillViewModel
 import com.ouday.cryptowalletsample.common.FlowState
 import com.ouday.cryptowalletsample.common.HandleFlowState
 import com.ouday.cryptowalletsample.home.components.BillOptionItem
-import com.ouday.cryptowalletsample.ui.theme.Colors
 import com.ouday.cryptowalletsample.ui.theme.MaterialCornerRadius
 import com.ouday.cryptowalletsample.ui.theme.Size
 import com.ouday.cryptowalletsample.ui.theme.Space
 import com.ouday.cryptowalletsample.ui.theme.Typography
-import com.ouday.cryptowalletsample.ui.theme.success
 
 @Composable
 fun BillsScreen(modifier: Modifier = Modifier, viewModel: BillViewModel = hiltViewModel()) {
@@ -88,7 +87,7 @@ fun BillDetails(history: History, modifier: Modifier = Modifier) {
             .fillMaxWidth()
             .padding(horizontal = Space.spaceSmall, vertical = Space.spaceSmall)
             .clip(RoundedCornerShape(MaterialCornerRadius.radiusMedium))
-            .background(Colors.primaryVariant)
+            .background(MaterialTheme.colorScheme.surfaceVariant)
             .padding(Space.spaceMedium),
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -103,7 +102,7 @@ fun BillDetails(history: History, modifier: Modifier = Modifier) {
                 style = Typography.body1,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
-                color = Colors.onSurface 
+                color = MaterialTheme.colorScheme.onSurface 
             )
             Text(
                 text = stringResource(
@@ -113,20 +112,20 @@ fun BillDetails(history: History, modifier: Modifier = Modifier) {
                 style = Typography.body1,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
-                color = Colors.onSurface 
+                color = MaterialTheme.colorScheme.onSurface 
             )
         }
         Box(
             modifier = Modifier
                 .width(Size.size3XLarge)
                 .size(Space.spaceLarge)
                 .clip(CircleShape)
-                .background(if (history.paid) Colors.success else Colors.error),
+                .background(if (history.paid) MaterialTheme.colorScheme.secondary else MaterialTheme.colorScheme.error),
             contentAlignment = Alignment.Center
         ) {
             Text(
                 text = if (history.paid) stringResource(R.string.paid) else stringResource(R.string.not_paid),
-                color = Colors.onSurface,
+                color = MaterialTheme.colorScheme.onSurface,
                 style = Typography.caption,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis

diff --git a/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt b/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt
@@ -20,6 +20,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Error
 import androidx.compose.material3.Button
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -31,7 +32,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import com.ouday.cryptowalletsample.ui.theme.Colors
 
 @Composable
 fun <T> HandleFlowState(
@@ -117,14 +117,14 @@ fun ErrorContent(errorMessage: String, onRetry: () -> Unit) {
         verticalArrangement = Arrangement.Center
     ) {
         // Error icon or image (optional)
-        Icon(Icons.Filled.Error, contentDescription = "Error", tint = Colors.error)
+        Icon(Icons.Filled.Error, contentDescription = "Error", tint = MaterialTheme.colorScheme.error)
 
         Spacer(modifier = Modifier.height(16.dp))
 
         // Error message text
         Text(
             text = errorMessage,
-            color = Colors.error,
+            color = MaterialTheme.colorScheme.error,
             style = typography.body1,
             textAlign = TextAlign.Center
         )

diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt
@@ -1,27 +1,41 @@
 package com.ouday.cryptowalletsample.home.components
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+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.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.res.stringResource
-import com.ouday.cryptowalletsample.R
-import com.ouday.cryptowalletsample.bills.data.model.Bill
-import com.ouday.cryptowalletsample.ui.theme.*
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import coil.compose.rememberAsyncImagePainter
 import coil.decode.SvgDecoder
 import coil.imageLoader
 import coil.request.ImageRequest
+import com.ouday.cryptowalletsample.R
+import com.ouday.cryptowalletsample.bills.data.model.Bill
+import com.ouday.cryptowalletsample.bills.data.model.History
 import com.ouday.cryptowalletsample.common.getImageUrl
+import com.ouday.cryptowalletsample.ui.theme.Size
+import com.ouday.cryptowalletsample.ui.theme.Space
+import com.ouday.cryptowalletsample.ui.theme.Typography
 
 @Composable
 fun BillOptionItem(
@@ -44,14 +58,14 @@ fun BillOptionItem(
 
     Column(
         modifier = Modifier
-            .width(Size.size2XMax)
-            .height(Size.sizeMax)
+            .width(Size.size2XLarge)
+            .height(Size.size3XLarge)
     ) {
         Box(
             modifier = Modifier
                 .clip(RoundedCornerShape(Size.sizeSmall))
                 .fillMaxWidth()
-                .background(Colors.primary.copy(alpha = if (isSelected) 0.8f else 0.2f))
+                .background(MaterialTheme.colorScheme.primary.copy(alpha = if (isSelected) 0.8f else 0.2f))
                 .wrapContentHeight()
         ) {
             IconButton(onClick = { onBillClicked(bill) }) {
@@ -60,9 +74,9 @@ fun BillOptionItem(
                         painter = painter,
                         contentDescription = stringResource(id = R.string.bill_option_description, bill.billName),
                         modifier = Modifier
-                            .size(Size.sizeLarge)
+                            .size(Size.size2XLarge)
                             .padding(Space.space2XSmall),
-                        tint = if (isSelected) Colors.background else Colors.onSurface
+                        tint = if (isSelected) MaterialTheme.colorScheme.background else MaterialTheme.colorScheme.onBackground
                     )
                 }
             }
@@ -73,7 +87,38 @@ fun BillOptionItem(
                 .fillMaxWidth()
                 .fillMaxHeight(),
             textAlign = TextAlign.Center,
-            style = Typography.caption.copy(fontSize = Typography.caption.fontSize)
+            style = Typography.overline,
+            maxLines = 1
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBillOptionItem() {
+    // Sample Bill data for the preview
+    val sampleBill = Bill(
+        id = 1,
+        billName = "Sample Bill",
+        icon = "https://example.com/sample_icon.svg",
+        history = listOf(
+            History(date = "2023-12-17", amount = 100.0, paid = true)
+        )
+    )
+
+    // Preview of BillOptionItem in both selected and unselected states
+    Column {
+        BillOptionItem(
+            bill = sampleBill,
+            isSelected = true,
+            onBillClicked = {}
+        )
+        Spacer(modifier = Modifier.height(Space.spaceMedium))
+        BillOptionItem(
+            bill = sampleBill,
+            isSelected = false,
+            onBillClicked = {}
         )
     }
 }
+
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt
@@ -3,13 +3,15 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.Person
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.Wallet
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
@@ -21,22 +23,33 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import com.ouday.cryptowalletsample.ui.theme.Colors
+import com.ouday.cryptowalletsample.R
+import com.ouday.cryptowalletsample.ui.theme.*
 
 @Composable
 fun BottomNavigationBar(
     items: List<BottomNavItem>,
-    currentRoute: String,
     onItemSelected: (BottomNavItem) -> Unit
 ) {
-    Box(modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 24.dp, top = 8.dp)) {
+    Box(
+        modifier = Modifier
+            .padding(
+            start = Space.spaceLarge,
+            end = Space.spaceLarge,
+            bottom = Space.spaceXLarge,
+            top = Space.spaceSmall
+        )
+    ) {
         NavigationBar(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(50.dp)
-                .background(Colors.surface, RoundedCornerShape(30.dp)),
+                .height(Space.space2XLarge)
+                .background(
+                    MaterialTheme.colorScheme.primary.copy(alpha = 0.2f),
+                    RoundedCornerShape(MaterialCornerRadius.radiusMedium)
+                ),
             containerColor = Color.Transparent
         ) {
             var selectedItem by remember { mutableStateOf<BottomNavItem>(BottomNavItem.Home) }
@@ -46,7 +59,7 @@ fun BottomNavigationBar(
                     icon = {
                         Icon(
                             imageVector = item.icon,
-                            contentDescription = item.label
+                            contentDescription = stringResource(id = item.labelRes)
                         )
                     },
 
@@ -56,11 +69,11 @@ fun BottomNavigationBar(
                         onItemSelected(item)
                     },
                     colors = NavigationBarItemDefaults.colors(
-                        indicatorColor = Color(0xFFFF0000),
-                        unselectedIconColor = Color(0xFF10720D),
-                        unselectedTextColor = Color(0xFF1870DD),
-                        selectedIconColor = Color(0xFF14DA7C),
-                        selectedTextColor = Color(0xFFD6DD18),
+                        indicatorColor = MaterialTheme.colorScheme.primary,
+                        unselectedIconColor = MaterialTheme.colorScheme.onSurface,
+                        unselectedTextColor = MaterialTheme.colorScheme.onSurface,
+                        selectedIconColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                        selectedTextColor = MaterialTheme.colorScheme.secondary,
                     ),
                     alwaysShowLabel = true
                 )
@@ -71,17 +84,26 @@ fun BottomNavigationBar(
 
 @Preview(showBackground = true)
 @Composable
-fun BottomNavigationBarPreview() {
+fun PreviewBottomNavigationBar() {
+    // Sample items for the bottom navigation bar
+    val items = listOf(
+        BottomNavItem.Home,
+        BottomNavItem.Search,
+        BottomNavItem.Wallet,
+        BottomNavItem.Profile
+    )
+
     BottomNavigationBar(
-        listOf(BottomNavItem.Home),
-        "home",
-        {}
+        items = items
     )
+    // This can be dynamic based on the current route in your actual app
+    { /* Handle item selection */ }
 }
 
-sealed class BottomNavItem(val route: String, val icon: ImageVector, val label: String) {
-    object Home : BottomNavItem("home", Icons.Filled.Home, "Home")
-    object Search : BottomNavItem("Search", Icons.Filled.Search, "Search")
-    object Wallet : BottomNavItem("Wallet", Icons.Filled.Wallet, "Wallet")
-    object Profile : BottomNavItem("Profile", Icons.Filled.Person, "Profile")
-}
+
+sealed class BottomNavItem(val route: String, val icon: ImageVector, val labelRes: Int) {
+    object Home : BottomNavItem("home", Icons.Filled.Home, R.string.nav_home)
+    object Search : BottomNavItem("search", Icons.Filled.Search, R.string.nav_search)
+    object Wallet : BottomNavItem("wallet", Icons.Filled.Wallet, R.string.nav_wallet)
+    object Profile : BottomNavItem("profile", Icons.Filled.Person, R.string.nav_profile)
+}