Fix layout issues on tablets

Habitica/res/layout-w600dp/activity_main.xml

@@ -1,16 +1,12 @@
 <!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
-<androidx.drawerlayout.widget.DrawerLayout
+<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context="com.habitrpg.android.habitica.ui.activities.MainActivity"
-    android:background="?attr/colorContentBackground">
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
+    android:background="?attr/colorContentBackground"
         android:animateLayoutChanges="true">
         <androidx.fragment.app.FragmentContainerView
             android:id="@+id/navigation_drawer"
@@ -24,5 +20,4 @@
             android:layout_height="match_parent"
             android:background="?attr/colorWindowBackground"/>
         <include layout="@layout/activity_main_content" android:id="@+id/content" />
-    </LinearLayout>
-</androidx.drawerlayout.widget.DrawerLayout>
+</LinearLayout>

Habitica/res/layout/activity_main_content.xml

@@ -143,4 +143,4 @@
             android:layout_alignParentStart="true"
             android:layout_alignParentEnd="true" />
     </RelativeLayout>
-</androidx.coordinatorlayout.widget.CoordinatorLayout>
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/ArmoireActivity.kt

@@ -197,10 +197,10 @@ class ArmoireActivity : BaseActivity() {
     }
 
     private fun giveUserArmoire(): Boolean {
-        if (hasUsedExtraAmoire) {
+        if (hasUsedExtraArmoire) {
             return false
         }
-        hasUsedExtraAmoire = true
+        hasUsedExtraArmoire = true
         binding.iconWrapper.post {
             binding.iconView.bitmap = null
             Animations.circularHide(binding.iconWrapper)

Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/MainActivity.kt

@@ -13,6 +13,7 @@ import android.view.KeyEvent
 import android.view.MenuItem
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewParent
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.annotation.RequiresApi
@@ -235,63 +236,64 @@ open class MainActivity : BaseActivity(), SnackbarActivity {
                 userQuestStatus = it
             }
         }
+        val drawerLayout = findViewById<ViewGroup>(R.id.drawer_layout)
+        if (drawerLayout is DrawerLayout) {
+            drawerFragment =
+                supportFragmentManager.findFragmentById(R.id.navigation_drawer) as? NavigationDrawerFragment
+            drawerFragment?.setUp(R.id.navigation_drawer, drawerLayout, notificationsViewModel)
 
-        val drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)
-        drawerFragment =
-            supportFragmentManager.findFragmentById(R.id.navigation_drawer) as? NavigationDrawerFragment
-        drawerFragment?.setUp(R.id.navigation_drawer, drawerLayout, notificationsViewModel)
+            drawerToggle =
+                object : ActionBarDrawerToggle(
+                    this,
+                    drawerLayout,
+                    R.string.navigation_drawer_open,
+                    R.string.navigation_drawer_close,
+                ) {}
+            // Set the drawer toggle as the DrawerListener
+            drawerToggle?.let { drawerLayout.addDrawerListener(it) }
+            drawerLayout.addDrawerListener(
+                object : DrawerLayout.DrawerListener {
+                    private var isOpeningDrawer: Boolean? = null
 
-        drawerToggle =
-            object : ActionBarDrawerToggle(
-                this,
-                drawerLayout,
-                R.string.navigation_drawer_open,
-                R.string.navigation_drawer_close,
-            ) {}
-        // Set the drawer toggle as the DrawerListener
-        drawerToggle?.let { drawerLayout.addDrawerListener(it) }
-        drawerLayout.addDrawerListener(
-            object : DrawerLayout.DrawerListener {
-                private var isOpeningDrawer: Boolean? = null
-
-                override fun onDrawerSlide(
-                    drawerView: View,
-                    slideOffset: Float,
-                ) {
-                    if (!isUsingNightModeResources()) {
-                        if (slideOffset < 0.5f && isOpeningDrawer == null) {
-                            window.updateStatusBarColor(getThemeColor(R.attr.colorPrimaryDark), false)
-                            isOpeningDrawer = true
-                        } else if (slideOffset > 0.5f && isOpeningDrawer == null) {
-                            window.updateStatusBarColor(
-                                getThemeColor(R.attr.headerBackgroundColor),
-                                true,
-                            )
-                            isOpeningDrawer = false
+                    override fun onDrawerSlide(
+                        drawerView: View,
+                        slideOffset: Float,
+                    ) {
+                        if (!isUsingNightModeResources()) {
+                            if (slideOffset < 0.5f && isOpeningDrawer == null) {
+                                window.updateStatusBarColor(getThemeColor(R.attr.colorPrimaryDark), false)
+                                isOpeningDrawer = true
+                            } else if (slideOffset > 0.5f && isOpeningDrawer == null) {
+                                window.updateStatusBarColor(
+                                    getThemeColor(R.attr.headerBackgroundColor),
+                                    true,
+                                )
+                                isOpeningDrawer = false
+                            }
                         }
                     }
-                }
 
-                override fun onDrawerOpened(drawerView: View) {
-                    hideKeyboard()
-                    if (!isUsingNightModeResources()) {
-                        window.updateStatusBarColor(getThemeColor(R.attr.colorPrimaryDark), false)
+                    override fun onDrawerOpened(drawerView: View) {
+                        hideKeyboard()
+                        if (!isUsingNightModeResources()) {
+                            window.updateStatusBarColor(getThemeColor(R.attr.colorPrimaryDark), false)
+                        }
+                        isOpeningDrawer = null
+                        drawerFragment?.updatePromo()
                     }
-                    isOpeningDrawer = null
-                    drawerFragment?.updatePromo()
-                }
 
-                override fun onDrawerClosed(drawerView: View) {
-                    if (!isUsingNightModeResources()) {
-                        window.updateStatusBarColor(getThemeColor(R.attr.headerBackgroundColor), true)
+                    override fun onDrawerClosed(drawerView: View) {
+                        if (!isUsingNightModeResources()) {
+                            window.updateStatusBarColor(getThemeColor(R.attr.headerBackgroundColor), true)
+                        }
+                        isOpeningDrawer = null
                     }
-                    isOpeningDrawer = null
-                }
 
-                override fun onDrawerStateChanged(newState: Int) {
-                }
-            },
-        )
+                    override fun onDrawerStateChanged(newState: Int) {
+                    }
+                },
+            )
+        }
 
         supportActionBar?.setDisplayHomeAsUpEnabled(true)
         supportActionBar?.setHomeButtonEnabled(true)

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/inventory/customization/ComposeAvatarCustomizationFragment.kt

@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -34,12 +35,16 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.colorResource
@@ -466,9 +471,6 @@ private fun AvatarCustomizationView(
     activeCustomization: String?,
     onSelect: (Customization) -> Unit,
 ) {
-    val nestedScrollInterop = rememberNestedScrollInteropConnection()
-    val totalWidth = LocalConfiguration.current.screenWidthDp.dp
-    val horizontalPadding = (totalWidth - (84.dp * 3)) / 2
     Column(horizontalAlignment = Alignment.CenterHorizontally) {
         Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.background(colorResource(R.color.window_background))) {
             ComposableAvatarView(
@@ -486,12 +488,22 @@ private fun AvatarCustomizationView(
                     .height(22.dp),
             )
         }
+        val nestedScrollInterop = rememberNestedScrollInteropConnection()
+        val screenWidth = LocalConfiguration.current.screenWidthDp.dp
+        var gridWidth by remember { mutableStateOf(screenWidth) }
+        val horizontalPadding = (gridWidth - (84.dp * 3)) / 2
+        val density = LocalDensity.current
         LazyVerticalGrid(
             columns = GridCells.Adaptive(76.dp),
             horizontalArrangement = Arrangement.Center,
             contentPadding = PaddingValues(horizontal = horizontalPadding),
             modifier =
                 Modifier
+                    .onGloballyPositioned {
+                        gridWidth = with(density) {
+                            it.size.width.toDp()
+                        }
+                    }
                     .nestedScroll(nestedScrollInterop)
                     .background(colorResource(R.color.content_background)),
         ) {

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/inventory/customization/ComposeAvatarEquipmentFragment.kt

@@ -28,12 +28,16 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.colorResource
@@ -218,9 +222,6 @@ private fun AvatarEquipmentView(
     activeCustomization: String?,
     onSelect: (Equipment) -> Unit,
 ) {
-    val nestedScrollInterop = rememberNestedScrollInteropConnection()
-    val totalWidth = LocalConfiguration.current.screenWidthDp.dp
-    val horizontalPadding = (totalWidth - (84.dp * 3)) / 2
     Column(horizontalAlignment = Alignment.CenterHorizontally) {
         Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.background(colorResource(R.color.window_background))) {
             ComposableAvatarView(
@@ -238,12 +239,22 @@ private fun AvatarEquipmentView(
                     .height(22.dp),
             )
         }
+        val nestedScrollInterop = rememberNestedScrollInteropConnection()
+        val screenWidth = LocalConfiguration.current.screenWidthDp.dp
+        var gridWidth by remember { mutableStateOf(screenWidth) }
+        val horizontalPadding = (gridWidth - (84.dp * 3)) / 2
+        val density = LocalDensity.current
         LazyVerticalGrid(
             columns = GridCells.Adaptive(76.dp),
             horizontalArrangement = Arrangement.Center,
             contentPadding = PaddingValues(horizontal = horizontalPadding),
             modifier =
             Modifier
+                .onGloballyPositioned {
+                    gridWidth = with(density) {
+                        it.size.width.toDp()
+                    }
+                }
                 .nestedScroll(nestedScrollInterop)
                 .background(colorResource(R.color.content_background)),
         ) {