Skip to content

Commit 5777544

Browse files
committed
✨ Add mask input with custom mask character
1 parent 3da72cd commit 5777544

File tree

5 files changed

+61
-3
lines changed

5 files changed

+61
-3
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
import android.support.v7.app.AppCompatActivity;
44
import android.os.Bundle;
5+
import android.view.View;
6+
import android.widget.EditText;
7+
import android.widget.TextView;
58

69
public class MainActivity extends AppCompatActivity {
710

@@ -10,4 +13,11 @@ protected void onCreate(Bundle savedInstanceState) {
1013
super.onCreate(savedInstanceState);
1114
setContentView(R.layout.activity_main);
1215
}
16+
17+
public void displayText(View view) {
18+
19+
String input = String.valueOf(((EditText) findViewById(R.id.top)).getText());
20+
((TextView) findViewById(R.id.textView)).setText(input);
21+
22+
}
1323
}

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,37 @@
1616
app:layout_constraintTop_toTopOf="parent" />
1717

1818
<com.broooapps.otpedittext2.OtpEditText
19+
android:id="@+id/top"
1920
android:layout_width="match_parent"
2021
android:layout_height="wrap_content"
2122
android:clickable="false"
2223
android:cursorVisible="false"
2324
android:digits="0123456789"
24-
android:inputType="number"
2525
android:maxLength="6"
2626
android:padding="32dp"
2727
android:textSize="30sp"
28-
app:layout_constraintTop_toTopOf="parent" />
28+
app:layout_constraintTop_toTopOf="parent"
29+
app:oev_mask_character="ø¥"
30+
app:oev_mask_input="true" />
31+
32+
<Button
33+
android:id="@+id/button"
34+
android:layout_width="0dp"
35+
android:onClick="displayText"
36+
android:layout_height="wrap_content"
37+
android:text="Click me"
38+
app:layout_constraintEnd_toEndOf="parent"
39+
app:layout_constraintStart_toStartOf="parent"
40+
app:layout_constraintTop_toBottomOf="@id/top" />
41+
42+
<TextView
43+
android:layout_width="wrap_content"
44+
android:layout_height="wrap_content"
45+
android:layout_marginTop="80dp"
46+
android:id="@+id/textView"
47+
app:layout_constraintEnd_toEndOf="parent"
48+
app:layout_constraintStart_toStartOf="parent"
49+
app:layout_constraintTop_toBottomOf="@id/button" />
50+
2951

3052
</android.support.constraint.ConstraintLayout>

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import android.support.v4.content.ContextCompat;
1313
import android.support.v7.widget.AppCompatEditText;
1414
import android.text.Editable;
15+
import android.text.method.PasswordTransformationMethod;
1516
import android.util.AttributeSet;
1617
import android.view.ActionMode;
1718
import android.view.Menu;
@@ -27,6 +28,8 @@ public class OtpEditText extends AppCompatEditText {
2728
private Paint mLinesPaint;
2829
private Paint mStrokePaint;
2930

31+
private boolean mMaskInput;
32+
3033
private int defStyleAttr = 0;
3134
private int mMaxLength = 6;
3235
private int mPrimaryColor;
@@ -41,6 +44,7 @@ public class OtpEditText extends AppCompatEditText {
4144
private float mLineSpacing = 10; //8dp by default, height of the text from our lines
4245

4346
private String mBoxStyle;
47+
private String mMaskCharacter = "*";
4448

4549
private final String ROUNDED_BOX = "rounded_box";
4650
private final String UNDERLINE = "underline";
@@ -115,6 +119,10 @@ private void getAttrsFromTypedArray(AttributeSet attributeSet) {
115119
mSecondaryColor = a.getColor(R.styleable.OtpEditText_oev_secondary_color, getResources().getColor(R.color.light_gray));
116120
mTextColor = a.getColor(R.styleable.OtpEditText_oev_text_color, getResources().getColor(android.R.color.black));
117121
mBoxStyle = a.getString(R.styleable.OtpEditText_oev_box_style);
122+
mMaskInput = a.getBoolean(R.styleable.OtpEditText_oev_mask_input, false);
123+
if (a.getString(R.styleable.OtpEditText_oev_mask_character) != null) {
124+
mMaskCharacter = String.valueOf(a.getString(R.styleable.OtpEditText_oev_mask_character)).substring(0, 1);
125+
}
118126

119127
if (mBoxStyle != null && !mBoxStyle.isEmpty()) {
120128
switch (mBoxStyle) {
@@ -213,7 +221,11 @@ protected void onDraw(Canvas canvas) {
213221
}
214222
if (getText().length() > i) {
215223
float middle = startX + mCharSize / 2;
216-
canvas.drawText(text, i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
224+
if (mMaskInput) {
225+
canvas.drawText(getMaskText(), i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
226+
} else {
227+
canvas.drawText(text, i, i + 1, middle - textWidths[0] / 2, mLineSpacing, getPaint());
228+
}
217229
}
218230

219231
if (mSpace < 0) {
@@ -224,6 +236,15 @@ protected void onDraw(Canvas canvas) {
224236
}
225237
}
226238

239+
private String getMaskText() {
240+
int length = String.valueOf(getText()).length();
241+
StringBuilder out = new StringBuilder();
242+
for (int i = 0; i < length; i++) {
243+
out.append(mMaskCharacter);
244+
}
245+
return out.toString();
246+
}
247+
227248
/**
228249
* @param next Is the current char the next character to be input?
229250
*/

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
<attr name="oev_text_color" format="color" />
88
<attr name="oev_box_style" format="string" />
99

10+
<attr name="oev_mask_input" format="boolean" />
11+
<attr name="oev_mask_character" format="string" />
12+
1013
</declare-styleable>
1114

1215

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<resources>
22
<string name="app_name">OtpEditText</string>
33

4+
5+
<!-- Different styles for input box. -->
46
<string name="style_square">square_box</string>
57
<string name="style_rounded">rounded_box</string>
68
<string name="style_underline">underline</string>

0 commit comments

Comments
 (0)