Fix text color not working issue with PinEntryEditText.

Add support for pin background drawable in PinEntryEditText.
alphamu · Apr 28, 2016 · 7b31d1c · 7b31d1c
1 parent 5a0d645
commit 7b31d1c
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 24 deletions.
diff --git a/README.MD b/README.MD
@@ -35,13 +35,22 @@ details. Read more about [AnimatedEditText](https://medium.com/@ali.muzaffar),
 Then simply add the following to your dependencies.
 
     dependencies {
-        compile 'com.alimuzaffar.lib:animated-edit-text:0.0.6'
+        compile 'com.alimuzaffar.lib:animated-edit-text:0.0.7'
     }
 
 ##STEP-2
 
 ### Setup AnimatedTextView and PinEntryView in your layout
 
+        <com.alimuzaffar.lib.widgets.AnimatedEditText
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:hint="Animate pop in"
+            android:inputType="textNoSuggestions" //recommended when typing text to avoid autocomplete.
+            app:animationType="popIn|fromBottom|fromRight|fromMiddle|none" //Optional, default popIn
+            app:animateCursor="true|false" //Optional, default true
+            app:animateTextClear="true|false" /> //Optional, default true
+
         <com.alimuzaffar.lib.widgets.PinEntryEditText
             android:id="@+id/txt_pin_entry"
             android:layout_width="match_parent"
@@ -52,18 +61,14 @@ Then simply add the following to your dependencies.
             android:maxLength="4" //required
             android:textIsSelectable="false" //recommended
             android:textSize="20sp"
+            app:pinBackgroundDrawable="@drawable/bg_pin" //optional, use your own pin char background
             app:pinAnimationType="popIn|fromBottom|none" //optional, default popIn
 			app:pinCharacterMask="*" //optional, default bullet
+			app:pinTextBottomPadding="@dimen/space" //optional, space between character and bottom line.
+			app:pinLineStroke="2dp" //the stroke (height) of the bottom line by default.
+			app:pinLineStrokeSelected="4dp" //the stroke (height) of the bottom line when field is focused.
             app:pinLineColors="@color/pin_line_colors" /> //optional
 
-        <com.alimuzaffar.lib.widgets.AnimatedEditText
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:hint="Animate pop in"
-            android:inputType="textNoSuggestions" //recommended when typing text to avoid autocomplete.
-            app:animationType="popIn|fromBottom|fromRight|fromMiddle|none" //Optional, default popIn
-            app:animateCursor="true|false" //Optional, default true
-            app:animateTextClear="true|false" /> //Optional, default true
 
 ### Listen for pin entry and setup TextDrawable in code
 
@@ -87,7 +92,44 @@ Then simply add the following to your dependencies.
             regular.setCompoundDrawables(new TextDrawable(regular, "+61 "), null, new TextDrawable(regular, "\u2605"), null);
         }
 
-## Supported Animations
+## Use your own Drawable as a pin character background
+
+You can use your own drawable for the pin entry background by specifying the `app:pinBackgroundDrawable`
+attribute in the xml. If you want to specify the empty and filled states using your background drawable
+you can set the `textColor` to transparent and setup your drawable as follows:
+
+        <selector xmlns:android="http://schemas.android.com/apk/res/android">
+            <!-- Space contains text -->
+            <item android:state_focused="true" android:state_checked="true">
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/holo_green_light"/>
+                </shape>
+            </item>
+            <!--Space is the next space for character input -->
+            <item android:state_focused="true" android:state_selected="true">
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/holo_blue_bright"/>
+                </shape>
+            </item>
+            <!-- PinEntryEditText is focused -->
+            <item android:state_focused="true">
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/white"/>
+                </shape>
+            </item>
+            <!-- PinEntryEditText is not focused -->
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/darker_gray"/>
+                </shape>
+            </item>
+        </selector>
+
+Note that in this setup, the size of the drawable will be determined by the `textSize` and and the `pinTextBottomPadding`
+which is the space between the character and the line below (or the bottom of the `pinBackgroundDrawable`).
+For good measure, set `pinAnimationType` to none as well.
+
+## Effects :
 
 1. PopIn (default)
 2. Bottom Up

diff --git a/animated-edit-text/build.gradle b/animated-edit-text/build.gradle
@@ -12,7 +12,7 @@ ext {
     siteUrl = 'https://github.com/alphamu/AnimatedEditText'
     gitUrl = 'https://github.com/alphamu/AnimatedEditText.git'
 
-    libraryVersion = '0.0.6'
+    libraryVersion = '0.0.7'
 
     developerId = 'alphamu'
     developerName = 'Ali Muzaffar'
@@ -25,13 +25,13 @@ ext {
 
 android {
     compileSdkVersion 23
-    buildToolsVersion "23.0.2"
+    buildToolsVersion "23.0.3"
 
     defaultConfig {
         minSdkVersion 15
         targetSdkVersion 23
         versionCode 1
-        versionName '0.0.6'
+        versionName '0.0.7'
     }
     buildTypes {
         release {
@@ -44,7 +44,7 @@ android {
 dependencies {
     compile fileTree(dir: 'libs', include: ['*.jar'])
     testCompile 'junit:junit:4.12'
-    compile 'com.android.support:appcompat-v7:23.2.1'
+    compile 'com.android.support:appcompat-v7:23.3.0'
 }
 
 apply from: 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/installv1.gradle'

diff --git a/animated-edit-text/src/main/java/com/alimuzaffar/lib/widgets/PinEntryEditText.java b/animated-edit-text/src/main/java/com/alimuzaffar/lib/widgets/PinEntryEditText.java
@@ -1,12 +1,12 @@
 /**
  * Copyright 2016 Ali Muzaffar
- * <p>
+ * <p/>
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * <p>
+ * <p/>
  * http://www.apache.org/licenses/LICENSE-2.0
- * <p>
+ * <p/>
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -25,7 +25,9 @@
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
+import android.graphics.Rect;
 import android.graphics.RectF;
+import android.graphics.drawable.Drawable;
 import android.os.Build;
 import android.support.v4.content.ContextCompat;
 import android.text.InputType;
@@ -53,7 +55,10 @@ public class PinEntryEditText extends EditText {
     private int mMaxLength = 4;
     private RectF[] mLineCoords;
     private float[] mCharBottom;
+    private Paint mCharPaint;
     private Paint mLastCharPaint;
+    private Drawable mPinBackground;
+    private Rect mTextHeight = new Rect();
 
     private OnClickListener mClickListener;
     private OnPinEnteredListener mOnPinEnteredListener = null;
@@ -62,6 +67,7 @@ public class PinEntryEditText extends EditText {
     private float mLineStrokeSelected = 2; //2dp by default
     private Paint mLinesPaint;
     private boolean mAnimate = false;
+    private ColorStateList mOriginalTextColors;
     int[][] mStates = new int[][]{
             new int[]{android.R.attr.state_selected}, // selected
             new int[]{android.R.attr.state_focused}, // focused
@@ -113,6 +119,7 @@ private void init(Context context, AttributeSet attrs) {
             mLineStrokeSelected = ta.getDimension(R.styleable.PinEntryEditText_pinLineStrokeSelected, mLineStrokeSelected);
             mSpace = ta.getDimension(R.styleable.PinEntryEditText_pinCharacterSpacing, mSpace);
             mTextBottomPadding = ta.getDimension(R.styleable.PinEntryEditText_pinTextBottomPadding, mTextBottomPadding);
+            mPinBackground = ta.getDrawable(R.styleable.PinEntryEditText_pinBackgroundDrawable);
             ColorStateList colors = ta.getColorStateList(R.styleable.PinEntryEditText_pinLineColors);
             if (colors != null) {
                 mColorStates = colors;
@@ -121,6 +128,8 @@ private void init(Context context, AttributeSet attrs) {
             ta.recycle();
         }
 
+        mCharPaint = new Paint(getPaint());
+        mLastCharPaint = new Paint(getPaint());
         mLinesPaint = new Paint(getPaint());
         mLinesPaint.setStrokeWidth(mLineStroke);
 
@@ -188,11 +197,18 @@ public boolean onLongClick(View v) {
             mMaskChars = getMaskChars();
         }
 
+        //Height of the characters, used if there is a background drawable
+        getPaint().getTextBounds("|", 0, 1, mTextHeight);
     }
 
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         super.onSizeChanged(w, h, oldw, oldh);
+        mOriginalTextColors = getTextColors();
+        if (mOriginalTextColors != null) {
+            mLastCharPaint.setColor(mOriginalTextColors.getDefaultColor());
+            mCharPaint.setColor(mOriginalTextColors.getDefaultColor());
+        }
         int availableWidth = getWidth() - getPaddingRight() - getPaddingLeft();
         if (mSpace < 0) {
             mCharSize = (availableWidth / (mNumChars * 2 - 1));
@@ -205,14 +221,16 @@ protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         int bottom = getHeight() - getPaddingBottom();
         for (int i = 0; i < mNumChars; i++) {
             mLineCoords[i] = new RectF(startX, bottom, startX + mCharSize, bottom);
+            if (mPinBackground != null) {
+                mLineCoords[i].top -= mTextHeight.height() + mTextBottomPadding * 2;
+            }
             if (mSpace < 0) {
                 startX += mCharSize * 2;
             } else {
                 startX += mCharSize + mSpace;
             }
             mCharBottom[i] = mLineCoords[i].bottom - mTextBottomPadding;
         }
-        mLastCharPaint = new Paint(getPaint());
     }
 
     @Override
@@ -234,16 +252,25 @@ protected void onDraw(Canvas canvas) {
         getPaint().getTextWidths(text, 0, textLength, textWidths);
 
         for (int i = 0; i < mNumChars; i++) {
+            //If a background for the pin characters is specified, it should be behind the characters.
+            if (mPinBackground != null) {
+                updateDrawableState(i < textLength, i == textLength);
+                mPinBackground.setBounds((int) mLineCoords[i].left, (int) mLineCoords[i].top, (int) mLineCoords[i].right, (int) mLineCoords[i].bottom);
+                mPinBackground.draw(canvas);
+            }
             if (textLength > i) {
                 float middle = mLineCoords[i].left + mCharSize / 2;
                 if (!mAnimate || i != textLength - 1) {
-                    canvas.drawText(text, i, i + 1, middle - textWidths[i] / 2, mCharBottom[i], getPaint());
+                    canvas.drawText(text, i, i + 1, middle - textWidths[i] / 2, mCharBottom[i], mCharPaint);
                 } else {
                     canvas.drawText(text, i, i + 1, middle - textWidths[i] / 2, mCharBottom[i], mLastCharPaint);
                 }
             }
-            updateColorForLines(i <= textLength);
-            canvas.drawLine(mLineCoords[i].left, mLineCoords[i].top, mLineCoords[i].right, mLineCoords[i].bottom, mLinesPaint);
+            //The lines should be in front of the text (because that's how I want it).
+            if (mPinBackground == null) {
+                updateColorForLines(i <= textLength);
+                canvas.drawLine(mLineCoords[i].left, mLineCoords[i].top, mLineCoords[i].right, mLineCoords[i].bottom, mLinesPaint);
+            }
         }
     }
 
@@ -292,6 +319,19 @@ private void updateColorForLines(boolean hasTextOrIsNext) {
         }
     }
 
+    private void updateDrawableState(boolean hasText, boolean isNext) {
+        if (isFocused()) {
+            mPinBackground.setState(new int[]{android.R.attr.state_focused});
+            if (isNext) {
+                mPinBackground.setState(new int[]{android.R.attr.state_focused, android.R.attr.state_selected});
+            } else if (hasText) {
+                mPinBackground.setState(new int[]{android.R.attr.state_focused, android.R.attr.state_checked});
+            }
+        } else {
+            mPinBackground.setState(new int[]{-android.R.attr.state_focused});
+        }
+    }
+
     public void focus() {
         requestFocus();
 

diff --git a/animated-edit-text/src/main/res/values/attrs.xml b/animated-edit-text/src/main/res/values/attrs.xml
@@ -25,5 +25,6 @@
         <attr name="pinCharacterSpacing" format="dimension" />
         <attr name="pinTextBottomPadding" format="dimension" />
         <attr name="pinLineColors" format="color" />
+        <attr name="pinBackgroundDrawable" format="reference" />
     </declare-styleable>
 </resources>
diff --git a/build.gradle b/build.gradle
@@ -5,7 +5,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:1.5.0'
+        classpath 'com.android.tools.build:gradle:2.0.0'
         classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.6'
         classpath 'com.github.dcendents:android-maven-gradle-plugin:1.3'
 

diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
-#Wed Oct 21 11:34:03 PDT 2015
+#Sun Apr 17 11:55:01 AEST 2016
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.10-all.zip
diff --git a/sample-app/src/main/res/drawable/bg_pin.xml b/sample-app/src/main/res/drawable/bg_pin.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- Space contains text -->
+    <item android:state_checked="true" android:state_focused="true">
+        <shape android:shape="rectangle">
+            <stroke android:width="2dp" android:color="@android:color/holo_green_light" />
+            <solid android:color="#CCCCCC" />
+        </shape>
+    </item>
+    <!--Space is the next space for character input -->
+    <item android:state_focused="true" android:state_selected="true">
+        <shape android:shape="rectangle">
+            <stroke android:width="2dp" android:color="@android:color/holo_green_light" />
+            <solid android:color="@android:color/white" />
+        </shape>
+    </item>
+    <!-- PinEntryEditText is focused -->
+    <item android:state_focused="true">
+        <shape android:shape="rectangle">
+            <stroke android:width="2dp" android:color="#CCCCCC" />
+            <solid android:color="@android:color/white" />
+        </shape>
+    </item>
+    <!-- PinEntryEditText is not focused -->
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@android:color/darker_gray" />
+        </shape>
+    </item>
+
+</selector>
diff --git a/sample-app/src/main/res/layout/activity_edit_text.xml b/sample-app/src/main/res/layout/activity_edit_text.xml
@@ -25,6 +25,7 @@
             android:textIsSelectable="false"
             android:textSize="20sp"
             android:visibility="visible"
+            app:pinBackgroundDrawable="@drawable/bg_pin"
             app:pinLineColors="@color/pin_line_colors" />
 
         <com.alimuzaffar.lib.widgets.AnimatedEditText