Updated toolbar and bottom bar design implementation

TBD:
Both toolbars should move away from the screen when scrolling

app/src/main/java/com/topjohnwu/magisk/redesign/MainActivity.kt

@@ -2,6 +2,8 @@ package com.topjohnwu.magisk.redesign
 
 import android.graphics.Insets
 import android.os.Bundle
+import android.view.ViewTreeObserver
+import androidx.core.view.setPadding
 import androidx.fragment.app.Fragment
 import com.ncapdevi.fragnav.FragNavController
 import com.topjohnwu.magisk.Const
@@ -32,6 +34,14 @@ open class MainActivity : CompatActivity<MainViewModel, ActivityMainMd2Binding>(
         SettingsFragment::class
     )
 
+    //This temporarily fixes unwanted feature of BottomNavigationView - where the view applies
+    //padding on itself given insets are not consumed beforehand. Unfortunately the listener
+    //implementation doesn't favor us against the design library, so on re-create it's often given
+    //upper hand.
+    private val navObserver = ViewTreeObserver.OnGlobalLayoutListener {
+        binding.mainNavigation.setPadding(0)
+    }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
@@ -49,11 +59,18 @@ open class MainActivity : CompatActivity<MainViewModel, ActivityMainMd2Binding>(
             true
         }
 
+        binding.mainNavigation.viewTreeObserver.addOnGlobalLayoutListener(navObserver)
+
         if (intent.getBooleanExtra(Const.Key.OPEN_SETTINGS, false)) {
             binding.mainNavigation.selectedItemId = R.id.settingsFragment
         }
     }
 
+    override fun onDestroy() {
+        binding.mainNavigation.viewTreeObserver.removeOnGlobalLayoutListener(navObserver)
+        super.onDestroy()
+    }
+
     override fun onTabTransaction(fragment: Fragment?, index: Int) {
         super.onTabTransaction(fragment, index)
 

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

@@ -24,12 +24,14 @@
             android:layout_width="match_parent"
             android:layout_height="match_parent" />
 
-        <com.google.android.material.appbar.AppBarLayout
-            style="?styleAppbar"
+        <com.google.android.material.card.MaterialCardView
+            style="?styleCardElevated"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:paddingTop="@{viewModel.insets.top}"
-            tools:paddingTop="24dp">
+            android:layout_marginStart="@dimen/l1"
+            android:layout_marginTop="@{(int) @dimen/l1 + viewModel.insets.top}"
+            android:layout_marginEnd="@dimen/l1"
+            tools:layout_marginTop="40dp">
 
             <com.google.android.material.appbar.MaterialToolbar
                 android:id="@+id/main_toolbar"
@@ -45,21 +47,18 @@
                 android:layout_gravity="start|bottom"
                 android:background="@drawable/bg_accent" />
 
-        </com.google.android.material.appbar.AppBarLayout>
+        </com.google.android.material.card.MaterialCardView>
 
-        <com.google.android.material.bottomappbar.BottomAppBar
+        <com.google.android.material.card.MaterialCardView
             android:id="@+id/main_bottom_bar"
+            style="?styleCardElevated"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
-            android:background="?colorSurface"
-            android:paddingBottom="@{viewModel.insets.bottom}"
-            app:backgroundTint="?colorSurface"
-            app:contentInsetEnd="0dp"
-            app:contentInsetStart="0dp"
-            app:fabCradleMargin="@dimen/l_50"
-            app:hideOnScroll="true"
-            tools:paddingBottom="48dp">
+            android:layout_marginStart="@dimen/l1"
+            android:layout_marginEnd="@dimen/l1"
+            android:layout_marginBottom="@{(int) @dimen/l1 + viewModel.insets.bottom}"
+            tools:layout_marginBottom="64dp">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -94,15 +93,7 @@
 
             </LinearLayout>
 
-        </com.google.android.material.bottomappbar.BottomAppBar>
-
-        <com.google.android.material.floatingactionbutton.FloatingActionButton
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="@{viewModel.insets.bottom + (int) @dimen/l1}"
-            app:fabSize="normal"
-            app:layout_anchor="@+id/main_bottom_bar"
-            app:srcCompat="@drawable/ic_superuser_md2" />
+        </com.google.android.material.card.MaterialCardView>
 
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 

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

@@ -21,7 +21,7 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:clipToPadding="false"
-        android:paddingTop="@{viewModel.insets.top + (int) @dimen/internal_action_bar_size + (int) @dimen/l1}"
+        android:paddingTop="@{viewModel.insets.top + (int) @dimen/internal_action_bar_size + (int) @dimen/l2}"
         android:paddingBottom="@{viewModel.insets.bottom + (int) @dimen/margin_fab + (int) @dimen/l1}"
         tools:layout_marginTop="24dp">
 

app/src/main/res/menu/menu_bottom_nav.xml

@@ -15,9 +15,9 @@
         tools:showAsAction="always" />
 
     <item
-        android:id="@+id/fake"
-        android:enabled="false"
-        android:title=""
+        android:id="@+id/superuserFragment"
+        android:icon="@drawable/ic_superuser_md2"
+        android:title="@string/section_superuser"
         tools:showAsAction="always" />
 
     <item

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

@@ -17,6 +17,7 @@
 
     <!--Card-->
     <attr name="styleCardNormal" format="reference" />
+    <attr name="styleCardElevated" format="reference" />
     <attr name="styleCardOnPrimary" format="reference" />
 
     <!--Button-->

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

@@ -30,6 +30,7 @@
         <item name="styleToolbar">@style/WidgetFoundation.Toolbar</item>
 
         <item name="styleCardNormal">@style/WidgetFoundation.Card</item>
+        <item name="styleCardElevated">@style/WidgetFoundation.Card.Elevated</item>
         <item name="styleCardOnPrimary">@style/WidgetFoundation.Card.OnPrimary</item>
 
         <item name="styleButtonDefault">@style/WidgetFoundation.Button</item>

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

@@ -27,6 +27,13 @@ variant. Make sure to use style referenced by attribute defined it attrs.xml.
         <item name="cardBackgroundColor">?colorSurfaceVariant</item>
         <item name="cardCornerRadius">@dimen/l_50</item>
         <item name="cardElevation">0dp</item>
+        <item name="cardPreventCornerOverlap">true</item>
+    </style>
+
+
+    <style name="WidgetFoundation.Card.Elevated" parent="Widget.MaterialComponents.CardView">
+        <item name="cardBackgroundColor">?colorSurface</item>
+        <item name="cardElevation">@dimen/l_25</item>
     </style>
 
     <style name="WidgetFoundation.Card.OnPrimary" parent="Widget.MaterialComponents.CardView">
@@ -35,6 +42,7 @@ variant. Make sure to use style referenced by attribute defined it attrs.xml.
         <item name="strokeColor">?colorOnPrimaryVariant</item>
         <item name="strokeWidth">1dp</item>
         <item name="cardBackgroundColor">?colorPrimary</item>
+        <item name="cardPreventCornerOverlap">true</item>
     </style>