Make navigation bar transparent, remove ads and enhance UI

Several significant updates:
1) Changed Navigation bar to transparent.
2) Removed the advertising units from mangaworld app.
3) Introduced bottom padding to the manga reader view to account for edge to edge display.
4) Adjusted the vertical grid layout for novel and manga list
5) App window will now extend behind notch/cutout areas in devices.

These changes enhance user experience by providing a more immersive UI with more reading real estate. Navigation bar changes help in maintaining UI consistency across the application. Changes related to ads and cutout areas respond to user feedback about using the app on certain devices.

UIViews/build.gradle.kts

@@ -119,7 +119,7 @@ dependencies {
     //Extension Loader
     api(projects.sharedutils.extensionloader)
 
-    implementation(libs.haze.jetpack.compose)
+    api(libs.haze.jetpack.compose)
 }
 
 protobuf {

UIViews/src/main/java/com/programmersbox/uiviews/AboutLibrariesScreen.kt

@@ -63,8 +63,8 @@ import com.mikepenz.aboutlibraries.util.withContext
 import com.programmersbox.sharedutils.AppLogo
 import com.programmersbox.uiviews.utils.BackButton
 import com.programmersbox.uiviews.utils.InsetSmallTopAppBar
-import com.programmersbox.uiviews.utils.OtakuScaffold
 import com.programmersbox.uiviews.utils.appVersion
+import com.programmersbox.uiviews.utils.components.OtakuScaffold
 import org.koin.compose.koinInject
 
 @Composable

UIViews/src/main/java/com/programmersbox/uiviews/BaseMainActivity.kt

@@ -28,8 +28,8 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ExperimentalMaterialApi
@@ -56,6 +56,7 @@ import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -64,8 +65,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 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.unit.dp
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
@@ -111,13 +114,14 @@ import com.programmersbox.uiviews.settings.NotificationSettings
 import com.programmersbox.uiviews.settings.PlaySettings
 import com.programmersbox.uiviews.settings.SettingScreen
 import com.programmersbox.uiviews.utils.ChromeCustomTabsNavigator
+import com.programmersbox.uiviews.utils.LocalNavHostPadding
 import com.programmersbox.uiviews.utils.NotificationLogo
 import com.programmersbox.uiviews.utils.OtakuMaterialTheme
-import com.programmersbox.uiviews.utils.OtakuScaffold
 import com.programmersbox.uiviews.utils.Screen
 import com.programmersbox.uiviews.utils.SettingsHandling
 import com.programmersbox.uiviews.utils.appVersion
 import com.programmersbox.uiviews.utils.chromeCustomTabs
+import com.programmersbox.uiviews.utils.components.GlassScaffold
 import com.programmersbox.uiviews.utils.currentDetailsUrl
 import com.programmersbox.uiviews.utils.currentService
 import com.programmersbox.uiviews.utils.dispatchIo
@@ -209,7 +213,7 @@ abstract class BaseMainActivity : AppCompatActivity() {
                         showAllItem = showAllItem,
                         currentDestination = currentDestination
                     )
-                    OtakuScaffold(
+                    GlassScaffold(
                         bottomBar = {
                             BottomNav(
                                 navController = navController,
@@ -218,13 +222,18 @@ abstract class BaseMainActivity : AppCompatActivity() {
                                 showAllItem = showAllItem,
                                 currentDestination = currentDestination
                             )
-                        }
+                        },
+                        contentWindowInsets = WindowInsets(0.dp),
+                        blurBottomBar = true
                     ) { innerPadding ->
-                        NavHost(
-                            navController = navController,
-                            startDestination = Screen.RecentScreen.route,
-                            modifier = Modifier.padding(innerPadding)
-                        ) { navGraph(customPreferences, windowSize) }
+                        CompositionLocalProvider(
+                            LocalNavHostPadding provides innerPadding
+                        ) {
+                            NavHost(
+                                navController = navController,
+                                startDestination = Screen.RecentScreen.route,
+                            ) { navGraph(customPreferences, windowSize) }
+                        }
                     }
                 }
             }
@@ -247,7 +256,9 @@ abstract class BaseMainActivity : AppCompatActivity() {
                 enter = slideInVertically { it / 2 } + expandVertically() + fadeIn(),
                 exit = slideOutVertically { it / 2 } + shrinkVertically() + fadeOut(),
             ) {
-                NavigationBar {
+                NavigationBar(
+                    containerColor = Color.Transparent
+                ) {
 
                     @Composable
                     fun ScreenBottomItem(

UIViews/src/main/java/com/programmersbox/uiviews/GenericInfo.kt

@@ -4,10 +4,13 @@ import android.app.PendingIntent
 import android.content.Context
 import android.net.Uri
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
 import androidx.fragment.app.FragmentActivity
 import androidx.navigation.NavController
@@ -75,7 +78,9 @@ interface GenericInfo {
         favorites: List<DbModel>,
         listState: LazyGridState,
         onLongPress: (ItemModel, ComponentState) -> Unit,
-        onClick: (ItemModel) -> Unit
+        modifier: Modifier,
+        paddingValues: PaddingValues,
+        onClick: (ItemModel) -> Unit,
     )
 
     @ExperimentalFoundationApi
@@ -85,8 +90,10 @@ interface GenericInfo {
         favorites: List<DbModel>,
         listState: LazyGridState,
         onLongPress: (ItemModel, ComponentState) -> Unit,
-        onClick: (ItemModel) -> Unit
-    ) = ItemListView(list, favorites, listState, onLongPress, onClick)
+        modifier: Modifier = Modifier,
+        paddingValues: PaddingValues = PaddingValues(0.dp),
+        onClick: (ItemModel) -> Unit,
+    ) = ItemListView(list, favorites, listState, onLongPress, modifier, paddingValues, onClick)
 
     @ExperimentalFoundationApi
     @Composable
@@ -95,8 +102,10 @@ interface GenericInfo {
         favorites: List<DbModel>,
         listState: LazyGridState,
         onLongPress: (ItemModel, ComponentState) -> Unit,
-        onClick: (ItemModel) -> Unit
-    ) = ItemListView(list, favorites, listState, onLongPress, onClick)
+        modifier: Modifier = Modifier,
+        paddingValues: PaddingValues = PaddingValues(0.dp),
+        onClick: (ItemModel) -> Unit,
+    ) = ItemListView(list, favorites, listState, onLongPress, modifier, paddingValues, onClick)
 
     fun debugMenuItem(context: Context): List<@Composable LazyItemScope.() -> Unit> = emptyList()
 

UIViews/src/main/java/com/programmersbox/uiviews/all/AllFragment.kt

@@ -17,7 +17,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.foundation.pager.HorizontalPager
-import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -36,9 +35,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LeadingIconTab
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.TabPosition
-import androidx.compose.material3.TabRow
-import androidx.compose.material3.TabRowDefaults
+import androidx.compose.material3.PrimaryTabRow
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTopAppBarState
@@ -55,14 +52,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
-import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
-import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.lerp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.programmersbox.favoritesdatabase.DbModel
 import com.programmersbox.favoritesdatabase.ItemDao
@@ -79,9 +73,10 @@ import com.programmersbox.uiviews.utils.LocalGenericInfo
 import com.programmersbox.uiviews.utils.LocalItemDao
 import com.programmersbox.uiviews.utils.LocalNavController
 import com.programmersbox.uiviews.utils.OtakuBannerBox
-import com.programmersbox.uiviews.utils.OtakuScaffold
 import com.programmersbox.uiviews.utils.PreviewTheme
 import com.programmersbox.uiviews.utils.components.InfiniteListHandler
+import com.programmersbox.uiviews.utils.components.NormalOtakuScaffold
+import com.programmersbox.uiviews.utils.components.OtakuScaffold
 import com.programmersbox.uiviews.utils.navigateToDetails
 import kotlinx.coroutines.launch
 import org.koin.compose.koinInject
@@ -132,15 +127,9 @@ fun AllView(
                     scrollBehavior = scrollBehaviorTop
                 )
 
-                TabRow(
+                PrimaryTabRow(
                     // Our selected tab is our current page
                     selectedTabIndex = pagerState.currentPage,
-                    // Override the indicator, using the provided pagerTabIndicatorOffset modifier
-                    indicator = { tabPositions ->
-                        TabRowDefaults.SecondaryIndicator(
-                            Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
-                        )
-                    }
                 ) {
                     // Add tabs for all of our pages
                     LeadingIconTab(
@@ -232,14 +221,14 @@ fun AllScreen(
     onReset: (Context?, ApiService) -> Unit,
     itemInfoChange: (ItemModel?) -> Unit,
     state: LazyGridState,
-    showBanner: (Boolean) -> Unit
+    showBanner: (Boolean) -> Unit,
 ) {
     val info = LocalGenericInfo.current
     val source by LocalCurrentSource.current.asFlow().collectAsState(initial = null)
     val navController = LocalNavController.current
     val context = LocalContext.current
     val pullRefreshState = rememberPullRefreshState(isRefreshing, onRefresh = { source?.let { onReset(context, it) } })
-    OtakuScaffold { p ->
+    NormalOtakuScaffold { p ->
         Box(
             modifier = Modifier
                 .padding(p)
@@ -286,15 +275,15 @@ fun SearchScreen(
     onSearchChange: (String) -> Unit,
     isSearching: Boolean,
     favoriteList: List<DbModel>,
-    search: () -> Unit
+    search: () -> Unit,
 ) {
     val info = LocalGenericInfo.current
     val focusManager = LocalFocusManager.current
     val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
     val source by LocalCurrentSource.current.asFlow().collectAsState(initial = null)
     val navController = LocalNavController.current
 
-    OtakuScaffold(
+    NormalOtakuScaffold(
         modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
             OutlinedTextField(
@@ -358,53 +347,6 @@ fun SearchScreen(
     }
 }
 
-// This is because we can't get access to the library one
-@OptIn(ExperimentalFoundationApi::class)
-fun Modifier.pagerTabIndicatorOffset(
-    pagerState: PagerState,
-    tabPositions: List<TabPosition>,
-    pageIndexMapping: (Int) -> Int = { it },
-): Modifier = layout { measurable, constraints ->
-    if (tabPositions.isEmpty()) {
-        // If there are no pages, nothing to show
-        layout(constraints.maxWidth, 0) {}
-    } else {
-        val currentPage = minOf(tabPositions.lastIndex, pageIndexMapping(pagerState.currentPage))
-        val currentTab = tabPositions[currentPage]
-        val previousTab = tabPositions.getOrNull(currentPage - 1)
-        val nextTab = tabPositions.getOrNull(currentPage + 1)
-        val fraction = pagerState.currentPageOffsetFraction
-        val indicatorWidth = if (fraction > 0 && nextTab != null) {
-            lerp(currentTab.width, nextTab.width, fraction).roundToPx()
-        } else if (fraction < 0 && previousTab != null) {
-            lerp(currentTab.width, previousTab.width, -fraction).roundToPx()
-        } else {
-            currentTab.width.roundToPx()
-        }
-        val indicatorOffset = if (fraction > 0 && nextTab != null) {
-            lerp(currentTab.left, nextTab.left, fraction).roundToPx()
-        } else if (fraction < 0 && previousTab != null) {
-            lerp(currentTab.left, previousTab.left, -fraction).roundToPx()
-        } else {
-            currentTab.left.roundToPx()
-        }
-        val placeable = measurable.measure(
-            Constraints(
-                minWidth = indicatorWidth,
-                maxWidth = indicatorWidth,
-                minHeight = 0,
-                maxHeight = constraints.maxHeight
-            )
-        )
-        layout(constraints.maxWidth, maxOf(placeable.height, constraints.minHeight)) {
-            placeable.placeRelative(
-                indicatorOffset,
-                maxOf(constraints.minHeight - placeable.height, 0)
-            )
-        }
-    }
-}
-
 @LightAndDarkPreviews
 @Composable
 private fun AllScreenPreview() {

UIViews/src/main/java/com/programmersbox/uiviews/details/DetailsFragment.kt

@@ -116,8 +116,8 @@ import com.programmersbox.uiviews.utils.LocalItemDao
 import com.programmersbox.uiviews.utils.LocalNavController
 import com.programmersbox.uiviews.utils.LocalSettingsHandling
 import com.programmersbox.uiviews.utils.NotificationLogo
-import com.programmersbox.uiviews.utils.OtakuScaffold
 import com.programmersbox.uiviews.utils.animate
+import com.programmersbox.uiviews.utils.components.OtakuScaffold
 import com.programmersbox.uiviews.utils.components.placeholder.PlaceholderHighlight
 import com.programmersbox.uiviews.utils.components.placeholder.m3placeholder
 import com.programmersbox.uiviews.utils.components.placeholder.shimmer

UIViews/src/main/java/com/programmersbox/uiviews/details/DetailsView.kt

@@ -118,16 +118,17 @@ import com.programmersbox.uiviews.utils.LocalCustomListDao
 import com.programmersbox.uiviews.utils.LocalGenericInfo
 import com.programmersbox.uiviews.utils.LocalItemDao
 import com.programmersbox.uiviews.utils.LocalNavController
+import com.programmersbox.uiviews.utils.LocalNavHostPadding
 import com.programmersbox.uiviews.utils.NotificationLogo
-import com.programmersbox.uiviews.utils.OtakuScaffold
 import com.programmersbox.uiviews.utils.Screen
 import com.programmersbox.uiviews.utils.animate
-import com.programmersbox.uiviews.utils.bounds
+import com.programmersbox.uiviews.utils.components.OtakuScaffold
 import com.programmersbox.uiviews.utils.isScrollingUp
 import com.programmersbox.uiviews.utils.launchCatching
 import com.programmersbox.uiviews.utils.navigateChromeCustomTabs
 import com.programmersbox.uiviews.utils.showErrorToast
 import com.programmersbox.uiviews.utils.toComposeColor
+import com.programmersbox.uiviews.utils.topBounds
 import dev.chrisbanes.haze.haze
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -270,7 +271,8 @@ fun DetailsView(
                     visible = isSaved,
                     enter = fadeIn() + slideInHorizontally { it / 2 },
                     exit = slideOutHorizontally { it / 2 } + fadeOut(),
-                    label = ""
+                    label = "",
+                    modifier = Modifier.padding(bottom = LocalNavHostPadding.current.calculateBottomPadding())
                 ) {
                     val notificationManager = LocalContext.current.notificationManager
                     ExtendedFloatingActionButton(
@@ -306,16 +308,15 @@ fun DetailsView(
                 )
             }
 
-            val state = rememberCollapsingToolbarScaffoldState()
 
             BoxWithConstraints {
                 CollapsingToolbarScaffold(
                     toolbar = { header() },
-                    state = state,
+                    state = rememberCollapsingToolbarScaffoldState(),
                     scrollStrategy = ScrollStrategy.EnterAlwaysCollapsed,
                     modifier = Modifier
                         .haze(
-                            *bounds(p),
+                            topBounds(p),
                             backgroundColor = swatchInfo?.rgb
                                 ?.toComposeColor()
                                 ?.animate()?.value ?: MaterialTheme.colorScheme.surface