Add hover animations to the languages and popup row icons (#2332)

MozillaReality · Nov 20, 2019 · 1846765 · 1846765
1 parent 60a4bf1
commit 1846765
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 65 deletions.
diff --git a/app/src/common/shared/org/mozilla/vrbrowser/ui/adapters/LanguagesAdapter.java b/app/src/common/shared/org/mozilla/vrbrowser/ui/adapters/LanguagesAdapter.java
@@ -1,11 +1,14 @@
 package org.mozilla.vrbrowser.ui.adapters;
 
+import android.animation.ValueAnimator;
 import android.annotation.SuppressLint;
+import android.content.Context;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.animation.AnimationUtils;
+import android.widget.ImageView;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
@@ -23,16 +26,29 @@
 
 public class LanguagesAdapter extends RecyclerView.Adapter<LanguagesAdapter.LanguageViewHolder> {
 
+    private static final int ICON_ANIMATION_DURATION = 200;
+
     private List<Language> mLanguagesList;
     private boolean mIsPreferred;
 
+    private int mIconColorHover;
+    private int mIconNormalColor;
+    private int mIconSize;
+    private int mMaxIconSize;
+
     @Nullable
     private final LanguageItemCallback mLanguageItemCallback;
 
-    public LanguagesAdapter(@Nullable LanguageItemCallback clickCallback, boolean isPreferred) {
+    public LanguagesAdapter(@NonNull Context context, @Nullable LanguageItemCallback clickCallback, boolean isPreferred) {
         mLanguageItemCallback = clickCallback;
         mIsPreferred = isPreferred;
 
+        mIconSize = (int)context.getResources().getDimension(R.dimen.language_row_icon_size);
+        mMaxIconSize = mIconSize + ((mIconSize*25)/100);
+
+        mIconColorHover = context.getResources().getColor(R.color.smoke, context.getTheme());
+        mIconNormalColor = context.getResources().getColor(R.color.concrete, context.getTheme());
+
         setHasStableIds(true);
     }
 
@@ -123,6 +139,10 @@ public LanguageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int view
         LanguageItemBinding binding = DataBindingUtil
                 .inflate(LayoutInflater.from(parent.getContext()), R.layout.language_item,
                         parent, false);
+        binding.add.setOnHoverListener(mIconHoverListener);
+        binding.delete.setOnHoverListener(mIconHoverListener);
+        binding.up.setOnHoverListener(mIconHoverListener);
+        binding.down.setOnHoverListener(mIconHoverListener);
         binding.setIsPreferred(mIsPreferred);
 
         return new LanguageViewHolder(binding);
@@ -187,4 +207,44 @@ public long getItemId(int position) {
         return  position;
     }
 
+    private View.OnHoverListener mIconHoverListener = (view, motionEvent) -> {
+        ImageView icon = (ImageView)view;
+        int ev = motionEvent.getActionMasked();
+        switch (ev) {
+            case MotionEvent.ACTION_HOVER_ENTER: {
+                icon.setColorFilter(mIconColorHover);
+                ValueAnimator anim = ValueAnimator.ofInt(mIconSize, mMaxIconSize);
+                anim.addUpdateListener(valueAnimator -> {
+                    int val = (Integer) valueAnimator.getAnimatedValue();
+                    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
+                    layoutParams.width = val;
+                    layoutParams.height = val;
+                    view.setLayoutParams(layoutParams);
+                });
+                anim.setDuration(ICON_ANIMATION_DURATION);
+                anim.start();
+
+                return false;
+            }
+
+            case MotionEvent.ACTION_HOVER_EXIT: {
+                ValueAnimator anim = ValueAnimator.ofInt(mMaxIconSize, mIconSize);
+                anim.addUpdateListener(valueAnimator -> {
+                    int val = (Integer) valueAnimator.getAnimatedValue();
+                    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
+                    layoutParams.width = val;
+                    layoutParams.height = val;
+                    view.setLayoutParams(layoutParams);
+                });
+                anim.setDuration(ICON_ANIMATION_DURATION);
+                anim.start();
+                icon.setColorFilter(mIconNormalColor);
+
+                return false;
+            }
+        }
+
+        return false;
+    };
+
 }
diff --git a/app/src/common/shared/org/mozilla/vrbrowser/ui/adapters/PopUpAdapter.java b/app/src/common/shared/org/mozilla/vrbrowser/ui/adapters/PopUpAdapter.java
@@ -1,9 +1,12 @@
 package org.mozilla.vrbrowser.ui.adapters;
 
+import android.animation.ValueAnimator;
 import android.content.Context;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
+import android.view.View;
 import android.view.ViewGroup;
+import android.widget.ImageView;
 
 import androidx.annotation.NonNull;
 import androidx.databinding.DataBindingUtil;
@@ -24,13 +27,26 @@ public class PopUpAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>
 
     static final String LOGTAG = SystemUtils.createLogtag(BookmarkAdapter.class);
 
+    private static final int ICON_ANIMATION_DURATION = 200;
+
     private List<PopUpSite> mDisplayList;
 
     private PopUpSiteItemCallback mCallback;
 
+    private int mIconColorHover;
+    private int mIconNormalColor;
+    private int mIconSize;
+    private int mMaxIconSize;
+
     public PopUpAdapter(Context aContext, PopUpSiteItemCallback callback) {
         mCallback = callback;
 
+        mIconSize = (int)aContext.getResources().getDimension(R.dimen.language_row_icon_size);
+        mMaxIconSize = mIconSize + ((mIconSize*25)/100);
+
+        mIconColorHover = aContext.getResources().getColor(R.color.smoke, aContext.getTheme());
+        mIconNormalColor = aContext.getResources().getColor(R.color.concrete, aContext.getTheme());
+
         setHasStableIds(true);
     }
 
@@ -93,6 +109,7 @@ public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int
 
             return false;
         });
+        binding.delete.setOnHoverListener(mIconHoverListener);
 
         return new PopUpSiteViewHolder(binding);
     }
@@ -119,5 +136,45 @@ static class PopUpSiteViewHolder extends RecyclerView.ViewHolder {
         }
     }
 
+    private View.OnHoverListener mIconHoverListener = (view, motionEvent) -> {
+        ImageView icon = (ImageView)view;
+        int ev = motionEvent.getActionMasked();
+        switch (ev) {
+            case MotionEvent.ACTION_HOVER_ENTER: {
+                icon.setColorFilter(mIconColorHover);
+                ValueAnimator anim = ValueAnimator.ofInt(mIconSize, mMaxIconSize);
+                anim.addUpdateListener(valueAnimator -> {
+                    int val = (Integer) valueAnimator.getAnimatedValue();
+                    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
+                    layoutParams.width = val;
+                    layoutParams.height = val;
+                    view.setLayoutParams(layoutParams);
+                });
+                anim.setDuration(ICON_ANIMATION_DURATION);
+                anim.start();
+
+                return false;
+            }
+
+            case MotionEvent.ACTION_HOVER_EXIT: {
+                ValueAnimator anim = ValueAnimator.ofInt(mMaxIconSize, mIconSize);
+                anim.addUpdateListener(valueAnimator -> {
+                    int val = (Integer) valueAnimator.getAnimatedValue();
+                    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
+                    layoutParams.width = val;
+                    layoutParams.height = val;
+                    view.setLayoutParams(layoutParams);
+                });
+                anim.setDuration(ICON_ANIMATION_DURATION);
+                anim.start();
+                icon.setColorFilter(mIconNormalColor);
+
+                return false;
+            }
+        }
+
+        return false;
+    };
+
 }
 
diff --git a/...c/common/shared/org/mozilla/vrbrowser/ui/widgets/settings/ContentLanguageOptionsView.java b/...c/common/shared/org/mozilla/vrbrowser/ui/widgets/settings/ContentLanguageOptionsView.java
@@ -41,11 +41,11 @@ private void initialize(Context aContext) {
         LayoutInflater inflater = LayoutInflater.from(aContext);
 
         // Preferred languages adapter
-        mPreferredAdapter = new LanguagesAdapter(mLanguageItemCallback, true);
+        mPreferredAdapter = new LanguagesAdapter(getContext(), mLanguageItemCallback, true);
         mPreferredAdapter.setLanguageList(LocaleUtils.getPreferredLanguages(getContext()));
 
         // Available languages adapter
-        mAvailableAdapter = new LanguagesAdapter(mLanguageItemCallback, false);
+        mAvailableAdapter = new LanguagesAdapter(getContext(), mLanguageItemCallback, false);
         mAvailableAdapter.setLanguageList(LocaleUtils.getAvailableLanguages());
 
         // Inflate this data binding layout

diff --git a/app/src/main/res/drawable/ic_icon_language_delete.xml b/app/src/main/res/drawable/ic_icon_language_delete.xml
@@ -2,7 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android"
     android:enterFadeDuration="@integer/ui_fadeAnimTime"
     android:exitFadeDuration="@integer/ui_fadeAnimTime">
-    <item android:drawable="@drawable/ic_icon_delete" android:state_hovered="true" />
-    <item android:drawable="@drawable/ic_icon_delete" android:state_pressed="true" />
+    <item android:drawable="@drawable/ic_icon_delete" android:state_hovered="true" android:color="@color/smoke" />
+    <item android:drawable="@drawable/ic_icon_delete" android:state_pressed="true" android:color="@color/void_color" />
     <item android:drawable="@android:color/transparent" />
 </selector>
diff --git a/app/src/main/res/layout/language_item.xml b/app/src/main/res/layout/language_item.xml
@@ -43,34 +43,54 @@
             android:duplicateParentState="true"
             android:orientation="horizontal">
 
-            <ImageView
-                android:id="@+id/add"
+            <FrameLayout
                 android:layout_width="@dimen/language_row_icon_size"
                 android:layout_height="@dimen/language_row_icon_size"
-                android:layout_gravity="center"
-                android:clickable="false"
-                android:contentDescription="TODO"
-                android:duplicateParentState="true"
-                android:soundEffectsEnabled="false"
-                android:src="@{language.isPreferred ? @drawable/ic_icon_check : @drawable/ic_icon_language_add}"
-                android:tint="@color/fog"
-                app:srcCompat="@drawable/ic_icon_language_add"
-                app:visibleGone="@{!isPreferred}" />
-
-            <ImageView
-                android:id="@+id/delete"
-                android:layout_width="@dimen/language_row_icon_size"
-                android:layout_height="@dimen/language_row_icon_size"
-                android:layout_centerVertical="true"
-                android:layout_gravity="center"
-                android:clickable="false"
-                android:contentDescription="Preferred language delete button"
-                android:duplicateParentState="true"
-                android:soundEffectsEnabled="false"
-                android:src="@{@drawable/ic_icon_language_delete}"
-                android:tint="@color/fog"
-                app:srcCompat="@drawable/ic_icon_language_delete"
-                app:visibleGone="@{isPreferred}" />
+                android:duplicateParentState="true">
+
+                <ImageView
+                    android:id="@+id/add"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_gravity="center"
+                    android:clickable="false"
+                    android:contentDescription="TODO"
+                    android:duplicateParentState="true"
+                    android:soundEffectsEnabled="false"
+                    android:src="@drawable/ic_icon_language_add"
+                    android:tint="@color/fog"
+                    app:srcCompat="@drawable/ic_icon_language_add"
+                    app:visibleGone="@{!isPreferred &amp;&amp; !language.isPreferred}" />
+
+                <ImageView
+                    android:id="@+id/added"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_gravity="center"
+                    android:clickable="false"
+                    android:contentDescription="TODO"
+                    android:duplicateParentState="true"
+                    android:soundEffectsEnabled="false"
+                    android:src="@drawable/ic_icon_check"
+                    android:tint="@color/fog"
+                    app:srcCompat="@drawable/ic_icon_check"
+                    app:visibleGone="@{!isPreferred &amp;&amp; language.isPreferred}" />
+
+                <ImageView
+                    android:id="@+id/delete"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_gravity="center"
+                    android:clickable="false"
+                    android:contentDescription="Preferred language delete button"
+                    android:duplicateParentState="true"
+                    android:soundEffectsEnabled="false"
+                    android:src="@{@drawable/ic_icon_language_delete}"
+                    android:tint="@color/fog"
+                    app:srcCompat="@drawable/ic_icon_language_delete"
+                    app:visibleGone="@{isPreferred}" />
+
+            </FrameLayout>
 
         </LinearLayout>
 
@@ -109,31 +129,38 @@
             android:duplicateParentState="true"
             android:orientation="horizontal">
 
-            <ImageView
-                android:id="@+id/up"
+            <FrameLayout
                 android:layout_width="@dimen/language_row_icon_size"
                 android:layout_height="@dimen/language_row_icon_size"
-                android:layout_gravity="center"
-                android:contentDescription="TODO"
-                android:duplicateParentState="true"
-                android:soundEffectsEnabled="false"
-                android:src="@drawable/ic_icon_language_move_up"
-                android:tint="@color/fog"
-                app:srcCompat="@drawable/ic_icon_language_move_up"
-                app:visibleGone="@{isPreferred &amp;&amp; !isFirst}" />
-
-            <ImageView
-                android:id="@+id/down"
-                android:layout_width="@dimen/language_row_icon_size"
-                android:layout_height="@dimen/language_row_icon_size"
-                android:layout_gravity="center"
-                android:contentDescription="TODO"
-                android:duplicateParentState="true"
-                android:soundEffectsEnabled="false"
-                android:src="@drawable/ic_icon_language_move_down"
-                android:tint="@color/fog"
-                app:srcCompat="@drawable/ic_icon_language_move_down"
-                app:visibleGone="@{isPreferred &amp;&amp; !isLast}" />
+                android:duplicateParentState="true">
+
+                <ImageView
+                    android:id="@+id/up"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_gravity="center"
+                    android:contentDescription="TODO"
+                    android:duplicateParentState="true"
+                    android:soundEffectsEnabled="false"
+                    android:src="@drawable/ic_icon_language_move_up"
+                    android:tint="@color/fog"
+                    app:srcCompat="@drawable/ic_icon_language_move_up"
+                    app:visibleGone="@{isPreferred &amp;&amp; !isFirst}" />
+
+                <ImageView
+                    android:id="@+id/down"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_gravity="center"
+                    android:contentDescription="TODO"
+                    android:duplicateParentState="true"
+                    android:soundEffectsEnabled="false"
+                    android:src="@drawable/ic_icon_language_move_down"
+                    android:tint="@color/fog"
+                    app:srcCompat="@drawable/ic_icon_language_move_down"
+                    app:visibleGone="@{isPreferred &amp;&amp; !isLast}" />
+
+            </FrameLayout>
         </LinearLayout>
     </RelativeLayout>
 </layout>