fix: improve contrast of markers and routes menu items, and make sele…

…ction visibility based on shape in addition to color for colorblind person
Scottish-Tech-Army · Nov 10, 2024 · 764bd88 · 764bd88
1 parent 66dc7d1
commit 764bd88
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 26 deletions.
diff --git a/...tishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt b/...tishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt
@@ -1,7 +1,8 @@
 package org.scottishtecharmy.soundscape.screens.markers_routes.components
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
@@ -47,23 +48,19 @@ fun MarkersAndRoutesTabs(navController: NavController,
                     Text(item.title, style = MaterialTheme.typography.bodyLarge)
                 },
                 icon = {
-                    Image(
-                        painter = painterResource(
-                            id = if (isSelected) {
-                                item.selectedIconResId!!
-                            } else {
-                                item.unselectedIconResId!!
-                            }
-                        ),
-                        contentDescription = null, // No need of contentDescription as text is below
-                    )
+                    item.iconResId?.let {
+                        Icon(painter = painterResource(it),
+                            contentDescription = null, // No need of contentDescription as text is below,
+                            modifier = Modifier.size(64.dp)
+                        )
+                    }
+
                 },
                 colors = NavigationBarItemDefaults.colors(
                     selectedIconColor = MaterialTheme.colorScheme.onPrimary,
-                    unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
+                    unselectedIconColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.7f),
                     selectedTextColor = MaterialTheme.colorScheme.onPrimary,
-                    unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                    indicatorColor = MaterialTheme.colorScheme.surfaceDim
+                    unselectedTextColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.7f),
                 )
             )
         }

diff --git a/...ottishtecharmy/soundscape/screens/markers_routes/navigation/ScreensForMarkersAndRoutes.kt b/...ottishtecharmy/soundscape/screens/markers_routes/navigation/ScreensForMarkersAndRoutes.kt
@@ -5,19 +5,18 @@ import org.scottishtecharmy.soundscape.R
 sealed class ScreensForMarkersAndRoutes(
     val route: String,
     val title: String,
-    val selectedIconResId: Int? = null,  // Optional with default value
-    val unselectedIconResId: Int? = null // Optional with default value
+    val iconResId: Int? = null,
 ) {
     object Home : ScreensForMarkersAndRoutes("home", "Home")
     object Markers : ScreensForMarkersAndRoutes(
         route = "markers",
         title = "Markers",
-        selectedIconResId = R.drawable.marker_selected,
-        unselectedIconResId = R.drawable.marker_unselected)
+        iconResId = R.drawable.ic_markers,
+        )
     object Routes : ScreensForMarkersAndRoutes(
         route = "routes",
         title = "Routes",
-        selectedIconResId = R.drawable.routes_selected,
-        unselectedIconResId = R.drawable.routes_unselected)
+        iconResId = R.drawable.ic_routes,
+        )
 
 }
diff --git a/...main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersScreen.kt b/...main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersScreen.kt
@@ -1,6 +1,5 @@
 package org.scottishtecharmy.soundscape.screens.markers_routes.screens
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -9,6 +8,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -35,10 +35,11 @@ fun MarkersScreen(navController: NavController) {
         verticalArrangement = Arrangement.Center
     ) {
         Box(modifier = Modifier.padding(top = 40.dp)) {
-            Image(
+            Icon(
                 painter = painterResource(
-                    id = R.drawable.marker_selected
+                    id = R.drawable.ic_markers
                 ),
+                tint = MaterialTheme.colorScheme.onBackground,
                 contentDescription = null,
                 modifier = Modifier.size(60.dp)
             )
@@ -47,6 +48,7 @@ fun MarkersScreen(navController: NavController) {
             Text(
                 stringResource(R.string.markers_no_markers_title),
                 style = MaterialTheme.typography.titleLarge,
+                color = MaterialTheme.colorScheme.onBackground,
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
             )
@@ -55,6 +57,7 @@ fun MarkersScreen(navController: NavController) {
             Text(
                 stringResource(R.string.markers_no_markers_hint_1),
                 style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onBackground,
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
             )
@@ -63,6 +66,7 @@ fun MarkersScreen(navController: NavController) {
             Text(
                 stringResource(R.string.markers_no_markers_hint_2),
                 style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onBackground,
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
             )

diff --git a/.../main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt b/.../main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt
@@ -1,6 +1,5 @@
 package org.scottishtecharmy.soundscape.screens.markers_routes.marker_route_screens
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -45,10 +44,11 @@ fun RoutesScreen(
             modifier = Modifier.semantics(mergeDescendants = true) {}
             ) {
             Box(modifier = Modifier.padding(top = 40.dp)) {
-                Image(
+                Icon(
                     painter = painterResource(
-                        id = R.drawable.routes_selected
+                        id = R.drawable.ic_routes
                     ),
+                    tint = MaterialTheme.colorScheme.onPrimary,
                     contentDescription = null,
                     modifier = Modifier.size(80.dp)
                 )

diff --git a/app/src/main/res/drawable/ic_markers.xml b/app/src/main/res/drawable/ic_markers.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="75dp"
+    android:height="120dp"
+    android:viewportWidth="75"
+    android:viewportHeight="120">
+  <path
+      android:pathData="M74.14,37.11C74.14,16.65 57.55,0.05 37.08,0.05C16.61,0.05 0.02,16.65 0.02,37.11C0.02,64.9 37.08,105.93 37.08,105.93C37.08,105.93 74.14,64.9 74.14,37.11ZM31.05,30.78L37.08,18.58L43.09,30.78L56.56,32.74L46.81,42.23L49.12,55.64L37.08,49.31L25.04,55.64L27.33,42.23L17.59,32.74L31.05,30.78ZM0.02,119.94H74.14V111.23H0.02V119.94Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_routes.xml b/app/src/main/res/drawable/ic_routes.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="105dp"
+    android:viewportWidth="108"
+    android:viewportHeight="105">
+  <path
+      android:pathData="M107.15,15.33C107.15,7.17 100.53,0.56 92.37,0.56C84.22,0.56 77.6,7.17 77.6,15.33C77.6,26.41 92.37,42.77 92.37,42.77C92.37,42.77 107.15,26.41 107.15,15.33ZM89.97,12.81L92.37,7.94L94.77,12.81L100.14,13.59L96.26,17.37L97.18,22.72L92.37,20.2L87.58,22.72L88.49,17.37L84.61,13.59L89.97,12.81ZM76.71,27.13C76.71,16.93 68.45,8.66 58.24,8.66C48.04,8.66 39.77,16.93 39.77,27.13C39.77,40.98 58.24,61.43 58.24,61.43C58.24,61.43 76.71,40.98 76.71,27.13ZM55.24,23.98L58.24,17.9L61.24,23.98L67.95,24.95L63.1,29.68L64.24,36.36L58.24,33.21L52.24,36.36L53.39,29.68L48.53,24.95L55.24,23.98ZM44.92,55.14C44.92,42.9 35,32.98 22.76,32.98C10.52,32.98 0.6,42.9 0.6,55.14C0.6,71.76 22.76,96.3 22.76,96.3C22.76,96.3 44.92,71.76 44.92,55.14ZM19.16,51.36L22.76,44.06L26.36,51.36L34.41,52.53L28.58,58.2L29.96,66.22L22.76,62.44L15.56,66.22L16.94,58.2L11.11,52.53L19.16,51.36ZM95.1,48.76C94.67,45.62 94.67,45.62 94.67,45.62L94.66,45.62L94.64,45.62L94.62,45.62C94.59,45.63 94.57,45.63 94.53,45.64C94.47,45.65 94.38,45.66 94.26,45.68C94.05,45.72 93.73,45.78 93.34,45.87C92.54,46.04 91.4,46.32 89.95,46.76C88.28,47.27 87.34,49.05 87.85,50.72C88.36,52.4 90.13,53.34 91.8,52.83C93.08,52.44 94.05,52.2 94.68,52.06C95,52 95.23,51.95 95.38,51.93C95.45,51.91 95.5,51.9 95.52,51.9L95.54,51.9C95.54,51.9 95.54,51.9 95.55,51.9C97.28,51.65 98.49,50.05 98.24,48.32C98,46.59 96.4,45.38 94.67,45.62L95.1,48.76ZM85.66,51.6C86.39,53.19 85.69,55.07 84.1,55.8C81.87,56.82 79.37,58.09 76.64,59.67C75.13,60.55 73.19,60.04 72.31,58.52C71.43,57.01 71.95,55.07 73.46,54.19C76.37,52.5 79.05,51.13 81.46,50.03C83.05,49.3 84.94,50 85.66,51.6ZM70.32,59.79C71.32,61.23 70.96,63.21 69.53,64.21C67.36,65.71 65.09,67.39 62.74,69.27C61.37,70.37 59.38,70.15 58.28,68.78C57.19,67.41 57.41,65.42 58.77,64.32C61.24,62.35 63.62,60.58 65.91,59C67.35,58 69.32,58.36 70.32,59.79ZM56.48,70.32C57.67,71.62 57.57,73.62 56.27,74.8C54.25,76.62 52.2,78.59 50.11,80.71C48.88,81.95 46.87,81.96 45.63,80.73C44.37,79.5 44.36,77.5 45.6,76.25C47.77,74.05 49.91,72 52.01,70.1C53.3,68.93 55.31,69.02 56.48,70.32ZM44.02,82.45C45.32,83.62 45.43,85.62 44.26,86.93C42.43,88.97 40.58,91.14 38.7,93.43C37.6,94.78 35.61,94.98 34.25,93.88C32.89,92.77 32.69,90.77 33.79,89.41C35.73,87.05 37.64,84.82 39.54,82.7C40.71,81.39 42.71,81.28 44.02,82.45ZM32.79,95.74C34.19,96.79 34.47,98.78 33.41,100.18C32.56,101.31 31.71,102.46 30.86,103.65C29.84,105.07 27.86,105.39 26.44,104.36C25.01,103.34 24.7,101.35 25.72,99.93C26.6,98.72 27.48,97.53 28.35,96.37C29.4,94.97 31.39,94.69 32.79,95.74Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/app/src/main/res/drawable/marker_selected.png b/app/src/main/res/drawable/marker_selected.png
diff --git a/app/src/main/res/drawable/marker_unselected.png b/app/src/main/res/drawable/marker_unselected.png
diff --git a/app/src/main/res/drawable/routes_selected.png b/app/src/main/res/drawable/routes_selected.png
diff --git a/app/src/main/res/drawable/routes_unselected.png b/app/src/main/res/drawable/routes_unselected.png