Fade in selected state on tabs when they are in the drawer

app/src/main/java/acr/browser/lightning/fragment/TabsFragment.java

@@ -12,18 +12,21 @@ import android.graphics.Paint;
 import android.graphics.PorterDuff;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
+import android.graphics.drawable.TransitionDrawable;
 import android.os.Build;
 import android.os.Bundle;
 import android.support.annotation.IdRes;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
+import android.support.v4.content.ContextCompat;
 import android.support.v4.view.ViewCompat;
 import android.support.v4.widget.TextViewCompat;
 import android.support.v7.widget.LinearLayoutManager;
 import android.support.v7.widget.RecyclerView;
 import android.support.v7.widget.RecyclerView.LayoutManager;
 import android.support.v7.widget.SimpleItemAnimator;
+import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
@@ -46,8 +49,10 @@ import acr.browser.lightning.controller.UIController;
 import acr.browser.lightning.fragment.anim.HorizontalItemAnimator;
 import acr.browser.lightning.fragment.anim.VerticalItemAnimator;
 import acr.browser.lightning.preference.PreferenceManager;
+import acr.browser.lightning.utils.DrawableUtils;
 import acr.browser.lightning.utils.ThemeUtils;
 import acr.browser.lightning.utils.Utils;
+import acr.browser.lightning.view.BackgroundDrawable;
 import acr.browser.lightning.view.LightningView;
 
 /**
@@ -272,7 +277,6 @@ public class TabsFragment extends Fragment implements View.OnClickListener, View
 
         private final int mLayoutResourceId;
         @Nullable private final Drawable mBackgroundTabDrawable;
-        @Nullable private final Drawable mForegroundTabDrawable;
         @Nullable private final Bitmap mForegroundTabBitmap;
         private ColorMatrix mColorMatrix;
         private Paint mPaint;
@@ -288,7 +292,6 @@ public class TabsFragment extends Fragment implements View.OnClickListener, View
             if (vertical) {
                 mBackgroundTabDrawable = null;
                 mForegroundTabBitmap = null;
-                mForegroundTabDrawable = ThemeUtils.getSelectedBackground(getContext(), mDarkTheme);
             } else {
                 int backgroundColor = Utils.mixTwoColors(ThemeUtils.getPrimaryColor(getContext()), Color.BLACK, 0.75f);
                 Bitmap backgroundTabBitmap = Bitmap.createBitmap(Utils.dpToPx(175), Utils.dpToPx(30), Bitmap.Config.ARGB_8888);
@@ -298,7 +301,6 @@ public class TabsFragment extends Fragment implements View.OnClickListener, View
                 int foregroundColor = ThemeUtils.getPrimaryColor(getContext());
                 mForegroundTabBitmap = Bitmap.createBitmap(Utils.dpToPx(175), Utils.dpToPx(30), Bitmap.Config.ARGB_8888);
                 Utils.drawTrapezoid(new Canvas(mForegroundTabBitmap), foregroundColor, false);
-                mForegroundTabDrawable = null;
             }
         }
 
@@ -307,6 +309,9 @@ public class TabsFragment extends Fragment implements View.OnClickListener, View
         public LightningViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
             LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
             View view = inflater.inflate(mLayoutResourceId, viewGroup, false);
+            if (mDrawerTabs) {
+                DrawableUtils.setBackground(view, new BackgroundDrawable(view.getContext()));
+            }
             return new LightningViewHolder(view);
         }
 
@@ -324,36 +329,39 @@ public class TabsFragment extends Fragment implements View.OnClickListener, View
 
             final Bitmap favicon = web.getFavicon();
             if (web.isForegroundTab()) {
-                TextViewCompat.setTextAppearance(holder.txtTitle, R.style.boldText);
+                Drawable foregroundDrawable = null;
-                Drawable foregroundDrawable;
                 if (!mDrawerTabs) {
                     foregroundDrawable = new BitmapDrawable(getResources(), mForegroundTabBitmap);
                     if (!mIsIncognito && mColorMode) {
                         foregroundDrawable.setColorFilter(mUiController.getUiColor(), PorterDuff.Mode.SRC_IN);
                     }
-                } else {
-                    foregroundDrawable = mForegroundTabDrawable;
-                }
-                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
-                    holder.layout.setBackground(foregroundDrawable);
-                } else {
-                    //noinspection deprecation
-                    holder.layout.setBackgroundDrawable(foregroundDrawable);
                 }
                 if (!mIsIncognito && mColorMode) {
                     mUiController.changeToolbarBackground(favicon, foregroundDrawable);
                 }
+
+                TextViewCompat.setTextAppearance(holder.txtTitle, R.style.boldText);
+                if (!mDrawerTabs) {
+                    DrawableUtils.setBackground(holder.layout, foregroundDrawable);
+                }
                 holder.favicon.setImageBitmap(favicon);
             } else {
                 TextViewCompat.setTextAppearance(holder.txtTitle, R.style.normalText);
-                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
+                if (!mDrawerTabs) {
-                    holder.layout.setBackground(mBackgroundTabDrawable);
+                    DrawableUtils.setBackground(holder.layout, mBackgroundTabDrawable);
-                } else {
-                    //noinspection deprecation
-                    holder.layout.setBackgroundDrawable(mBackgroundTabDrawable);
                 }
                 holder.favicon.setImageBitmap(getDesaturatedBitmap(favicon));
             }
+
+            if (mDrawerTabs) {
+                BackgroundDrawable verticalBackground = (BackgroundDrawable) holder.layout.getBackground();
+                verticalBackground.setCrossFadeEnabled(false);
+                if (web.isForegroundTab()) {
+                    verticalBackground.startTransition(200);
+                } else {
+                    verticalBackground.reverseTransition(200);
+                }
+            }
         }
 
         @Override
@@ -403,7 +411,6 @@ public class TabsFragment extends Fragment implements View.OnClickListener, View
             @Override
             public void onClick(View v) {
                 if (v == exitButton) {
-                    // Close tab
                     mBus.post(new TabEvents.CloseTab(getAdapterPosition()));
                 }
                 if (v == layout) {

app/src/main/java/acr/browser/lightning/utils/ThemeUtils.java

@@ -40,7 +40,7 @@ public class ThemeUtils {
         return getColor(context, R.attr.colorAccent);
     }
 
-    private static int getColor(@NonNull Context context, @AttrRes int resource) {
+    public static int getColor(@NonNull Context context, @AttrRes int resource) {
         TypedArray a = context.obtainStyledAttributes(sTypedValue.data, new int[]{resource});
         int color = a.getColor(0, 0);
         a.recycle();

app/src/main/java/acr/browser/lightning/view/BackgroundDrawable.java

@@ -0,0 +1,42 @@
+package acr.browser.lightning.view;
+
+import android.content.Context;
+import android.graphics.drawable.ColorDrawable;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.TransitionDrawable;
+import android.support.v4.content.ContextCompat;
+
+import acr.browser.lightning.R;
+import acr.browser.lightning.utils.ThemeUtils;
+
+public class BackgroundDrawable extends TransitionDrawable {
+
+    private boolean mSelected;
+
+    /**
+     * Create a new transition drawable with the specified list of layers. At least
+     * 2 layers are required for this drawable to work properly.
+     */
+    public BackgroundDrawable(Context context) {
+        super(new Drawable[]{new ColorDrawable(ContextCompat.getColor(context, R.color.transparent)),
+            new ColorDrawable(ThemeUtils.getColor(context, R.attr.selectedBackground))});
+    }
+
+
+    @Override
+    public void startTransition(int durationMillis) {
+        if (!mSelected) {
+            super.startTransition(durationMillis);
+        }
+        mSelected = true;
+    }
+
+    @Override
+    public void reverseTransition(int duration) {
+        if (mSelected) {
+            super.reverseTransition(duration);
+        }
+        mSelected = false;
+    }
+
+}

app/src/main/res/drawable/tab_vertical_background.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<transition xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- The drawables used here can be solid colors, gradients, shapes, images, etc. -->
+    <item android:drawable="@color/transparent"/>
+    <item android:drawable="?selectedBackground"/>
+</transition>

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

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout android:id="@+id/tab_item_background"
+<LinearLayout
-              xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/tab_item_background"
-              android:layout_width="match_parent"
+    xmlns:android="http://schemas.android.com/apk/res/android"
-              android:layout_height="56dp"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
-              android:background="?attr/listBackground"
+    android:layout_width="match_parent"
-              android:clickable="true"
+    android:layout_height="56dp"
-              android:gravity="center_vertical"
+    android:clickable="true"
-              android:orientation="horizontal"
+    android:gravity="center_vertical"
-              android:weightSum="1"
+    android:orientation="horizontal"
-              xmlns:app="http://schemas.android.com/apk/res-auto">
+    android:weightSum="1">
 
     <ImageView
         android:id="@+id/faviconTab"

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

@@ -1,15 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout
-              xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/tab_item_background"
-              android:id="@+id/tab_item_background"
+    xmlns:android="http://schemas.android.com/apk/res/android"
-              android:layout_width="175dp"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
-              android:layout_height="match_parent"
+    android:layout_width="175dp"
-              android:gravity="center_vertical"
+    android:layout_height="match_parent"
-              android:orientation="horizontal"
+    android:clickable="false"
-              android:clickable="false"
+    android:gravity="center_vertical"
-              android:paddingLeft="10dp"
+    android:orientation="horizontal"
-              android:paddingRight="10dp"
+    android:paddingLeft="10dp"
-              android:weightSum="1">
+    android:paddingRight="10dp"
+    android:weightSum="1">
 
     <ImageView
         android:id="@+id/faviconTab"
@@ -18,7 +19,7 @@
         android:layout_marginLeft="7dp"
         android:layout_marginRight="7dp"
         android:contentDescription="Favicon"
-        android:gravity="center_vertical" />
+        android:gravity="center_vertical"/>
 
     <TextView
         android:id="@+id/textTab"
@@ -31,7 +32,7 @@
         android:maxLines="1"
         android:minHeight="?android:attr/listPreferredItemHeightSmall"
         android:singleLine="true"
-        android:textAppearance="?android:attr/textAppearanceSmall" />
+        android:textAppearance="?android:attr/textAppearanceSmall"/>
 
     <FrameLayout
         android:id="@+id/deleteAction"
@@ -47,7 +48,7 @@
             android:layout_height="24dp"
             android:layout_gravity="center"
             android:contentDescription="Delete Tab"
-            app:srcCompat="@drawable/ic_action_delete" />
+            app:srcCompat="@drawable/ic_action_delete"/>
     </FrameLayout>
 
 </LinearLayout>

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

@@ -49,7 +49,7 @@
         <item name="drawerBackground">@color/drawer_background</item>
         <item name="dividerColor">@color/divider_light</item>
 
-        <item name="selectedBackground">@drawable/list_bg_light</item>
+        <item name="selectedBackground">@color/selected_light</item>
 
         <item name="windowNoTitle">true</item>
         <item name="windowActionBar">false</item>
@@ -72,7 +72,7 @@
         <item name="drawerBackground">@color/drawer_background_dark</item>
         <item name="dividerColor">@color/divider_dark</item>
 
-        <item name="selectedBackground">@drawable/list_bg_dark</item>
+        <item name="selectedBackground">@color/selected_dark</item>
 
         <item name="windowNoTitle">true</item>
         <item name="windowActionBar">false</item>
@@ -94,7 +94,7 @@
         <item name="drawerBackground">@color/black</item>
         <item name="dividerColor">@color/black</item>
 
-        <item name="selectedBackground">@drawable/list_bg_dark</item>
+        <item name="selectedBackground">@color/selected_dark</item>
 
         <item name="windowNoTitle">true</item>
         <item name="windowActionBar">false</item>