Add immersive experience in focus mode of InAppGallery

Author: MHShetty

app/src/main/java/app/grapheneos/camera/ktx/Dp.kt

@@ -4,5 +4,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 
+@Composable
+fun Int.pxToDp() = with(LocalDensity.current) { this@pxToDp.toDp() }
+
 @Composable
 fun Dp.toPx() = with(LocalDensity.current) { this@toPx.toPx() }

app/src/main/java/app/grapheneos/camera/ui/composable/component/mediapreview/MediaPreview.kt

@@ -4,7 +4,10 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsIgnoringVisibility
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.shape.CircleShape
@@ -17,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -25,6 +29,7 @@ import androidx.lifecycle.compose.LifecycleResumeEffect
 import app.grapheneos.camera.CapturedItem
 import app.grapheneos.camera.ITEM_TYPE_VIDEO
 import app.grapheneos.camera.R
+import app.grapheneos.camera.ktx.pxToDp
 
 import coil3.ImageLoader
 
@@ -34,13 +39,16 @@ import coil3.video.VideoFrameDecoder
 
 private const val TAG = "MediaPreview"
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun MediaPreview(
     capturedItem: CapturedItem,
     modifier: Modifier = Modifier
 ) {
     val context = LocalContext.current
 
+    val density = LocalDensity.current
+
     val imageLoader = remember(context, capturedItem) {
         ImageLoader.Builder(context)
             .components {
@@ -76,10 +84,17 @@ fun MediaPreview(
         mediaPreviewErrorType = MediaPreviewErrorType.INFO_MESSAGE
     )
 
+
+    density.density
+
     Box(contentAlignment = Alignment.Center) {
         Image(
             painter = imagePainter,
-            modifier = modifier.fillMaxSize(),
+            modifier = modifier
+                .fillMaxSize()
+                .padding(
+                    bottom = WindowInsets.navigationBarsIgnoringVisibility.getBottom(density).pxToDp()
+                ),
             contentScale = ContentScale.Fit,
             contentDescription = stringResource(R.string.preview)
         )

app/src/main/java/app/grapheneos/camera/ui/composable/screen/ui/GalleryScreen.kt

@@ -1,5 +1,6 @@
 package app.grapheneos.camera.ui.composable.screen.ui
 
+import android.app.Activity
 import android.widget.Toast
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateColorAsState
@@ -37,11 +38,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.WindowInsetsControllerCompat
 
 import androidx.lifecycle.viewmodel.compose.viewModel
 import app.grapheneos.camera.CapturedItem
@@ -74,6 +79,12 @@ fun GalleryScreen(
 ) {
     val context = LocalContext.current
 
+    val window = (context as Activity).window
+
+    val insetsController = WindowCompat.getInsetsController(window, LocalView.current).apply {
+        systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_DEFAULT
+    }
+
     val zoomableState = rememberZoomableState()
 
     val coroutineScope = rememberCoroutineScope()
@@ -125,6 +136,14 @@ fun GalleryScreen(
         }
     }
 
+    LaunchedEffect(viewModel.inFocusMode) {
+        if (viewModel.inFocusMode) {
+            insetsController.hide(WindowInsetsCompat.Type.systemBars())
+        } else {
+            insetsController.show(WindowInsetsCompat.Type.systemBars())
+        }
+    }
+
     // Displays media info dialog when displayedMediaItem is not null
     MediaInfoDialog(
         mediaItemDetails = viewModel.displayedMediaItem,
@@ -224,7 +243,7 @@ fun GalleryScreen(
                                 // material guidelines)
                                 0.dp,
                                 innerPadding.calculateEndPadding(LayoutDirection.Ltr),
-                                innerPadding.calculateBottomPadding(),
+                                0.dp,
                             )
                             .fillMaxSize()
                     ) { page ->

app/src/main/res/values/colors.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="system_accent1_100">#cbe2ff</color>
+    <color name="system_accent1_500">#1b69c5</color>
 
     <color name="system_neutral1_100">#dde2e9</color>
     <color name="system_neutral1_900">#181c1f</color>