fix: status bar icons not visible on view image screen

app/src/main/java/fr/free/nrw/commons/media/ZoomableActivity.kt

@@ -39,6 +39,7 @@ import fr.free.nrw.commons.theme.BaseActivity
 import fr.free.nrw.commons.upload.FileProcessor
 import fr.free.nrw.commons.upload.FileUtilsWrapper
 import fr.free.nrw.commons.utils.CustomSelectorUtils
+import fr.free.nrw.commons.utils.applyEdgeToEdgeTopPaddingInsets
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -137,6 +138,10 @@ class ZoomableActivity : BaseActivity() {
         binding = ActivityZoomableBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
+        binding.topBar.applyEdgeToEdgeTopPaddingInsets(WindowInsetsCompat.Type.statusBars())
+        binding.btnBack.setOnClickListener {
+            onBackPressed()
+        }
         prefs =
             applicationContext.getSharedPreferences(
                 ImageHelper.CUSTOM_SELECTOR_PREFERENCE_KEY,

app/src/main/java/fr/free/nrw/commons/utils/EdgeToEdgeUtils.kt

@@ -3,7 +3,6 @@ package fr.free.nrw.commons.utils
 import android.view.View
 import android.view.ViewGroup.MarginLayoutParams
 import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsAnimationCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.marginBottom
 import androidx.core.view.marginLeft
@@ -14,16 +13,16 @@ import androidx.core.view.updatePadding
 import fr.free.nrw.commons.R
 
 /**
- * Applies edge-to-edge system bar insets to a [View]’s margins using a custom adjustment block.
+ * Applies edge-to-edge insets to a [View]’s margins using a custom adjustment modifier [block].
  *
  * Stores the initial margins to ensure inset calculations are additive, and applies the provided
  * [block] with an [InsetsAccumulator] containing initial and system bar inset values.
  *
- * @param typeMask The type of window insets to apply. Defaults to [WindowInsetsCompat.Type.systemBars].
+ * @param typeMask The type of window insets to apply. Default to [WindowInsetsCompat.Type.systemBars].
  * @param shouldConsumeInsets If `true`, the insets are consumed and not propagated to child views.
  * @param block Lambda applied to update [MarginLayoutParams] using the accumulated insets.
  */
-fun View.applyEdgeToEdgeInsets(
+fun View.applyEdgeToEdgeInsetsAsMargin(
     typeMask: Int = WindowInsetsCompat.Type.systemBars(),
     shouldConsumeInsets: Boolean = true,
     block: MarginLayoutParams.(InsetsAccumulator) -> Unit
@@ -79,44 +78,103 @@ fun View.applyEdgeToEdgeInsets(
 }
 
 /**
- * Applies edge-to-edge system bar insets to the top padding of the view.
+ * Applies edge-to-edge insets to a [View]’s padding using a custom adjustment modifier [block].
+ *
+ * Stores the initial paddings to ensure inset calculations are additive, and applies the provided
+ * [block] with an [InsetsAccumulator] containing initial and system bar inset values.
  *
  * @param typeMask The type of window insets to apply. Defaults to [WindowInsetsCompat.Type.systemBars].
+ * @param shouldConsumeInsets If `true`, the insets are consumed and not propagated to child views.
+ * @param block Lambda applied to update [View]'s padding using the values from [InsetsAccumulator].
  */
-fun View.applyEdgeToEdgeTopPaddingInsets(
+fun View.applyEdgeToEdgeInsetsAsPadding(
     typeMask: Int = WindowInsetsCompat.Type.systemBars(),
+    shouldConsumeInsets: Boolean = true,
+    block: View.(InsetsAccumulator) -> Unit
 ) {
     ViewCompat.setOnApplyWindowInsetsListener(this) { view, windowInsets ->
         val insets = windowInsets.getInsets(typeMask)
 
-        view.updatePadding(
-            left = insets.left,
-            right = insets.right,
-            top = insets.top
+        val initialTop = if (view.getTag(R.id.initial_padding_top) != null) {
+            view.getTag(R.id.initial_padding_top) as Int
+        } else {
+            view.setTag(R.id.initial_padding_top, view.paddingTop)
+            view.paddingTop
+        }
+
+        val initialBottom = if (view.getTag(R.id.initial_padding_bottom) != null) {
+            view.getTag(R.id.initial_padding_bottom) as Int
+        } else {
+            view.setTag(R.id.initial_padding_bottom, view.paddingBottom)
+            view.paddingBottom
+        }
+
+        val initialLeft = if (view.getTag(R.id.initial_padding_left) != null) {
+            view.getTag(R.id.initial_padding_left) as Int
+        } else {
+            view.setTag(R.id.initial_padding_left, view.paddingLeft)
+            view.paddingLeft
+        }
+
+        val initialRight = if (view.getTag(R.id.initial_padding_right) != null) {
+            view.getTag(R.id.initial_padding_right) as Int
+        } else {
+            view.setTag(R.id.initial_padding_right, view.paddingRight)
+            view.paddingRight
+        }
+
+        val accumulator = InsetsAccumulator(
+            initialTop,
+            insets.top,
+            initialBottom,
+            insets.bottom,
+            initialLeft,
+            insets.left,
+            initialRight,
+            insets.right
         )
 
-        WindowInsetsCompat.CONSUMED
+        block(accumulator)
+
+        if(shouldConsumeInsets) WindowInsetsCompat.CONSUMED else windowInsets
+    }
+}
+
+/**
+ * Applies edge-to-edge system bar insets to the top padding of the view.
+ *
+ * @param typeMask The type of window insets to apply. Defaults to [WindowInsetsCompat.Type.systemBars].
+ * @param shouldConsumeInsets If `true`, the insets are consumed and not propagated to child views.
+ */
+fun View.applyEdgeToEdgeTopPaddingInsets(
+    typeMask: Int = WindowInsetsCompat.Type.systemBars(),
+    shouldConsumeInsets: Boolean = true
+) {
+    applyEdgeToEdgeInsetsAsPadding(typeMask, shouldConsumeInsets) { insets ->
+        updatePadding(
+            left = insets.left,
+            top = insets.top,
+            right = insets.right
+        )
     }
 }
 
 /**
  * Applies edge-to-edge system bar insets to the bottom padding of the view.
  *
  * @param typeMask The type of window insets to apply. Defaults to [WindowInsetsCompat.Type.systemBars].
+ * @param shouldConsumeInsets If `true`, the insets are consumed and not propagated to child views.
  */
 fun View.applyEdgeToEdgeBottomPaddingInsets(
     typeMask: Int = WindowInsetsCompat.Type.systemBars(),
+    shouldConsumeInsets: Boolean = true
 ) {
-    ViewCompat.setOnApplyWindowInsetsListener(this) { view, windowInsets ->
-        val insets = windowInsets.getInsets(typeMask)
-
-        view.updatePadding(
+    applyEdgeToEdgeInsetsAsPadding(typeMask, shouldConsumeInsets) { insets ->
+        updatePadding(
             left = insets.left,
             right = insets.right,
             bottom = insets.bottom
         )
-
-        WindowInsetsCompat.CONSUMED
     }
 }
 
@@ -129,7 +187,7 @@ fun View.applyEdgeToEdgeBottomPaddingInsets(
 fun applyEdgeToEdgeAllInsets(
     view: View,
     shouldConsumeInsets: Boolean = true
-) = view.applyEdgeToEdgeInsets(shouldConsumeInsets = shouldConsumeInsets) { insets ->
+) = view.applyEdgeToEdgeInsetsAsMargin(shouldConsumeInsets = shouldConsumeInsets) { insets ->
     leftMargin = insets.left
     rightMargin = insets.right
     topMargin = insets.top
@@ -141,7 +199,7 @@ fun applyEdgeToEdgeAllInsets(
  *
  * @param view The target view.
  */
-fun applyEdgeToEdgeTopInsets(view: View) = view.applyEdgeToEdgeInsets { insets ->
+fun applyEdgeToEdgeTopInsets(view: View) = view.applyEdgeToEdgeInsetsAsMargin { insets ->
     leftMargin = insets.left
     rightMargin = insets.right
     topMargin = insets.top
@@ -152,7 +210,7 @@ fun applyEdgeToEdgeTopInsets(view: View) = view.applyEdgeToEdgeInsets { insets -
  *
  * @param view The target view.
  */
-fun applyEdgeToEdgeBottomInsets(view: View) = view.applyEdgeToEdgeInsets { insets ->
+fun applyEdgeToEdgeBottomInsets(view: View) = view.applyEdgeToEdgeInsetsAsMargin { insets ->
     leftMargin = insets.left
     rightMargin = insets.right
     bottomMargin = insets.bottom

app/src/main/res/drawable-night/ic_arrow_back.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:autoMirrored="true" android:height="24dp" android:tint="#ffffff" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+  <path android:fillColor="@android:color/white" android:pathData="M313,520L537,744L480,800L160,480L480,160L537,216L313,440L800,440L800,520L313,520Z"/>
+</vector>

app/src/main/res/drawable/ic_arrow_back.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:autoMirrored="true" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+  <path android:fillColor="@android:color/white" android:pathData="M313,520L537,744L480,800L160,480L480,160L537,216L313,440L800,440L800,520L313,520Z"/>
+</vector>

app/src/main/res/layout/activity_zoomable.xml

@@ -12,6 +12,7 @@
         android:layout_height="match_parent"
         android:layout_width="match_parent"
         app:actualImageScaleType="fitCenter"
+        android:background="@color/background"
         />
     <ProgressBar
         android:layout_width="@dimen/dimen_72"
@@ -22,22 +23,37 @@
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         />
-
-    <TextView
-      android:id="@+id/selection_count"
-      android:layout_width="@dimen/dimen_20"
-      android:layout_height="@dimen/dimen_20"
-      app:layout_constraintDimensionRatio="H,1:1"
-      android:textSize="@dimen/subtitle_text"
-      android:textStyle="bold"
-      android:textColor="@color/black"
-      android:layout_margin="@dimen/dimen_6"
-      android:gravity="center|center_vertical"
-      style="@style/TextAppearance.AppCompat.Small"
-      android:text="12"
-      android:visibility="gone"
-      android:background="@drawable/circle_shape"
+    <LinearLayout
+      android:id="@+id/topBar"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:background="@color/scrim"
+      android:gravity="center_vertical"
+      android:orientation="horizontal"
+      android:paddingHorizontal="12dp"
+      android:paddingVertical="8dp"
+      app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent"/>
+      app:layout_constraintTop_toTopOf="parent">
+
+        <ImageView
+          android:id="@+id/btnBack"
+          android:layout_width="24dp"
+          android:layout_height="24dp"
+          android:contentDescription="@string/back"
+          android:src="@drawable/ic_arrow_back" />
+
+        <TextView
+          android:id="@+id/selection_count"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:textSize="@dimen/normal_text"
+          android:textStyle="bold"
+          android:textColor="@color/onBackground"
+          android:layout_marginStart="12dp"
+          style="@style/TextAppearance.AppCompat.Small"
+          android:text="12"
+          android:visibility="gone" />
+    </LinearLayout>
 
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -2,4 +2,7 @@
 <resources>
   <color name="primaryColor">#1e8cab</color>
   <color name="primaryDarkColor">#1e8cab</color>
+  <color name="background">#000000</color>
+  <color name="onBackground">#ffffff</color>
+  <color name="scrim">#50000000</color>
 </resources>

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

@@ -23,6 +23,9 @@
     <color name="secondaryLightColor">#ffbc46</color>
     <color name="primaryTextColor">#ffffff</color>
     <color name="secondaryTextColor">#000000</color>
+    <color name="background">#ffffff</color>
+    <color name="onBackground">#000000</color>
+    <color name="scrim">#f2ffffff</color>
 
     <color name="deleteRed">#D32F2F</color>
     <color name="deleteRedDark">#90960a0a</color>

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

@@ -4,4 +4,8 @@
   <item name="initial_margin_bottom" type="id" />
   <item name="initial_margin_left" type="id" />
   <item name="initial_margin_right" type="id" />
+  <item name="initial_padding_top" type="id" />
+  <item name="initial_padding_bottom" type="id" />
+  <item name="initial_padding_left" type="id" />
+  <item name="initial_padding_right" type="id" />
 </resources>