Merge pull request #4 from swapnil1104/1_hide_input_text

Mask input with special character feature

Author: swapnil1104

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

@@ -2,6 +2,9 @@
 
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
+import android.view.View;
+import android.widget.EditText;
+import android.widget.TextView;
 
 public class MainActivity extends AppCompatActivity {
 
@@ -10,4 +13,11 @@ protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
     }
+
+    public void displayText(View view) {
+
+        String input = String.valueOf(((EditText) findViewById(R.id.top)).getText());
+        ((TextView) findViewById(R.id.textView)).setText(input);
+
+    }
 }

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

@@ -16,15 +16,37 @@
         app:layout_constraintTop_toTopOf="parent" />
 
     <com.broooapps.otpedittext2.OtpEditText
+        android:id="@+id/top"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:clickable="false"
         android:cursorVisible="false"
         android:digits="0123456789"
-        android:inputType="number"
         android:maxLength="6"
         android:padding="32dp"
         android:textSize="30sp"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:oev_mask_character="ø¥"
+        app:oev_mask_input="true" />
+
+    <Button
+        android:id="@+id/button"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:onClick="displayText"
+        android:text="Click me"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/top" />
+
+    <TextView
+        android:id="@+id/textView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="80dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/button" />
+
 
 </android.support.constraint.ConstraintLayout>

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

@@ -12,6 +12,7 @@
 import android.support.v4.content.ContextCompat;
 import android.support.v7.widget.AppCompatEditText;
 import android.text.Editable;
+import android.text.method.PasswordTransformationMethod;
 import android.util.AttributeSet;
 import android.view.ActionMode;
 import android.view.Menu;
@@ -27,6 +28,8 @@ public class OtpEditText extends AppCompatEditText {
     private Paint mLinesPaint;
     private Paint mStrokePaint;
 
+    private boolean mMaskInput;
+
     private int defStyleAttr = 0;
     private int mMaxLength = 6;
     private int mPrimaryColor;
@@ -41,6 +44,7 @@ public class OtpEditText extends AppCompatEditText {
     private float mLineSpacing = 10; //8dp by default, height of the text from our lines
 
     private String mBoxStyle;
+    private String mMaskCharacter = "*";
 
     private final String ROUNDED_BOX = "rounded_box";
     private final String UNDERLINE = "underline";
@@ -115,6 +119,12 @@ private void getAttrsFromTypedArray(AttributeSet attributeSet) {
         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));
         mBoxStyle = a.getString(R.styleable.OtpEditText_oev_box_style);
+        mMaskInput = a.getBoolean(R.styleable.OtpEditText_oev_mask_input, false);
+        if (a.getString(R.styleable.OtpEditText_oev_mask_character) != null) {
+            mMaskCharacter = String.valueOf(a.getString(R.styleable.OtpEditText_oev_mask_character)).substring(0, 1);
+        } else {
+            mMaskCharacter = getContext().getString(R.string.mask_character);
+        }
 
         if (mBoxStyle != null && !mBoxStyle.isEmpty()) {
             switch (mBoxStyle) {
@@ -213,7 +223,11 @@ protected void onDraw(Canvas canvas) {
             }
             if (getText().length() > i) {
                 float middle = startX + mCharSize / 2;
-                canvas.drawText(text, i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
+                if (mMaskInput) {
+                    canvas.drawText(getMaskText(), i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
+                } else {
+                    canvas.drawText(text, i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
+                }
             }
 
             if (mSpace < 0) {
@@ -224,6 +238,15 @@ protected void onDraw(Canvas canvas) {
         }
     }
 
+    private String getMaskText() {
+        int length = String.valueOf(getText()).length();
+        StringBuilder out = new StringBuilder();
+        for (int i = 0; i < length; i++) {
+            out.append(mMaskCharacter);
+        }
+        return out.toString();
+    }
+
     /**
      * @param next Is the current char the next character to be input?
      */

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

@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <declare-styleable name="OtpEditText">
-        <attr name="oev_length" format="integer"/>
+        <attr name="oev_length" format="integer"/> 
         <attr name="oev_primary_color" format="color" />
         <attr name="oev_secondary_color" format="color" />
         <attr name="oev_text_color" format="color" />
         <attr name="oev_box_style" format="string" />
 
+        <attr name="oev_mask_input" format="boolean" />
+        <attr name="oev_mask_character" format="string" />
+
     </declare-styleable>
 
 

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

@@ -1,9 +1,12 @@
 <resources>
     <string name="app_name">OtpEditText</string>
 
+
+    <!-- Different styles for input box. -->
     <string name="style_square">square_box</string>
     <string name="style_rounded">rounded_box</string>
     <string name="style_underline">underline</string>
     <string name="style_rounded_underline">rounded_underline</string>
+    <string name="mask_character">\u2022</string>
 
 </resources>

readme.md

@@ -90,6 +90,22 @@ I have provided string resources for simpler usage.
 Suppose you want the rounded underline option to be displayed. Then, please add:
 `app:oev_box_style="@string/style_rounded_underline" ` in the OtpEditText xml code.
 
+### Masking input characters with Asterisk.
+Functionality to mask the input with any special character has been introduced. 
+To mask the input;
+```
+app:oev_mask_input="true" 
+```
+xml property must be introduced in the XML layout file.
+
+#### Masking with any other special character.
+To mask input with any character other than `*` you can do the following;
+```
+app:oev_mask_character="ø"
+```
+
+P.S. Please note that, in case of masking with a special character other than `*`, specify string with length one, otherwise the input string will be truncated to length 1.
+
 ## For optimum usage; Please note.
 * Specify `android:textSize` according to your needs.
 * Specify `android:padding` according to your needs, there are no paddings drawn by default.