Mask input with special character feature

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.