Implement field background drawable attribute

fahim44 · Feb 25, 2020 · 3c33baa · 3c33baa
1 parent d252a2d
commit 3c33baa
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -104,4 +104,13 @@ PinEntryEditText support all normal editText attributes, It also supports follow
 
 <!-- box border width, default value is 2dp -->
 <attr name="lineWidth" format="dimension" />
+
+<!-- unfocused state field item background, default to box -->
+<attr name="unFocusedStateBackgroundDrawable" format="reference|color" />
+
+<!-- focused state field item background, default to box -->
+<attr name="focusedStateBackgroundDrawable" format="reference|color" />
+
+<!-- selected state field item background, default to box -->
+<attr name="selectedStateBackgroundDrawable" format="reference|color" />
  ```
diff --git a/app/src/main/res/drawable/bottom_focused.xml b/app/src/main/res/drawable/bottom_focused.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:gravity="bottom">
+        <shape android:shape="rectangle">
+            <size android:height="5dp" />
+            <solid android:color="@android:color/holo_blue_dark" />
+            <corners android:radius="20dp"/>
+        </shape>
+    </item>
+</layer-list>
diff --git a/app/src/main/res/drawable/bottom_selected.xml b/app/src/main/res/drawable/bottom_selected.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:gravity="bottom">
+        <shape android:shape="rectangle">
+            <size android:height="5dp" />
+            <solid android:color="@color/colorAccent" />
+            <corners android:radius="20dp"/>
+        </shape>
+    </item>
+</layer-list>
diff --git a/app/src/main/res/drawable/bottom_unfocused.xml b/app/src/main/res/drawable/bottom_unfocused.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:gravity="bottom">
+        <shape android:shape="rectangle">
+            <size android:height="5dp" />
+            <solid android:color="@android:color/darker_gray" />
+            <corners android:radius="20dp"/>
+        </shape>
+    </item>
+</layer-list>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -28,7 +28,10 @@
         app:lineCornerRadius="4dp"
         app:lineWidth="2dp"
         app:selectedStateLineColor="@android:color/holo_red_dark"
-        app:unFocusedStateLineColor="@android:color/darker_gray" />
+        app:unFocusedStateLineColor="@android:color/darker_gray"
+        app:unFocusedStateBackgroundDrawable="@drawable/bottom_unfocused"
+        app:focusedStateBackgroundDrawable="@drawable/bottom_focused"
+        app:selectedStateBackgroundDrawable="@drawable/bottom_selected"/>
 
     <EditText
         android:id="@+id/dummyEditText"

diff --git a/pinentryedittext/src/main/java/com/lamonjush/pinentryedittext/PinEntryEditText.java b/pinentryedittext/src/main/java/com/lamonjush/pinentryedittext/PinEntryEditText.java
@@ -36,6 +36,8 @@ public class PinEntryEditText extends AppCompatEditText {
 
     private int strokeColor = Color.GRAY;
 
+    private Drawable focusedStateDrawable, unfocusedStateDrawable, selectedStateDrawable;
+
     int[][] mStates = new int[][]{
             new int[]{android.R.attr.state_selected}, // selected
             new int[]{android.R.attr.state_focused}, // focused
@@ -81,6 +83,9 @@ private void init(Context context, AttributeSet attrs) {
             backgroundShape.setFillColor(a.getColor(R.styleable.PinEntryEditText_innerColor, Color.TRANSPARENT));
             backgroundShape.setCornerRadius(Utils.convertDpToPixel(a.getDimension(R.styleable.PinEntryEditText_lineCornerRadius, 4), getContext()));
             backgroundShape.setStrokeWidth((int) Utils.convertDpToPixel(a.getDimension(R.styleable.PinEntryEditText_lineWidth, 2), getContext()));
+
+
+            setBackgroundDrawable(a);
             getPaint().setColor(getCurrentTextColor());
         } finally {
             a.recycle();
@@ -178,6 +183,12 @@ public void afterTextChanged(Editable editable) {
 
     }
 
+    private void setBackgroundDrawable(TypedArray a) {
+        unfocusedStateDrawable = a.getDrawable(R.styleable.PinEntryEditText_unFocusedStateBackgroundDrawable);
+        focusedStateDrawable = a.getDrawable(R.styleable.PinEntryEditText_focusedStateBackgroundDrawable);
+        selectedStateDrawable = a.getDrawable(R.styleable.PinEntryEditText_selectedStateBackgroundDrawable);
+    }
+
     @Override
     protected void onDraw(Canvas canvas) {
         //super.onDraw(canvas);
@@ -205,9 +216,11 @@ protected void onDraw(Canvas canvas) {
 
         for (int i = 0; i < mNumChars; i++) {
 
-            updateColorForLines(i == textLength);
-
-            Drawable drawable = backgroundShape.getDrawable(strokeColor);
+            Drawable drawable = getDrawable(i == textLength);
+            if (drawable == null) {
+                updateColorForLines(i == textLength);
+                drawable = backgroundShape.getDrawable(strokeColor);
+            }
             drawable.setBounds(startX, top, (int) (startX + mCharSize), bottom);
             drawable.draw(canvas);
 
@@ -260,5 +273,18 @@ private void updateColorForLines(boolean next) {
         }
     }
 
+    private Drawable getDrawable(boolean next) {
+        if (isFocused()) {
+            Drawable drawable;
+            drawable = focusedStateDrawable;
+            if (next) {
+                drawable = selectedStateDrawable;
+            }
+            return drawable;
+        } else {
+            return unfocusedStateDrawable;
+        }
+    }
+
 }
 
diff --git a/pinentryedittext/src/main/res/values/attrs.xml b/pinentryedittext/src/main/res/values/attrs.xml
@@ -7,5 +7,8 @@
         <attr name="innerColor" format="color" />
         <attr name="lineCornerRadius" format="dimension" />
         <attr name="lineWidth" format="dimension" />
+        <attr name="unFocusedStateBackgroundDrawable" format="reference|color" />
+        <attr name="focusedStateBackgroundDrawable" format="reference|color" />
+        <attr name="selectedStateBackgroundDrawable" format="reference|color" />
     </declare-styleable>
 </resources>