✨ Added support for EditText hint

Author: swapnil1104

app/src/main/java/com/broooapps/otpedittext/MainActivity.java

@@ -39,6 +39,7 @@ public void onComplete(String value) {
     public void displayText(View view) {
         String otpValue = otpEditText.getOtpValue();
         if (otpValue != null) {
+            otpEditText.triggerErrorAnimation();
             textDisplay.setText("Entered Value: " + otpEditText.getOtpValue());
         }
     }

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

@@ -25,7 +25,7 @@
         android:digits="0123456789"
         android:maxLength="6"
         android:padding="32dp"
-        android:hint="hi"
+        android:hint="126786786"
         android:textSize="30sp"
         app:layout_constraintTop_toBottomOf="@+id/textView"
         app:oev_box_style="@string/style_rounded_underline"

images/hint.gif

@@ -4,14 +4,17 @@
  * Created by Swapnil Tiwari on 2019-05-07.
  * swapniltiwari775@gmail.com
  */
+
 import android.content.Context;
 import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 
+import androidx.annotation.ColorRes;
 import androidx.annotation.Nullable;
 import androidx.core.content.ContextCompat;
 import androidx.appcompat.widget.AppCompatEditText;
+
 import android.text.Editable;
 import android.text.TextWatcher;
 import android.util.AttributeSet;
@@ -29,6 +32,7 @@ public class OtpEditText extends AppCompatEditText implements TextWatcher {
     private Paint mLinesPaint;
     private Paint mStrokePaint;
     private Paint mTextPaint;
+    private Paint mHintPaint;
 
     private boolean mMaskInput;
 
@@ -37,6 +41,7 @@ public class OtpEditText extends AppCompatEditText implements TextWatcher {
     private int mPrimaryColor;
     private int mSecondaryColor;
     private int mTextColor;
+    private int mHintTextColor;
 
     private float mLineStrokeSelected = 2; //2dp by default
     private float mLineStroke = 1; //1dp by default
@@ -47,12 +52,16 @@ public class OtpEditText extends AppCompatEditText implements TextWatcher {
 
     private String mBoxStyle;
     private String mMaskCharacter = "*";
+    private String mHintText = "";
 
     private final String ROUNDED_BOX = "rounded_box";
     private final String UNDERLINE = "underline";
     private final String SQUARE_BOX = "square_box";
     private final String ROUNDED_UNDERLINE = "rounded_underline";
 
+    float[] textWidths;
+    float[] hintWidth = new float[1];
+
     private OnCompleteListener completeListener;
 
     public OtpEditText(Context context) {
@@ -79,6 +88,9 @@ private void init(Context context, @Nullable AttributeSet attrs) {
         mTextPaint = getPaint();
         mTextPaint.setColor(mTextColor);
 
+        mHintPaint = new Paint(getPaint());
+        mHintPaint.setColor(mHintTextColor);
+
         // Set the TextWatcher
         this.addTextChangedListener(this);
         float multi = context.getResources().getDisplayMetrics().density;
@@ -126,6 +138,8 @@ private void getAttrsFromTypedArray(AttributeSet attributeSet) {
         final TypedArray a = getContext().obtainStyledAttributes(attributeSet, R.styleable.OtpEditText, defStyleAttr, 0);
 
         mMaxLength = attributeSet.getAttributeIntValue(XML_NAMESPACE_ANDROID, "maxLength", 6);
+        mHintText = attributeSet.getAttributeValue(XML_NAMESPACE_ANDROID, "hint");
+        mHintTextColor = attributeSet.getAttributeIntValue(XML_NAMESPACE_ANDROID, "textColorHint", getResources().getColor(R.color.hint_color));
         mPrimaryColor = a.getColor(R.styleable.OtpEditText_oev_primary_color, getResources().getColor(android.R.color.holo_red_dark));
         mSecondaryColor = a.getColor(R.styleable.OtpEditText_oev_secondary_color, getResources().getColor(R.color.light_gray));
         mTextColor = a.getColor(R.styleable.OtpEditText_oev_text_color, getResources().getColor(android.R.color.black));
@@ -174,13 +188,17 @@ private void getAttrsFromTypedArray(AttributeSet attributeSet) {
     @Nullable
     public String getOtpValue() {
         if (String.valueOf(getText()).length() != mMaxLength) {
-            this.startAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.shake));
+            triggerErrorAnimation();
             return null;
         } else {
             return String.valueOf(getText());
         }
     }
 
+    public void triggerErrorAnimation() {
+        this.startAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.shake));
+    }
+
     @Override
     public void setCustomSelectionActionModeCallback(ActionMode.Callback actionModeCallback) {
         throw new RuntimeException("setCustomSelectionActionModeCallback() not supported.");
@@ -198,13 +216,32 @@ protected void onDraw(Canvas canvas) {
         mLineSpacing = (float) (getHeight() * .6);
 
         int startX = getPaddingLeft();
+        int hintStartX = getPaddingLeft();
         int bottom = getHeight() - getPaddingBottom();
         int top = getPaddingTop();
 
         //Text Width
         Editable text = getText();
+
+
         int textLength = text.length();
-        float[] textWidths = new float[textLength];
+        textWidths = new float[textLength];
+
+
+        if (text.length() == 0 && !mHintText.isEmpty()) {
+            getPaint().getTextWidths("1", 0, 1, hintWidth);
+            for (int i = 0; i < mNumChars && i < mHintText.length(); i++) {
+                float middle = hintStartX + mCharSize / 2;
+                canvas.drawText(mHintText, i, i + 1, middle - hintWidth[0] / 2, mLineSpacing, mHintPaint);
+
+                if (mSpace < 0) {
+                    hintStartX += mCharSize * 2;
+                } else {
+                    hintStartX += mCharSize + mSpace;
+                }
+            }
+        }
+
         getPaint().getTextWidths(getText(), 0, textLength, textWidths);
 
         for (int i = 0; i < mNumChars; i++) {
@@ -240,9 +277,9 @@ protected void onDraw(Canvas canvas) {
             if (getText().length() > i) {
                 float middle = startX + mCharSize / 2;
                 if (mMaskInput) {
-                    canvas.drawText(getMaskText(), i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
+                    canvas.drawText(getMaskText(), i, i + 1, middle - textWidths[0] / 2, mLineSpacing, mTextPaint);
                 } else {
-                    canvas.drawText(text, i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
+                    canvas.drawText(text, i, i + 1, middle - textWidths[0] / 2, mLineSpacing, mTextPaint);
                 }
             }
 
@@ -251,6 +288,7 @@ protected void onDraw(Canvas canvas) {
             } else {
                 startX += mCharSize + mSpace;
             }
+
         }
     }
 

otpedittext2/src/main/java/com/broooapps/otpedittext2/OtpEditText.java

@@ -2,4 +2,5 @@
 <resources>
     <color name="light_gray">#eeeeee</color>
     <color name="underline_gray">#ECD0D0</color>
+    <color name="hint_color">#BBBBBB</color>
 </resources>

otpedittext2/src/main/res/values/colors.xml

@@ -10,12 +10,15 @@ With stunning animation, and high customizability.
 ![Demo with underline](images/demo2.gif)
 ![Dark theme demo](images/dark_theme_demo.gif)
 ![Error animation](images/err_anim.gif)
+![Hint usage](images/hint.gif)
 
 ## Packed with features
+
 - Add custom character limit.
+- Animation supported on wrong input
 - Use your own color scheme.
 - Do not allow user changing cursor position for smooth functioning.
-
+- Hint is supported!
 
 ## How to integrate the library in your app?
 Step 1: Add it in your root build.gradle at the end of repositories:
@@ -65,6 +68,18 @@ This method when invoked, will either return the OTP value, in case this is invo
 
 
 ## How to customize the view.
+
+### Trigger Error Animation
+To trigger error animation for incorrect input, or any other use case, use.
+```
+OtpEditText otpEditText;
+....
+otpEditText = findViewById(R.id.oev_view);
+....
+//Invalid input, animation triggered
+otpEditText.triggerErrorAnimation();
+```
+
 ### Setting desired length for the OTP(One time password code)
 
 To set custom length of the OtpEditText, use