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 index beca76c4484c..57138416e919 100644 --- 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 new file mode 100644 index 000000000000..27815dc4c318 --- /dev/null +++ b/WordPress/src/main/res/anim/bottom_nav_icon_pop.xml @@ -0,0 +1,11 @@ + + diff --git a/WordPress/src/main/res/drawable/ic_home_selected.xml b/WordPress/src/main/res/drawable/ic_home_selected.xml new file mode 100644 index 000000000000..12fd0afa8638 --- /dev/null +++ b/WordPress/src/main/res/drawable/ic_home_selected.xml @@ -0,0 +1,12 @@ + + + + + + diff --git a/WordPress/src/main/res/drawable/ic_me_bottom_nav.xml b/WordPress/src/main/res/drawable/ic_me_bottom_nav.xml new file mode 100644 index 000000000000..8393c3ffa1e3 --- /dev/null +++ b/WordPress/src/main/res/drawable/ic_me_bottom_nav.xml @@ -0,0 +1,16 @@ + + + + diff --git a/WordPress/src/main/res/drawable/ic_notifications_selected.xml b/WordPress/src/main/res/drawable/ic_notifications_selected.xml new file mode 100644 index 000000000000..19103ae2fdd6 --- /dev/null +++ b/WordPress/src/main/res/drawable/ic_notifications_selected.xml @@ -0,0 +1,14 @@ + + + + diff --git a/WordPress/src/main/res/drawable/ic_reader_selected.xml b/WordPress/src/main/res/drawable/ic_reader_selected.xml new file mode 100644 index 000000000000..d3d5e70339f8 --- /dev/null +++ b/WordPress/src/main/res/drawable/ic_reader_selected.xml @@ -0,0 +1,24 @@ + + + + + + + diff --git a/WordPress/src/main/res/drawable/nav_bar_button_selector.xml b/WordPress/src/main/res/drawable/nav_bar_button_selector.xml index 003c854c0051..505046fbd95a 100644 --- 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"> - + diff --git a/WordPress/src/main/res/layout/navbar_item.xml b/WordPress/src/main/res/layout/navbar_item.xml index 0f2ea08363d4..a41da5929983 100644 --- 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 index 7d0a903e6682..6dba1b57bc6b 100644 --- a/WordPress/src/main/res/values/dimens.xml +++ b/WordPress/src/main/res/values/dimens.xml @@ -67,7 +67,7 @@ 0dp - 24dp + 32dp 12dp @@ -773,4 +773,5 @@ 7dp 4dp 24dp + 4dp