Merge pull request #50 from Kaopiz/feature/animate-background-change

Feature/animate background change
Kaopiz · Mar 17, 2016 · c02bdd9 · c02bdd9
2 parents addbb3d + 378c403
commit c02bdd9
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 15 deletions.
diff --git a/demo/src/main/res/layout/fragment_sample.xml b/demo/src/main/res/layout/fragment_sample.xml
@@ -26,6 +26,7 @@
                 segmentedgroup:sc_border_width="1dp"
                 segmentedgroup:sc_corner_radius="10dp"
                 segmentedgroup:sc_tint_color="#FFEB3B"
+                segmentedgroup:sc_unchecked_tint_color="#ff0000"
                 segmentedgroup:sc_checked_text_color="#7C4DFF">
 
                 <RadioButton
@@ -51,7 +52,6 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:minHeight="80dp"
-            android:background="#455A64"
             android:gravity="center">
 
             <info.hoang8f.android.segmented.SegmentedGroup

diff --git a/library/src/main/java/info/hoang8f/android/segmented/SegmentedGroup.java b/library/src/main/java/info/hoang8f/android/segmented/SegmentedGroup.java
@@ -7,15 +7,20 @@
 import android.graphics.Color;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.GradientDrawable;
+import android.graphics.drawable.LayerDrawable;
 import android.graphics.drawable.StateListDrawable;
+import android.graphics.drawable.TransitionDrawable;
 import android.os.Build;
 import android.util.AttributeSet;
+import android.util.StateSet;
 import android.util.TypedValue;
 import android.view.View;
 import android.widget.Button;
 import android.widget.LinearLayout;
 import android.widget.RadioGroup;
 
+import java.util.HashMap;
+
 public class SegmentedGroup extends RadioGroup {
 
     private int mMarginDp;
@@ -25,6 +30,9 @@ public class SegmentedGroup extends RadioGroup {
     private int mCheckedTextColor = Color.WHITE;
     private LayoutSelector mLayoutSelector;
     private Float mCornerRadius;
+    private OnCheckedChangeListener mCheckedChangeListener;
+    private HashMap<Integer, TransitionDrawable> mDrawableMap;
+    private int mLastCheckId;
 
     public SegmentedGroup(Context context) {
         super(context);
@@ -103,6 +111,7 @@ public void setUnCheckedTintColor(int unCheckedTintColor, int unCheckedTextColor
     }
 
     public void updateBackground() {
+        mDrawableMap = new HashMap<>();
         int count = super.getChildCount();
         for (int i = 0; i < count; i++) {
             View child = getChildAt(i);
@@ -128,10 +137,9 @@ private void updateBackground(View view) {
         int unchecked = mLayoutSelector.getUnselected();
         //Set text color
         ColorStateList colorStateList = new ColorStateList(new int[][]{
-                {android.R.attr.state_pressed},
-                {-android.R.attr.state_pressed, -android.R.attr.state_checked},
-                {-android.R.attr.state_pressed, android.R.attr.state_checked}},
-                new int[]{Color.GRAY, mTintColor, mCheckedTextColor});
+                {-android.R.attr.state_checked},
+                {android.R.attr.state_checked}},
+                new int[]{mTintColor, mCheckedTextColor});
         ((Button) view).setTextColor(colorStateList);
 
         //Redraw with tint color
@@ -145,26 +153,60 @@ private void updateBackground(View view) {
         ((GradientDrawable) checkedDrawable).setCornerRadii(mLayoutSelector.getChildRadii(view));
         ((GradientDrawable) uncheckedDrawable).setCornerRadii(mLayoutSelector.getChildRadii(view));
 
-        //Create drawable
+        GradientDrawable maskDrawable = (GradientDrawable) resources.getDrawable(unchecked).mutate();
+        maskDrawable.setStroke(mMarginDp, mTintColor);
+        maskDrawable.setColor(mUnCheckedTintColor);
+        maskDrawable.setCornerRadii(mLayoutSelector.getChildRadii(view));
+        int maskColor = Color.argb(50, Color.red(mTintColor), Color.green(mTintColor), Color.blue(mTintColor));
+        maskDrawable.setColor(maskColor);
+        LayerDrawable pressedDrawable = new LayerDrawable(new Drawable[] {uncheckedDrawable, maskDrawable});
+
+        Drawable[] drawables = {uncheckedDrawable, checkedDrawable};
+        TransitionDrawable transitionDrawable = new TransitionDrawable(drawables);
+
         StateListDrawable stateListDrawable = new StateListDrawable();
-        stateListDrawable.addState(new int[]{-android.R.attr.state_checked}, uncheckedDrawable);
-        stateListDrawable.addState(new int[]{android.R.attr.state_checked}, checkedDrawable);
+        stateListDrawable.addState(new int[] {-android.R.attr.state_checked, android.R.attr.state_pressed}, pressedDrawable);
+        stateListDrawable.addState(StateSet.WILD_CARD, transitionDrawable);
+
+        mDrawableMap.put(view.getId(), transitionDrawable);
 
         //Set button background
         if (Build.VERSION.SDK_INT >= 16) {
             view.setBackground(stateListDrawable);
         } else {
             view.setBackgroundDrawable(stateListDrawable);
         }
+
+        super.setOnCheckedChangeListener(new OnCheckedChangeListener() {
+            @Override
+            public void onCheckedChanged(RadioGroup group, int checkedId) {
+                TransitionDrawable current = mDrawableMap.get(checkedId);
+                current.reverseTransition(200);
+                if (mLastCheckId != 0) {
+                    TransitionDrawable last = mDrawableMap.get(mLastCheckId);
+                    last.reverseTransition(200);
+                }
+                mLastCheckId = checkedId;
+
+                if (mCheckedChangeListener != null) {
+                    mCheckedChangeListener.onCheckedChanged(group, checkedId);
+                }
+            }
+        });
+    }
+
+    @Override
+    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
+        mCheckedChangeListener = listener;
     }
 
     /*
-     * This class is used to provide the proper layout based on the view.
-     * Also provides the proper radius for corners.
-     * The layout is the same for each selected left/top middle or right/bottom button.
-     * float tables for setting the radius via Gradient.setCornerRadii are used instead
-     * of multiple xml drawables.
-     */
+         * This class is used to provide the proper layout based on the view.
+         * Also provides the proper radius for corners.
+         * The layout is the same for each selected left/top middle or right/bottom button.
+         * float tables for setting the radius via Gradient.setCornerRadii are used instead
+         * of multiple xml drawables.
+         */
     private class LayoutSelector {
 
         private int children;

diff --git a/library/src/main/res/values/colors.xml b/library/src/main/res/values/colors.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="radio_button_selected_color">#ff33b5e5</color>
-    <color name="radio_button_unselected_color">@android:color/transparent</color>
+    <color name="radio_button_unselected_color">#e0e0e0</color>
 </resources>