show onboarding guides the first time the user installs the application

app/src/main/java/org/cis_india/wsreader/helpers/Preferencesutils.kt

@@ -39,6 +39,11 @@ class PreferenceUtil(context: Context) {
 
         // Temporary preference keys
         const val LIBRARY_ONBOARDING_BOOL = "show_library_onboarding"
+        const val HOME_ONBOARDING_BOOL = "show_home_onboarding"
+        const val NAV_ONBOARDING_BOOL = "show_nav_onboarding"
+
+        const val FIRST_ONBOARDING_BOOL = "first_onboarding"
+
         const val LIBRARY_SWIPE_TOOLTIP_BOOL = "show_library_tooltip"
     }
 

app/src/main/java/org/cis_india/wsreader/ui/navigation/BottomBarScreen.kt

@@ -21,29 +21,39 @@ import org.cis_india.wsreader.R
 sealed class BottomBarScreen(
     val route: String,
     val title: Int,
-    val icon: Int
+    val icon: Int,
+    val tap_target_coodinator_title: Int,
+    val tap_target_coodinator_description: Int,
 ) {
     data object Home : BottomBarScreen(
         route = "home",
         title = R.string.navigation_home,
-        icon = R.drawable.ic_nav_home
+        icon = R.drawable.ic_nav_home,
+        tap_target_coodinator_title = R.string.home_tap_target_coodinator_title,
+        tap_target_coodinator_description =  R.string.home_tap_target_coodinator_description
     )
 
     data object Categories : BottomBarScreen(
         route = "categories",
         title = R.string.navigation_categories,
-        icon = R.drawable.ic_nav_categories
+        icon = R.drawable.ic_nav_categories,
+        tap_target_coodinator_title = R.string.category_tap_target_coodinator_title,
+        tap_target_coodinator_description =  R.string.category_tap_target_coodinator_description
     )
 
     data object Library : BottomBarScreen(
         route = "library",
         title = R.string.navigation_library,
-        icon = R.drawable.ic_nav_library
+        icon = R.drawable.ic_nav_library,
+        tap_target_coodinator_title = R.string.library_tap_target_coodinator_title,
+        tap_target_coodinator_description =  R.string.library_tap_target_coodinator_description
     )
 
     data object Settings : BottomBarScreen(
         route = "settings",
         title = R.string.navigation_settings,
-        icon = R.drawable.ic_nav_settings
+        icon = R.drawable.ic_nav_settings,
+        tap_target_coodinator_title = R.string.settings_tap_target_coodinator_title,
+        tap_target_coodinator_description =  R.string.settings_tap_target_coodinator_description
     )
 }

app/src/main/java/org/cis_india/wsreader/ui/navigation/NavGraph.kt

@@ -34,6 +34,7 @@ import org.cis_india.wsreader.ui.screens.library.composables.LibraryScreen
 import org.cis_india.wsreader.ui.screens.settings.composables.AboutScreen
 import org.cis_india.wsreader.ui.screens.settings.composables.OSLScreen
 import org.cis_india.wsreader.ui.screens.settings.composables.SettingsScreen
+import org.cis_india.wsreader.ui.screens.settings.viewmodels.SettingsViewModel
 import org.cis_india.wsreader.ui.screens.welcome.composables.WelcomeScreen
 
 
@@ -42,6 +43,7 @@ fun NavGraph(
     startDestination: String,
     navController: NavHostController,
     networkStatus: NetworkObserver.Status,
+    settingsViewModel: SettingsViewModel
 ) {
     NavHost(
         navController = navController,
@@ -72,7 +74,7 @@ fun NavGraph(
                 } else bottomNavPopEnter()
             },
             popExitTransition = { bottomNavPopExit() }) {
-            HomeScreen(navController, networkStatus)
+            HomeScreen(navController, networkStatus, settingsViewModel)
         }
 
         /** Book Detail Screen */

app/src/main/java/org/cis_india/wsreader/ui/screens/home/composables/HomeScreen.kt

@@ -74,6 +74,7 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -82,6 +83,10 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
+import com.psoffritti.taptargetcompose.TapTargetCoordinator
+import com.psoffritti.taptargetcompose.TapTargetScope
+import com.psoffritti.taptargetcompose.TapTargetStyle
+import com.psoffritti.taptargetcompose.TextDefinition
 import org.cis_india.wsreader.R
 import org.cis_india.wsreader.helpers.NetworkObserver
 import org.cis_india.wsreader.helpers.book.BookLanguage
@@ -102,11 +107,12 @@ import org.cis_india.wsreader.ui.screens.main.bottomNavPadding
 import org.cis_india.wsreader.ui.theme.pacificoFont
 import org.cis_india.wsreader.ui.theme.poppinsFont
 import kotlinx.coroutines.delay
+import org.cis_india.wsreader.ui.screens.settings.viewmodels.SettingsViewModel
 import java.util.Locale
 
 
 @Composable
-fun HomeScreen(navController: NavController, networkStatus: NetworkObserver.Status) {
+fun HomeScreen(navController: NavController, networkStatus: NetworkObserver.Status, settingsViewModel: SettingsViewModel = hiltViewModel()) {
 
     val viewModel: HomeViewModel = hiltViewModel()
 
@@ -142,6 +148,18 @@ fun HomeScreen(navController: NavController, networkStatus: NetworkObserver.Stat
         }
     }
 
+    val showHomeTapTargets = remember { mutableStateOf(false) }
+
+
+    LaunchedEffect(settingsViewModel.showHomeOnboardingTapTargets.value) {
+        delay(500) // Delay to prevent flickering
+        if(settingsViewModel.showHomeOnboardingTapTargets.value) {
+            showHomeTapTargets.value = true
+        }else{
+            showHomeTapTargets.value = false
+        }
+    }
+
     val showLanguageSheet = remember { mutableStateOf(false) }
     BookLanguageSheet(
         showBookLanguage = showLanguageSheet,
@@ -156,21 +174,27 @@ fun HomeScreen(navController: NavController, networkStatus: NetworkObserver.Stat
         onSortOptionChange = { viewModel.onAction(UserAction.SortOptionClicked(it)) }
     )
 
-    HomeScreenScaffold(
-        viewModel = viewModel,
-        networkStatus = networkStatus,
-        navController = navController,
-        sysBackButtonState = sysBackButtonState,
-        showLanguageSheet = showLanguageSheet,
-        showSortSheet = showSortSheet
-    )
+    TapTargetCoordinator(
+        showTapTargets = showHomeTapTargets.value,
+        onComplete = { settingsViewModel.homeOnboardingComplete() }
+    ) {
+
+        HomeScreenScaffold(
+            viewModel = viewModel,
+            networkStatus = networkStatus,
+            navController = navController,
+            sysBackButtonState = sysBackButtonState,
+            showLanguageSheet = showLanguageSheet,
+            showSortSheet = showSortSheet
+        )
+    }
 
 
 }
 
 
 @Composable
-private fun HomeScreenScaffold(
+private fun TapTargetScope.HomeScreenScaffold(
     viewModel: HomeViewModel,
     networkStatus: NetworkObserver.Status,
     navController: NavController,
@@ -429,53 +453,121 @@ private fun SearchBookList(searchBarState: SearchBarState, navController: NavCon
 }
 
 @Composable
-private fun HomeTopAppBar(
+private fun TapTargetScope.HomeTopAppBar(
     bookLanguage: BookLanguage,
     onSearchIconClicked: () -> Unit,
     onLanguageIconClicked: () -> Unit,
     onSortIconClicked: () -> Unit
 ) {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .windowInsetsPadding(WindowInsets.statusBars),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.SpaceBetween
-    ) {
-        Text(
-            text = if (bookLanguage == BookLanguage.AllBooks)
-                stringResource(id = R.string.home_header) else Locale(bookLanguage.isoCode).getDisplayLanguage(Locale.getDefault()),
-            fontSize = 28.sp,
-            color = MaterialTheme.colorScheme.onBackground,
-            fontFamily = pacificoFont
-        )
-        Spacer(modifier = Modifier.weight(1f))
-        IconButton(onClick = onLanguageIconClicked) {
-            Icon(
-                imageVector = Icons.Filled.Translate,
-                contentDescription = stringResource(id = R.string.home_language_icon_desc),
-                tint = MaterialTheme.colorScheme.onBackground,
-                modifier = Modifier.size(30.dp)
-            )
-        }
-        IconButton(onClick = onSortIconClicked) {
-            Icon(
-                imageVector = Icons.Filled.Sort,
-                contentDescription = stringResource(id = R.string.home_sort_icon_desc),
-                tint = MaterialTheme.colorScheme.onBackground,
-                modifier = Modifier.size(30.dp)
-            )
-        }
-        IconButton(onClick = onSearchIconClicked) {
-            Icon(
-                imageVector = ImageVector.vectorResource(id = R.drawable.ic_search),
-                contentDescription = stringResource(id = R.string.home_search_icon_desc),
-                tint = MaterialTheme.colorScheme.onBackground,
-                modifier = Modifier.size(30.dp)
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .windowInsetsPadding(WindowInsets.statusBars),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = if (bookLanguage == BookLanguage.AllBooks)
+                    stringResource(id = R.string.home_header) else Locale(bookLanguage.isoCode).getDisplayLanguage(Locale.getDefault()),
+                fontSize = 28.sp,
+                color = MaterialTheme.colorScheme.onBackground,
+                fontFamily = pacificoFont
             )
+            Spacer(modifier = Modifier.weight(1f))
+            IconButton(
+                onClick = onLanguageIconClicked,
+                modifier = Modifier.tapTarget(
+                        precedence = 0,
+                title = TextDefinition(
+                    text = stringResource(R.string.language_guide_title),
+                    textStyle = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colorScheme.onSecondaryContainer
+                ),
+                description = TextDefinition(
+                    text = stringResource(R.string.language_guide_description),
+                    textStyle = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSecondaryContainer
+                ),
+                tapTargetStyle = TapTargetStyle(
+                    backgroundColor = MaterialTheme.colorScheme.secondaryContainer,
+                    tapTargetHighlightColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                    backgroundAlpha = 1f,
+                ),
+            ),
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Translate,
+                    contentDescription = stringResource(id = R.string.home_language_icon_desc),
+                    tint = MaterialTheme.colorScheme.onBackground,
+                    modifier = Modifier.size(30.dp)
+                )
+            }
+
+
+            IconButton(
+                onClick = onSortIconClicked,
+                modifier = Modifier.tapTarget(
+                    precedence = 1,
+                    title = TextDefinition(
+                        text = stringResource(R.string.sorting_guide_title),
+                        textStyle = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.onSecondaryContainer
+                    ),
+                    description = TextDefinition(
+                        text = stringResource(R.string.sorting_guide_description),
+                        textStyle = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSecondaryContainer
+                    ),
+                    tapTargetStyle = TapTargetStyle(
+                        backgroundColor = MaterialTheme.colorScheme.secondaryContainer,
+                        tapTargetHighlightColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                        backgroundAlpha = 1f,
+                    ),
+                ),
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Sort,
+                    contentDescription = stringResource(id = R.string.home_sort_icon_desc),
+                    tint = MaterialTheme.colorScheme.onBackground,
+                    modifier = Modifier.size(30.dp)
+                )
+            }
+
+
+            IconButton(
+                onClick = onSearchIconClicked,
+                modifier = Modifier.tapTarget(
+                    precedence = 2,
+                    title = TextDefinition(
+                        text = stringResource(R.string.search_guide_title),
+                        textStyle = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.onSecondaryContainer
+                    ),
+                    description = TextDefinition(
+                        text = stringResource(R.string.search_guide_description),
+                        textStyle = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSecondaryContainer
+                    ),
+                    tapTargetStyle = TapTargetStyle(
+                        backgroundColor = MaterialTheme.colorScheme.secondaryContainer,
+                        tapTargetHighlightColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                        backgroundAlpha = 1f,
+                    ),
+                ),
+            ) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_search),
+                    contentDescription = stringResource(id = R.string.home_search_icon_desc),
+                    tint = MaterialTheme.colorScheme.onBackground,
+                    modifier = Modifier.size(30.dp)
+                )
+            }
         }
     }
-}
 
 
 @Composable
@@ -552,5 +644,7 @@ private fun SearchAppBar(
 @Composable
 @Preview(showBackground = true)
 fun HomeScreenPreview() {
-    HomeScreen(navController = rememberNavController(), NetworkObserver.Status.Unavailable)
+    TapTargetCoordinator(showTapTargets = true, onComplete = {}) {
+        HomeScreen(navController = rememberNavController(), NetworkObserver.Status.Unavailable)
+    }
 }