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)
+}