Size and spacing of navigation bar elements

Set the default size in dp (800dp, previously 720dp) of the navigation bar to be consistent with its default size in world dimensions (4.0). This makes the navigation elements slightly smaller, which we compensate by increasing their size to 44dp. Reduce the margin between elements. Split the styles for the navigation bar from the ones used in other elements in the UI, for example in the close button in dialogs.
Igalia · Dec 18, 2024 · e5b05c8 · e5b05c8
1 parent 961b02d
commit e5b05c8
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 35 deletions.
diff --git a/app/src/main/res/layout/deprecated_version_dialog.xml b/app/src/main/res/layout/deprecated_version_dialog.xml
@@ -31,7 +31,7 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/dismissButton"
-            style="?attr/navigationBarButtonStyle"
+            style="?attr/headerBarButtonStyle"
             android:layout_alignParentTop="true"
             android:layout_alignParentEnd="true"
             android:src="@drawable/ic_icon_exit"

diff --git a/app/src/main/res/layout/library.xml b/app/src/main/res/layout/library.xml
@@ -78,7 +78,7 @@
 
                     <com.igalia.wolvic.ui.views.UIButton
                         android:id="@+id/backButton"
-                        style="?attr/navigationBarButtonStyle"
+                        style="?attr/headerBarButtonStyle"
                         android:layout_alignParentStart="true"
                         android:layout_centerVertical="true"
                         android:src="@drawable/ic_icon_back"
@@ -112,7 +112,7 @@
 
                     <com.igalia.wolvic.ui.views.UIButton
                         android:id="@+id/closeButton"
-                        style="?attr/navigationBarButtonStyle"
+                        style="?attr/headerBarButtonStyle"
                         android:layout_centerVertical="true"
                         android:layout_alignParentEnd="true"
                         android:src="@drawable/ic_icon_exit"

diff --git a/app/src/main/res/layout/navigation_bar_navigation.xml b/app/src/main/res/layout/navigation_bar_navigation.xml
@@ -14,7 +14,7 @@
 
     <LinearLayout
         android:id="@+id/navigationBarContainer"
-        android:layout_width="match_parent"
+        android:layout_width="800dp"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:padding="0dp">
@@ -40,7 +40,7 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/forwardButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:src="@drawable/ic_icon_forward"
             android:tooltipText="@string/forward_tooltip"
@@ -49,28 +49,31 @@
 
         <RelativeLayout
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:padding="0dp" >
 
             <com.igalia.wolvic.ui.views.UIButton
                 android:id="@+id/reloadButton"
                 style="?attr/navigationBarButtonStyle"
+                android:layout_centerInParent="true"
                 android:src="@{viewmodel.isLoading ? @drawable/ic_icon_exit : @drawable/ic_icon_reload}"
                 android:tooltipText="@{viewmodel.isLoading ? @string/stop_tooltip : @string/refresh_tooltip}"
                 app:privateMode="@{viewmodel.isPrivateSession}" />
 
             <ProgressBar
                 android:id="@+id/progressBar"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_centerInParent="true"
+                android:layout_margin="8dp"
                 android:visibility="@{viewmodel.isLoading ? View.VISIBLE : View.GONE}" />
         </RelativeLayout>
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/homeButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:src="@drawable/ic_icon_home"
             android:tooltipText="@string/home_tooltip"
@@ -80,9 +83,9 @@
         <com.igalia.wolvic.ui.views.NavigationURLBar
             android:id="@+id/urlBar"
             android:layout_width="wrap_content"
-            android:layout_height="40dp"
+            android:layout_height="@dimen/nav_button_size"
             android:layout_gravity="center_vertical"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="100"
             android:orientation="horizontal"
             app:visibleGone="@{!viewmodel.isKioskMode || viewmodel.isFindInPage}" />
@@ -91,14 +94,14 @@
             android:id="@+id/urlBarPlaceholder"
             android:layout_width="wrap_content"
             android:layout_height="0dp"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="100"
             app:visibleGone="@{viewmodel.isKioskMode &amp;&amp; !viewmodel.isFindInPage}" />
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/userFeedbackButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:checked="true"
             android:src="@drawable/baseline_contact_support_24"
@@ -109,7 +112,7 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/desktopModeButton"
             style="?attr/accentedNavigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:checked="true"
             android:src="@drawable/ic_icon_ua_desktop"
@@ -118,10 +121,10 @@
             app:visibleGone="@{viewmodel.isDesktopMode &amp;&amp; !viewmodel.isKioskMode}" />
 
         <RelativeLayout
-            android:layout_width="40dp"
-            android:layout_height="40dp"
+            android:layout_width="@dimen/nav_button_size"
+            android:layout_height="@dimen/nav_button_size"
             android:layout_weight="0"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:scaleType="fitCenter"
             android:layout_gravity="center_vertical"
             app:visibleGone="@{settingsmodel.isWhatsNewVisible &amp;&amp; viewmodel.width > 640 &amp;&amp; !viewmodel.isKioskMode}">
@@ -134,8 +137,8 @@
                 app:privateMode="@{viewmodel.isPrivateSession}" />
 
             <com.google.android.material.textview.MaterialTextView
-                android:layout_width="6dp"
-                android:layout_height="6dp"
+                android:layout_width="8dp"
+                android:layout_height="8dp"
                 android:layout_marginTop="12dp"
                 android:layout_marginRight="10dp"
                 android:layout_alignParentTop="true"
@@ -146,7 +149,7 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/menuButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:src="@drawable/ic_icon_hamburger_menu"
             android:tooltipText="@string/hamburger_menu_tooltip"

diff --git a/app/src/main/res/layout/options_header.xml b/app/src/main/res/layout/options_header.xml
@@ -39,9 +39,7 @@
 
             <com.igalia.wolvic.ui.views.UIButton
                 android:id="@+id/backButton"
-                style="?attr/navigationBarButtonStyle"
-                android:layout_width="40dp"
-                android:layout_height="40dp"
+                style="?attr/headerBarButtonStyle"
                 android:layout_alignParentStart="true"
                 android:onClick="@{(view) ->  backClickListener.onClick(view)}"
                 android:src="@drawable/ic_icon_back"
@@ -76,9 +74,7 @@
 
             <com.igalia.wolvic.ui.views.UIButton
                 android:id="@+id/helpButton"
-                style="?attr/navigationBarButtonStyle"
-                android:layout_width="40dp"
-                android:layout_height="40dp"
+                style="?attr/headerBarButtonStyle"
                 android:layout_alignParentEnd="true"
                 android:onClick="@{(view) ->  helpClickListener.onClick(view)}"
                 android:src="@drawable/ic_icon_settings_help"

diff --git a/app/src/main/res/layout/prompt_dialog.xml b/app/src/main/res/layout/prompt_dialog.xml
@@ -14,10 +14,8 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/backButton"
-            style="?attr/navigationBarButtonStyle"
-            android:layout_width="40dp"
+            style="?attr/headerBarButtonStyle"
             android:layout_marginStart="-34dp"
-            android:layout_height="40dp"
             android:layout_alignParentStart="true"
             android:src="@drawable/ic_icon_back"
             android:tint="@color/midnight"

diff --git a/app/src/main/res/layout/tabs.xml b/app/src/main/res/layout/tabs.xml
@@ -16,9 +16,7 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/tabsBackButton"
-            style="?attr/navigationBarButtonStyle"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
+            style="?attr/headerBarButtonStyle"
             android:padding="8dp"
             app:tintColorList="@drawable/main_button_icon_color_active"
             android:tint="@color/midnight"

diff --git a/app/src/main/res/layout/title_bar.xml b/app/src/main/res/layout/title_bar.xml
@@ -78,7 +78,7 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/mediaButton"
-            style="?attr/navigationBarButtonStyle"
+            style="?attr/headerBarButtonStyle"
             android:src="@{viewmodel.isMediaPlaying ? @drawable/ic_icon_media_pause : @drawable/ic_icon_media_play}"
             android:onClick="@{(view) -> viewmodel.isMediaPlaying ? delegate.onMediaPauseClicked(widget) : delegate.onMediaPlayClicked(widget)}"
             android:tooltipText="@{viewmodel.isMediaPlaying ? @string/media_pause_tooltip : @string/media_resume_tooltip}"

diff --git a/app/src/main/res/values/dimen.xml b/app/src/main/res/values/dimen.xml
@@ -15,7 +15,7 @@
     <item name="window_world_z_max" format="float" type="dimen">-5.2</item>
 
     <!-- Navigation bar -->
-    <dimen name="navigation_bar_width">720dp</dimen>
+    <dimen name="navigation_bar_width">800dp</dimen>
     <dimen name="navigation_bar_height">74dp</dimen>
     <dimen name="url_bar_item_width">28dp</dimen>
     <dimen name="url_bar_first_item_width">36dp</dimen>
@@ -191,6 +191,10 @@
     <item name="url_bar_popup_world_y" format="float" type="dimen">0.15</item>
     <item name="url_bar_popup_world_z" format="float" type="dimen">0.1</item>
 
+    <dimen name="nav_button_size">44dp</dimen>
+    <dimen name="nav_button_padding">12dp</dimen>
+    <dimen name="nav_button_margin">8dp</dimen>
+
     <dimen name="tray_icon_padding_max">10dp</dimen>
     <dimen name="tray_icon_padding_min">8dp</dimen>
 

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -6,6 +6,7 @@
         <attr name="uiButtonStyle" format="reference" />
         <attr name="navigationBarButtonStyle" format="reference" />
         <attr name="accentedNavigationBarButtonStyle" format="reference" />
+        <attr name="headerBarButtonStyle" format="reference" />
         <attr name="fullScreenButtonStyle" format="reference" />
         <attr name="fullScreenFirstButtonStyle" format="reference" />
         <attr name="fullScreenLastButtonStyle" format="reference" />
@@ -63,11 +64,17 @@
         <item name="clipColor">@color/azure</item>
     </style>
 
-    <style name="navigationBarButtonTheme" parent="uiButtonTheme">
+    <style name="headerBarButtonTheme" parent="uiButtonTheme">
         <item name="android:background">@drawable/main_button</item>
         <item name="privateModeBackground">@drawable/main_button_private</item>
     </style>
 
+    <style name="navigationBarButtonTheme" parent="headerBarButtonTheme">
+        <item name="android:layout_width">@dimen/nav_button_size</item>
+        <item name="android:layout_height">@dimen/nav_button_size</item>
+        <item name="android:padding">@dimen/nav_button_padding</item>
+    </style>
+
     <style name="accentedNavigationBarButtonTheme" parent="navigationBarButtonTheme">
         <item name="android:background">@drawable/main_button_accented</item>
     </style>
@@ -468,6 +475,7 @@
         <item name="navigationBarStyle">@style/navigationBarTheme</item>
         <item name="navigationBarButtonStyle">@style/navigationBarButtonTheme</item>
         <item name="accentedNavigationBarButtonStyle">@style/accentedNavigationBarButtonTheme</item>
+        <item name="headerBarButtonStyle">@style/headerBarButtonTheme</item>
         <item name="fullScreenButtonStyle">@style/fullScreenButtonTheme</item>
         <item name="fullScreenFirstButtonStyle">@style/fullScreenFirstButtonTheme</item>
         <item name="fullScreenLastButtonStyle">@style/fullScreenLastButtonTheme</item>