wordpress-mobile · zwarm · Jan 5, 2024 · Dec 15, 2023 · Dec 15, 2023 · Dec 15, 2023
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt
@@ -1,18 +1,22 @@
 package org.wordpress.android.ui.main
 
 import android.content.Context
+import android.graphics.ColorMatrix
+import android.graphics.ColorMatrixColorFilter
 import android.graphics.drawable.BitmapDrawable
 import android.util.AttributeSet
 import android.view.HapticFeedbackConstants
 import android.view.LayoutInflater
 import android.view.MenuItem
 import android.view.View
+import android.view.animation.AnimationUtils
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.annotation.DrawableRes
 import androidx.annotation.IdRes
 import androidx.annotation.StringRes
 import androidx.core.content.res.ResourcesCompat
+import androidx.core.view.setPadding
 import androidx.core.widget.ImageViewCompat
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
@@ -72,6 +76,9 @@ class WPMainNavigationView @JvmOverloads constructor(
         MaterialR.dimen.material_emphasis_disabled
     )
 
+    val disabledColorFilter = ColorMatrixColorFilter(ColorMatrix().apply { setSaturation(0f) })
+    val enabledColorFilter = ColorMatrixColorFilter(ColorMatrix().apply { setSaturation(1f) })
+
     @Inject
     lateinit var meGravatarLoader: MeGravatarLoader
 
@@ -130,6 +137,10 @@ class WPMainNavigationView @JvmOverloads constructor(
             itemView.addView(customView)
         }
 
+        if(getMainPageIndex() != getPosition(ME)) {
+            setImageViewSelected(getPosition(ME), false)
+        }
+
         currentPosition = getMainPageIndex()
     }
 
@@ -138,6 +149,7 @@ class WPMainNavigationView @JvmOverloads constructor(
             AppLog.d(AppLog.T.MAIN, "Attempted to load an empty Gravatar URL!")
             return
         }
+        imgIcon.setPadding(resources.getDimensionPixelSize(R.dimen.navbar_me_icon_padding))
         AppLog.d(AppLog.T.MAIN, meGravatarLoader.constructGravatarUrl(avatarUrl))
         imgIcon.let {
             meGravatarLoader.load(
@@ -282,8 +294,19 @@ class WPMainNavigationView @JvmOverloads constructor(
 
     private fun setImageViewSelected(position: Int, isSelected: Boolean) {
         getImageViewForPosition(position)?.let {
+            if(position == getPosition(ME)) {
+                if(!isSelected){
+                    it.colorFilter = disabledColorFilter
+                } else
+                    it.colorFilter = enabledColorFilter
+            }
+
             it.isSelected = isSelected
             it.alpha = if (isSelected) 1f else unselectedButtonAlpha
+            if(it.isSelected) {
+                val pop = AnimationUtils.loadAnimation(it.context, R.anim.bottom_nav_icon_pop)
+                it.startAnimation(pop)
+            }
         }
     }
 
@@ -298,10 +321,10 @@ class WPMainNavigationView @JvmOverloads constructor(
     @DrawableRes
     private fun getDrawableResForPosition(position: Int): Int {
         return when (getPageTypeOrNull(position)) {
-            MY_SITE -> R.drawable.ic_my_sites_white_24dp
-            READER -> R.drawable.ic_reader_white_24dp
-            NOTIFS -> R.drawable.ic_bell_white_24dp
-            else -> R.drawable.ic_user_primary_white_24
+            MY_SITE -> R.drawable.ic_home_selected
+            READER -> R.drawable.ic_reader_selected
+            NOTIFS -> R.drawable.ic_notifications_selected
+            else -> R.drawable.ic_me_bottom_nav
         }
     }
 

diff --git a/WordPress/src/main/res/anim/bottom_nav_icon_pop.xml b/WordPress/src/main/res/anim/bottom_nav_icon_pop.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<scale xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_mediumAnimTime"
+    android:fillAfter="true"
+    android:fromXScale="0.0"
+    android:fromYScale="0.0"
+    android:interpolator="@android:anim/overshoot_interpolator"
+    android:pivotX="50%"
+    android:pivotY="50%"
+    android:toXScale="1.0"
+    android:toYScale="1.0" />
diff --git a/WordPress/src/main/res/drawable/ic_home_selected.xml b/WordPress/src/main/res/drawable/ic_home_selected.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportHeight="32"
+    android:viewportWidth="32">
+    <group>
+        <clip-path android:pathData="M0,0h32v32h-32z" />
+        <path
+            android:fillColor="#9D9DA1"
+            android:pathData="m16 4c-6.6 0-12 5.4-12 12 0 6.6 5.4 12 12 12 6.6 0 12-5.4 12-12 0-6.6-5.4-12-12-12zm-10.2 12c0-1.5.3-2.9.9-4.2l4.8 13.4c-3.4-1.7-5.7-5.2-5.7-9.2zm10.2 10.2c-1 0-2-.1-2.9-.4l3.1-8.9 3.1 8.6c0 0 .1.1.1.1-1.1.4-2.2.6-3.4.6zm1.4-15c.6 0 1.2-.1 1.2-.1.5 0 .5-.9-.1-.8 0 0-1.6.1-2.7.1-1 0-2.7-.1-2.7-.1-.5 0-.6.8-.1.8 0 0 .6.1 1.1.1l1.6 4.4-2.2 6.7-3.7-11.1c.6 0 1.1-.1 1.1-.1.6 0 .5-.8 0-.8 0 0-1.7.1-2.8.1-.2 0-.4 0-.6 0 1.8-2.8 4.9-4.6 8.5-4.6 2.7 0 5.1 1 6.9 2.7-.1 0-.1 0-.1 0-1 0-1.8.8-1.8 1.8 0 .8.5 1.5 1 2.4.4.7.9 1.5.9 2.8 0 .9-.3 1.9-.8 3.3l-1 3.4-3.7-11zm3.7 13.6 3.1-9c.6-1.4.8-2.6.8-3.6 0-.4 0-.8-.1-1.1.8 1.5 1.3 3.1 1.3 4.9 0 3.8-2 7-5.1 8.8z" />
+    </group>
+</vector>
diff --git a/WordPress/src/main/res/drawable/ic_me_bottom_nav.xml b/WordPress/src/main/res/drawable/ic_me_bottom_nav.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <path
+      android:pathData="M24,26L24,21C24,19.895 23.105,19 22,19L11,19C9.895,19 9,19.895 9,21L9,26"
+      android:strokeWidth="1.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#000000"/>
+  <path
+      android:pathData="M16.5,11m-5.125,0a5.125,5.125 0,1 1,10.25 0a5.125,5.125 0,1 1,-10.25 0"
+      android:strokeWidth="1.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#000000"/>
+</vector>
diff --git a/WordPress/src/main/res/drawable/ic_notifications_selected.xml b/WordPress/src/main/res/drawable/ic_notifications_selected.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <path
+      android:pathData="M5.357,14.208L6.178,13.387C6.551,13.478 6.891,13.539 7.2,13.576C9.094,13.804 9.814,13.146 9.899,13.061L14.88,8.081C16.645,6.316 21.254,4.967 24.649,8.362C27.921,11.634 26.83,16.03 25.065,18.02L20.133,22.952C19.38,23.705 19.36,24.965 19.46,25.837C19.524,26.397 19.638,26.797 19.638,26.797L18.792,27.643L5.357,14.208ZM17.742,24.118C17.866,23.325 18.177,22.433 18.895,21.715L23.787,16.823C25.091,15.314 25.841,12.028 23.412,9.599C22.116,8.303 20.634,7.931 19.283,8.032C17.862,8.137 16.675,8.761 16.117,9.318L11.136,14.299C10.798,14.637 10.1,15.122 8.926,15.302L17.742,24.118Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M9.767,20.057C9.694,20.115 9.624,20.178 9.556,20.246C8.563,21.239 8.563,22.85 9.556,23.843C10.55,24.837 12.161,24.837 13.154,23.843C13.222,23.776 13.284,23.706 13.343,23.633L9.767,20.057Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/WordPress/src/main/res/drawable/ic_reader_selected.xml b/WordPress/src/main/res/drawable/ic_reader_selected.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <path
+      android:pathData="M2.2,16.477C1.695,16.166 1.589,15.548 1.919,15.045C3.193,13.105 4.469,11.167 5.748,9.231C6.002,8.847 6.275,8.476 6.603,8.15C7.604,7.153 8.842,6.949 10.17,7.11C10.692,7.173 11.033,7.655 10.982,8.138C10.929,8.645 10.508,9.028 9.983,9.041C9.722,9.047 9.459,9.051 9.198,9.041C8.582,9.017 8.08,9.255 7.656,9.685C7.264,10.083 6.963,10.549 6.661,11.014C6.061,11.933 5.465,12.855 4.869,13.777C4.82,13.852 4.669,14.038 4.669,14.038H4.67"
+      android:fillColor="#999999"/>
+  <path
+      android:pathData="M27.399,14.023C27.368,13.969 27.34,13.916 27.307,13.866C26.611,12.797 25.917,11.727 25.219,10.659C25.093,10.467 24.954,10.283 24.818,10.098C24.285,9.374 23.601,8.969 22.671,9.055C22.443,9.077 22.208,9.078 21.982,9.045C21.509,8.975 21.15,8.548 21.142,8.086C21.134,7.606 21.476,7.174 21.994,7.117C23.501,6.952 24.846,7.269 25.844,8.52C26.425,9.249 26.909,10.046 27.419,10.823C28.29,12.153 29.193,13.461 30.024,14.815C30.133,14.992 30.278,15.145 30.338,15.353C30.462,15.783 30.351,16.236 29.971,16.461"
+      android:fillColor="#999999"/>
+  <path
+      android:pathData="M24.923,25.19C27.865,25.19 30.25,22.804 30.25,19.862C30.25,16.92 27.865,14.534 24.923,14.534C21.98,14.534 19.595,16.92 19.595,19.862C19.595,22.804 21.98,25.19 24.923,25.19ZM24.923,26.94C28.831,26.94 32,23.771 32,19.862C32,15.953 28.831,12.784 24.923,12.784C21.014,12.784 17.845,15.953 17.845,19.862C17.845,23.771 21.014,26.94 24.923,26.94Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M7.078,25.155C10.02,25.155 12.406,22.77 12.406,19.827C12.406,16.885 10.02,14.5 7.078,14.5C4.135,14.5 1.75,16.885 1.75,19.827C1.75,22.77 4.135,25.155 7.078,25.155ZM7.078,26.905C10.987,26.905 14.156,23.736 14.156,19.827C14.156,15.918 10.987,12.75 7.078,12.75C3.169,12.75 0,15.918 0,19.827C0,23.736 3.169,26.905 7.078,26.905Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M18.152,19.913C17.64,19.017 16.787,18.514 16,18.514C15.229,18.514 14.393,18.997 13.878,19.861L12.771,18.398C13.571,17.394 14.721,16.764 16,16.764C17.404,16.764 18.653,17.523 19.453,18.704L18.922,19.795L18.152,19.913Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/WordPress/src/main/res/drawable/nav_bar_button_selector.xml b/WordPress/src/main/res/drawable/nav_bar_button_selector.xml
@@ -3,6 +3,6 @@
     xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item android:color="?attr/wpColorNavBar" android:state_selected="true" />
-    <item android:color="?attr/colorOnSurface"/>
+    <item android:color="?attr/colorOnSurface" />
 
 </selector>
diff --git a/WordPress/src/main/res/layout/navbar_item.xml b/WordPress/src/main/res/layout/navbar_item.xml
@@ -18,6 +18,8 @@
             android:layout_width="@dimen/bottom_nav_bar_icon_size"
             android:layout_height="@dimen/bottom_nav_bar_icon_size"
             android:layout_gravity="center"
+            android:layout_marginEnd="4dp"
+            android:layout_marginStart="4dp"
             android:importantForAccessibility="no"
             app:tint="@drawable/nav_bar_button_selector"
             tools:src="@drawable/ic_create_white_24dp" />

diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
@@ -67,7 +67,7 @@
     <dimen name="bottom_sheet_dialog_width">0dp</dimen>
 
     <!-- bottom navigation bar -->
-    <dimen name="bottom_nav_bar_icon_size">24dp</dimen>
+    <dimen name="bottom_nav_bar_icon_size">32dp</dimen>
     <dimen name="bottom_nav_bar_badge_size">12dp</dimen>
 
     <!-- featured image in post list -->
@@ -773,4 +773,5 @@
     <dimen name="switch_horizontal_padding">7dp</dimen>
     <dimen name="switch_vertical_padding">4dp</dimen>
     <dimen name="post_list_more_button_extra_padding">24dp</dimen>
+    <dimen name="navbar_me_icon_padding">4dp</dimen>
 </resources>