From 1cf8b94be32c09f5c3a1cdb59f3f43f5333db086 Mon Sep 17 00:00:00 2001 From: DEMEY Fanny Date: Fri, 1 Nov 2024 17:03:32 +0000 Subject: [PATCH] fix: Improve discoverability with talkback of the add button in route screen --- .../soundscape/screens/home/HomeScreen.kt | 10 -- .../markers_routes/components/CustomAppBar.kt | 34 ------- .../components/MarkersAndRoutesAppBar.kt | 11 +-- .../MarkersAndRoutesBottomNavBar.kt | 4 +- .../navigation/MarkersAndRoutesNavGraph.kt | 6 +- .../screens/MarkersAndRoutesScreen.kt | 32 ++++--- .../markers_routes/screens/RoutesScreen.kt | 96 ++++++++++++------- 7 files changed, 87 insertions(+), 106 deletions(-) diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/home/HomeScreen.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/home/HomeScreen.kt index 70342dad..1e255860 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/home/HomeScreen.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/home/HomeScreen.kt @@ -15,8 +15,6 @@ import org.scottishtecharmy.soundscape.screens.home.home.Home import org.scottishtecharmy.soundscape.screens.home.locationDetails.LocationDescription import org.scottishtecharmy.soundscape.screens.home.locationDetails.LocationDetailsScreen import org.scottishtecharmy.soundscape.screens.home.settings.Settings -import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.MarkersAndRoutesNavGraph -import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.ScreensForMarkersAndRoutes import org.scottishtecharmy.soundscape.screens.markers_routes.screens.MarkersAndRoutesScreen import org.scottishtecharmy.soundscape.screens.markers_routes.screens.addroute.AddRouteScreen import org.scottishtecharmy.soundscape.viewmodels.HomeViewModel @@ -119,14 +117,6 @@ fun HomeScreen( val selectedTab = backStackEntry.arguments?.getString("tab") MarkersAndRoutesScreen(mainNavController = navController, selectedTab = selectedTab) } - - // Nested graph: Routes and Markers - composable(ScreensForMarkersAndRoutes.Markers.route) { - MarkersAndRoutesNavGraph( - navController = navController, - startDestination = "Markers", - ) - } } // AddRouteScreen, accessible within the MarkersAndRoutesScreen diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/CustomAppBar.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/CustomAppBar.kt index ff93884d..f7c6a317 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/CustomAppBar.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/CustomAppBar.kt @@ -1,10 +1,5 @@ package org.scottishtecharmy.soundscape.screens.markers_routes.components -import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.expandHorizontally -import androidx.compose.animation.fadeIn -import androidx.compose.animation.fadeOut -import androidx.compose.animation.shrinkHorizontally import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.IntrinsicSize @@ -13,10 +8,6 @@ import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Add -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text @@ -36,8 +27,6 @@ import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme @Composable fun CustomAppBar(title : String, onNavigateUp: () -> Unit, - onAddClicked: (() -> Unit)? = null, - showAddIcon: Boolean = false, navigationButtonTitle: String = stringResource(R.string.ui_back_button_title), ) { Surface( @@ -67,25 +56,6 @@ fun CustomAppBar(title : String, modifier = Modifier.semantics { heading() } ) } - - - AnimatedVisibility( - visible = showAddIcon, - enter = fadeIn() + expandHorizontally(), - exit = fadeOut() + shrinkHorizontally(), - modifier = Modifier.fillMaxHeight() - ) { - IconButton( - onClick = { - onAddClicked?.invoke() - } - ){ - Icon( - Icons.Default.Add, - contentDescription = stringResource(R.string.general_alert_add), - ) - } - } } } } @@ -98,9 +68,7 @@ fun CustomAppBarPreview() { CustomAppBar( "Test app bar with long title", navigationButtonTitle = "Back", - showAddIcon = false, onNavigateUp = {}, - onAddClicked = {} ) } } @@ -113,9 +81,7 @@ fun CustomAppBarWithActionButtonPreview() { CustomAppBar( "Test app bar", navigationButtonTitle = "Back", - showAddIcon = true, onNavigateUp = {}, - onAddClicked = {} ) } } \ No newline at end of file diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesAppBar.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesAppBar.kt index 81d380bf..3732d7a9 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesAppBar.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesAppBar.kt @@ -7,19 +7,15 @@ import androidx.compose.ui.tooling.preview.Preview import org.scottishtecharmy.soundscape.R import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme -@OptIn(ExperimentalMaterial3Api::class) @Composable -fun MarkersAndRoutesAppBar(showAddIcon: Boolean, - onNavigateUp: () -> Unit, - onNavigateToDestination: () -> Unit +fun MarkersAndRoutesAppBar( + onNavigateUp: () -> Unit, ) { CustomAppBar( title = stringResource(R.string.search_view_markers), navigationButtonTitle = stringResource(R.string.ui_back_button_title), onNavigateUp = onNavigateUp, - showAddIcon = showAddIcon, - onAddClicked = onNavigateToDestination, ) } @@ -28,10 +24,7 @@ fun MarkersAndRoutesAppBar(showAddIcon: Boolean, fun MarkersAndRoutesAppBarPreview() { SoundscapeTheme { MarkersAndRoutesAppBar( - showAddIcon = true, onNavigateUp = {}, - onNavigateToDestination = {} - ) } } \ No newline at end of file diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt index 2dd55caf..4284506e 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt @@ -23,7 +23,7 @@ val items = listOf( ) @Composable -fun BottomNavigationBar(navController: NavController, +fun MarkersAndRoutesTabs(navController: NavController, ) { val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route @@ -75,7 +75,7 @@ fun BottomNavigationBar(navController: NavController, fun BottomNavigationBarPreview() { val navController = rememberNavController() MaterialTheme { - BottomNavigationBar(navController = navController, + MarkersAndRoutesTabs(navController = navController, ) } } \ No newline at end of file diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/navigation/MarkersAndRoutesNavGraph.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/navigation/MarkersAndRoutesNavGraph.kt index 939d404a..be641748 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/navigation/MarkersAndRoutesNavGraph.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/navigation/MarkersAndRoutesNavGraph.kt @@ -12,6 +12,7 @@ import org.scottishtecharmy.soundscape.screens.markers_routes.screens.addroute.A @Composable fun MarkersAndRoutesNavGraph( navController: NavHostController, + onNavigateToAddRoute: () -> Unit, startDestination: String) { NavHost( navController = navController, @@ -21,7 +22,10 @@ fun MarkersAndRoutesNavGraph( MarkersScreen(navController = navController) } composable(ScreensForMarkersAndRoutes.Routes.route) { - RoutesScreen(navController = navController) + RoutesScreen( + navController = navController, + onNavigateToAddRoute = onNavigateToAddRoute + ) } // AddRouteScreen, accessible within the MarkersAndRoutesScreen diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersAndRoutesScreen.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersAndRoutesScreen.kt index 6b52b917..d4c87638 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersAndRoutesScreen.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersAndRoutesScreen.kt @@ -1,6 +1,7 @@ package org.scottishtecharmy.soundscape.screens.markers_routes.screens import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable @@ -10,14 +11,17 @@ import androidx.navigation.NavController import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController import org.scottishtecharmy.soundscape.screens.home.HomeRoutes -import org.scottishtecharmy.soundscape.screens.markers_routes.components.BottomNavigationBar +import org.scottishtecharmy.soundscape.screens.markers_routes.components.MarkersAndRoutesTabs import org.scottishtecharmy.soundscape.screens.markers_routes.components.MarkersAndRoutesAppBar import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.MarkersAndRoutesNavGraph import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.ScreensForMarkersAndRoutes import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme @Composable -fun MarkersAndRoutesScreen(mainNavController: NavController, selectedTab: String?) { +fun MarkersAndRoutesScreen( + mainNavController: NavController, + selectedTab: String? +) { // Nested navController for the tab navigation inside MarkersAndRoutes val nestedNavController = rememberNavController() @@ -27,24 +31,22 @@ fun MarkersAndRoutesScreen(mainNavController: NavController, selectedTab: String Scaffold( topBar = { - MarkersAndRoutesAppBar( - showAddIcon = showAddIcon, - onNavigateUp = { - mainNavController.navigateUp() - }, - onNavigateToDestination = { - mainNavController.navigate(HomeRoutes.AddRoute.route) - }, - ) - }, - bottomBar = { - BottomNavigationBar(navController = nestedNavController) - } + Column { + MarkersAndRoutesAppBar( + onNavigateUp = { + mainNavController.navigateUp() + }, + ) + MarkersAndRoutesTabs(navController = nestedNavController) + }}, ) { innerPadding -> Box(modifier = Modifier.padding(innerPadding)) { // MarkersAndRoutesNavGraph is now responsible for handling navigation MarkersAndRoutesNavGraph( navController = nestedNavController, + onNavigateToAddRoute = { + mainNavController.navigate(HomeRoutes.AddRoute.route) + }, startDestination = selectedTab ?: ScreensForMarkersAndRoutes.Markers.route ) } diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt index f2eab8ab..bb29f493 100644 --- a/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt +++ b/app/src/main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt @@ -1,7 +1,6 @@ package org.scottishtecharmy.soundscape.screens.markers_routes.marker_route_screens import androidx.compose.foundation.Image -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -9,6 +8,10 @@ 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.material.icons.Icons +import androidx.compose.material.icons.rounded.AddCircleOutline +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 @@ -16,7 +19,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.semantics.semantics import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -27,45 +30,65 @@ import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme @Composable -fun RoutesScreen(navController: NavController) { +fun RoutesScreen( + navController: NavController, + onNavigateToAddRoute: () -> Unit, +) { Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center ) { - Box(modifier = Modifier.padding(top = 40.dp)) { - Image( - painter = painterResource( - id = R.drawable.routes_selected - ), - contentDescription = null, - modifier = Modifier.size(80.dp) - ) - } - Box(modifier = Modifier.padding(top = 10.dp)) { - Text( - stringResource(R.string.routes_no_routes_title), - style = MaterialTheme.typography.titleLarge, - textAlign = TextAlign.Center, - fontWeight = FontWeight.Bold, - ) + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.semantics(mergeDescendants = true) {} + ) { + Box(modifier = Modifier.padding(top = 40.dp)) { + Image( + painter = painterResource( + id = R.drawable.routes_selected + ), + contentDescription = null, + modifier = Modifier.size(80.dp) + ) + } + Box(modifier = Modifier.padding(top = 10.dp)) { + Text( + stringResource(R.string.routes_no_routes_title), + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onBackground, + textAlign = TextAlign.Center, + ) + } + Box(modifier = Modifier.padding(top = 10.dp)) { + Text( + stringResource(R.string.routes_no_routes_hint_1), + color = MaterialTheme.colorScheme.onBackground, + style = MaterialTheme.typography.bodyMedium, + textAlign = TextAlign.Center, + ) + } + Box(modifier = Modifier.padding(top = 10.dp, bottom = 40.dp)) { + Text( + stringResource(R.string.routes_no_routes_hint_2), + color = MaterialTheme.colorScheme.onBackground, + style = MaterialTheme.typography.bodyMedium, + textAlign = TextAlign.Center, + ) + } } - Box(modifier = Modifier.padding(top = 10.dp)) { - Text( - stringResource(R.string.routes_no_routes_hint_1), - style = MaterialTheme.typography.bodyMedium, - textAlign = TextAlign.Center, - fontWeight = FontWeight.Bold, - ) - } - Box(modifier = Modifier.padding(top = 10.dp, bottom = 40.dp)) { - Text( - stringResource(R.string.routes_no_routes_hint_2), - style = MaterialTheme.typography.bodyMedium, - textAlign = TextAlign.Center, - fontWeight = FontWeight.Bold, + IconButton( + onClick = { + onNavigateToAddRoute.invoke() + }, + modifier = Modifier.size(90.dp) + ){ + Icon( + Icons.Rounded.AddCircleOutline, + tint = MaterialTheme.colorScheme.onBackground, + contentDescription = stringResource(R.string.general_alert_add), + modifier = Modifier.size(80.dp) ) } } @@ -75,6 +98,9 @@ fun RoutesScreen(navController: NavController) { @Composable fun RoutesScreenPreview() { SoundscapeTheme { - RoutesScreen(navController = rememberNavController()) + RoutesScreen( + navController = rememberNavController(), + onNavigateToAddRoute = {} + ) } } \ No newline at end of file