Make navigationBar fully transparent + ui improvements (#37)

app/src/main/java/emu/skyline/EmulationActivity.kt

@@ -33,6 +33,7 @@ import android.util.TypedValue
 import android.view.*
 import android.widget.Toast
 import android.widget.PopupMenu
+import android.widget.TextView
 import androidx.activity.OnBackPressedCallback
 import androidx.appcompat.app.AlertDialog
 import androidx.appcompat.app.AppCompatActivity
@@ -41,6 +42,9 @@ import androidx.core.view.isGone
 import androidx.core.view.isInvisible
 import androidx.core.view.updateMargins
 import androidx.core.view.updatePadding
+import androidx.core.graphics.Insets
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.fragment.app.FragmentTransaction
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
@@ -310,7 +314,7 @@ class EmulationActivity : AppCompatActivity(), SurfaceHolder.Callback, View.OnTo
         powerManager = getSystemService(Context.POWER_SERVICE) as PowerManager
 
         requestedOrientation = emulationSettings.orientation
-        window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
+        window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
         inputHandler = InputHandler(inputManager, emulationSettings)
         setContentView(binding.root)
 
@@ -447,6 +451,7 @@ class EmulationActivity : AppCompatActivity(), SurfaceHolder.Callback, View.OnTo
                // No op
             }
         })
+        binding.inGameMenu.getHeaderView(0).findViewById<TextView>(R.id.game_title).text = item.title
         binding.inGameMenu.setNavigationItemSelectedListener {
             when (it.itemId) {
                 R.id.menu_emulation_resume -> {
@@ -495,10 +500,28 @@ class EmulationActivity : AppCompatActivity(), SurfaceHolder.Callback, View.OnTo
                 else -> true
             }
         }
-
+        setInsets()
         executeApplication(intent!!)
     }
 
+    private fun setInsets() {
+        ViewCompat.setOnApplyWindowInsetsListener(
+            binding.inGameMenu
+        ) { v: View, windowInsets: WindowInsetsCompat ->
+            val cutInsets: Insets = windowInsets.getInsets(WindowInsetsCompat.Type.displayCutout())
+            var left = 0
+            var right = 0
+            if (ViewCompat.getLayoutDirection(v) == ViewCompat.LAYOUT_DIRECTION_LTR) {
+                left = cutInsets.left
+            } else {
+                right = cutInsets.right
+            }
+
+            v.setPadding(left, cutInsets.top, right, 0)
+            windowInsets
+        }
+    }
+
     @SuppressWarnings("WeakerAccess")
     fun pauseEmulator() {
         if (isEmulatorPaused) return

app/src/main/java/emu/skyline/MainActivity.kt

@@ -12,13 +12,16 @@ import android.os.Bundle
 import android.provider.DocumentsContract
 import android.view.View
 import android.view.inputmethod.InputMethodManager
+import android.view.ViewGroup.MarginLayoutParams
 import androidx.activity.OnBackPressedCallback
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.core.content.res.use
+import androidx.core.view.ViewCompat
 import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.isInvisible
 import androidx.core.view.isVisible
 import androidx.documentfile.provider.DocumentFile
@@ -27,6 +30,7 @@ import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.google.android.material.snackbar.Snackbar
 import com.google.android.material.R as MaterialR
+import com.google.android.material.color.MaterialColors
 import dagger.hilt.android.AndroidEntryPoint
 import emu.skyline.adapter.*
 import emu.skyline.data.AppItem
@@ -41,6 +45,7 @@ import emu.skyline.settings.SettingsActivity
 import emu.skyline.utils.GpuDriverHelper
 import emu.skyline.utils.SearchLocationHelper
 import emu.skyline.utils.WindowInsetsHelper
+import emu.skyline.SkylineApplication
 import javax.inject.Inject
 import kotlin.math.ceil
 
@@ -147,6 +152,29 @@ class MainActivity : AppCompatActivity() {
         window.decorView.findViewById<View>(android.R.id.content).viewTreeObserver.addOnTouchModeChangeListener { isInTouchMode ->
             refreshIconVisible = !isInTouchMode
         }
+
+        binding.statusBarShade.setBackgroundColor(
+            SkylineApplication.applyAlphaToColor(
+                MaterialColors.getColor(
+                    binding.root,
+                    MaterialR.attr.colorSurface
+                ),
+                0.9f
+            )
+        )
+
+        if (SkylineApplication.detectNavigationType(this) != SkylineApplication.NAV_TYPE_GESTURE) {
+            binding.navigationBarShade.setBackgroundColor(
+                SkylineApplication.applyAlphaToColor(
+                    MaterialColors.getColor(
+                        binding.root,
+                        MaterialR.attr.colorSurface
+                    ),
+                    0.9f
+                )
+            )
+        }
+        setInsets()
     }
 
     private fun setAppListDecoration() {
@@ -331,4 +359,20 @@ class MainActivity : AppCompatActivity() {
 
         viewModel.checkRomHash(SearchLocationHelper.getSearchLocations(this), EmulationSettings.global.systemLanguage)
     }
+
+    private fun setInsets() =
+        ViewCompat.setOnApplyWindowInsetsListener(
+            binding.root
+        ) { _: View, windowInsets: WindowInsetsCompat ->
+            val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
+            val mlpStatusShade = binding.statusBarShade.layoutParams as MarginLayoutParams
+            mlpStatusShade.height = insets.top
+            binding.statusBarShade.layoutParams = mlpStatusShade
+
+            val mlpNavShade = binding.navigationBarShade.layoutParams as MarginLayoutParams
+            mlpNavShade.height = insets.bottom
+            binding.navigationBarShade.layoutParams = mlpNavShade
+
+            windowInsets
+        }
 }

app/src/main/java/emu/skyline/SkylineApplication.kt

@@ -7,11 +7,14 @@ package emu.skyline
 
 import android.app.Application
 import android.content.Context
+import android.graphics.Color
+import androidx.annotation.ColorInt
 import com.google.android.material.color.DynamicColors
 import com.google.android.material.color.DynamicColorsOptions
 import dagger.hilt.android.HiltAndroidApp
 import emu.skyline.di.getSettings
 import java.io.File
+import kotlin.math.roundToInt
 
 /**
  * @return The optimal directory for putting public files inside, this may return a private directory if a public directory cannot be retrieved
@@ -30,6 +33,55 @@ class SkylineApplication : Application() {
 
         val context : Context get() = instance.applicationContext
 
+
+        const val NAV_TYPE_THREE_BUTTON = 0
+        const val NAV_TYPE_TWO_BUTTON = 1
+        const val NAV_TYPE_GESTURE = 2
+
+        /**
+         * Adjusts the opacity of a color by applying an alpha factor.
+         *
+         * @param color The original color (including alpha).
+         * @param alphaFactor A value between 0.0 (fully transparent) and 1.0 (no change in opacity).
+         * @return A new color with the adjusted opacity.
+        */
+        @ColorInt
+        fun applyAlphaToColor(@ColorInt color: Int, alphaFactor: Float): Int {
+            val newAlpha = (Color.alpha(color) * alphaFactor).coerceIn(0f, 255f).roundToInt()
+            return Color.argb(
+                newAlpha,
+                Color.red(color),
+                Color.green(color),
+                Color.blue(color)
+            )
+        }
+
+        /**
+         * Determines the system navigation type.
+         *
+         * @param context The context used to access resources.
+         * @return An integer representing the navigation type:
+         * - 0: Three-button navigation
+         * - 1: Two-button navigation
+         * - 2: Gesture navigation
+        */
+        fun detectNavigationType(context: Context): Int {
+            val navBarModeResource = context.resources.getIdentifier(
+                "config_navBarInteractionMode",
+                "integer",
+                "android"
+            )
+            return if (navBarModeResource != 0) {
+                try {
+                    context.resources.getInteger(navBarModeResource)
+                } catch (e: Exception) {
+                    NAV_TYPE_THREE_BUTTON // Fallback to default
+                }
+            } else {
+                NAV_TYPE_THREE_BUTTON // Fallback to default
+            }
+        }
+
         fun setTheme(newValue: Boolean) {
             val dynamicColorsOptions = DynamicColorsOptions.Builder().setPrecondition { _, _ -> newValue }.build()
             DynamicColors.applyToActivitiesIfAvailable(instance, dynamicColorsOptions)

app/src/main/java/emu/skyline/settings/SettingsActivity.kt

@@ -8,14 +8,18 @@ package emu.skyline.settings
 import android.annotation.SuppressLint
 import android.os.Bundle
 import android.text.TextUtils
+import android.view.View
 import android.view.KeyEvent
 import android.view.Menu
 import android.view.ViewTreeObserver
+import android.view.ViewGroup.MarginLayoutParams
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.widget.SearchView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.WindowCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.preference.EditTextPreference
 import androidx.preference.ListPreference
 import androidx.preference.Preference
@@ -24,6 +28,8 @@ import androidx.preference.PreferenceFragmentCompat
 import androidx.preference.forEach
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.internal.ToolbarUtils
+import com.google.android.material.R as MaterialR
+import com.google.android.material.color.MaterialColors
 import emu.skyline.BuildConfig
 import emu.skyline.R
 import emu.skyline.data.AppItemTag
@@ -33,6 +39,7 @@ import emu.skyline.preference.dialog.EditTextPreferenceMaterialDialogFragmentCom
 import emu.skyline.preference.dialog.IntegerListPreferenceMaterialDialogFragmentCompat
 import emu.skyline.preference.dialog.ListPreferenceMaterialDialogFragmentCompat
 import emu.skyline.utils.WindowInsetsHelper
+import emu.skyline.SkylineApplication
 
 private const val PREFERENCE_DIALOG_FRAGMENT_TAG = "androidx.preference.PreferenceFragment.DIALOG"
 
@@ -123,6 +130,29 @@ class SettingsActivity : AppCompatActivity(), PreferenceFragmentCompat.OnPrefere
                 .replace(R.id.settings, preferenceFragment)
                 .commit()
         }
+
+        binding.statusBarShade.setBackgroundColor(
+            SkylineApplication.applyAlphaToColor(
+                MaterialColors.getColor(
+                    binding.root,
+                    MaterialR.attr.colorSurface
+                ),
+                0.9f
+            )
+        )
+
+        if (SkylineApplication.detectNavigationType(this) != SkylineApplication.NAV_TYPE_GESTURE) {
+            binding.navigationBarShade.setBackgroundColor(
+                SkylineApplication.applyAlphaToColor(
+                    MaterialColors.getColor(
+                        binding.root,
+                        MaterialR.attr.colorSurface
+                    ),
+                    0.9f
+                )
+            )
+        }
+        setInsets()
     }
 
     override fun onCreateOptionsMenu(menu : Menu?) : Boolean {
@@ -131,13 +161,13 @@ class SettingsActivity : AppCompatActivity(), PreferenceFragmentCompat.OnPrefere
         val searchView = menuItem.actionView as SearchView
         searchView.queryHint = getString(R.string.search)
 
-        searchView.setOnQueryTextFocusChangeListener { _, focus ->
+        /* searchView.setOnQueryTextFocusChangeListener { _, focus ->
             (binding.titlebar.toolbar.layoutParams as AppBarLayout.LayoutParams).scrollFlags =
                 if (focus)
                     AppBarLayout.LayoutParams.SCROLL_FLAG_NO_SCROLL
                 else
                     AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
-        }
+        }*/
 
         searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
             override fun onQueryTextSubmit(query : String) : Boolean {
@@ -233,4 +263,20 @@ class SettingsActivity : AppCompatActivity(), PreferenceFragmentCompat.OnPrefere
             else -> return false
         }
     }
+
+    private fun setInsets() =
+        ViewCompat.setOnApplyWindowInsetsListener(
+            binding.root
+        ) { _: View, windowInsets: WindowInsetsCompat ->
+            val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
+            val statusShade = binding.statusBarShade.layoutParams as MarginLayoutParams
+            statusShade.height = insets.top
+            binding.statusBarShade.layoutParams = statusShade
+
+            val navShade = binding.navigationBarShade.layoutParams as MarginLayoutParams
+            navShade.height = insets.bottom
+            binding.navigationBarShade.layoutParams = navShade
+
+            windowInsets
+        }
 }

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

@@ -5,7 +5,6 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/drawer_layout"
-    android:background="@android:color/black"
     android:keepScreenOn="true"
     tools:context=".EmulationActivity"
     tools:openDrawer="start"
@@ -94,6 +93,7 @@
         android:layout_height="match_parent"
         android:layout_gravity="start"
         android:focusedByDefault="true"
+        app:headerLayout="@layout/game_menu_header"
         app:menu="@menu/menu_in_game"
         tools:visibility="gone" />
 

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

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.textview.MaterialTextView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/game_title"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="24dp"
+    android:layout_marginStart="24dp"
+    android:layout_marginEnd="24dp"
+    android:textAppearance="?attr/textAppearanceHeadlineMedium"
+    android:textColor="?attr/colorOnSurface"
+    android:textAlignment="viewStart"
+    tools:text="Game Title" />

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

@@ -6,6 +6,15 @@
     android:layout_height="match_parent"
     android:fitsSystemWindows="true"
     tools:context=".MainActivity">
+
+    <View
+        android:id="@+id/status_bar_shade"
+        android:layout_width="match_parent"
+        android:layout_height="1dp"
+        android:background="@android:color/transparent"
+        android:clickable="false"
+        android:focusable="false"
+        android:layout_gravity="top" />
 
     <com.google.android.material.appbar.AppBarLayout
         android:id="@+id/app_bar_layout"
@@ -142,4 +151,12 @@
             android:overScrollMode="ifContentScrolls"
             android:paddingBottom="20dp" />
     </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
+    <View
+        android:id="@+id/navigation_bar_shade"
+        android:layout_width="match_parent"
+        android:layout_height="1dp"
+        android:background="@android:color/transparent"
+        android:clickable="false"
+        android:focusable="false"
+        android:layout_gravity="bottom" />
 </androidx.coordinatorlayout.widget.CoordinatorLayout>