Convert EditBox input to points after user input single char?

Question

1] 4-digit input fields without input:

2] 4-digit input field with input:

As the user switches to the 4-digit pin input unit, he turns to a point, if the user wants to delete the last digit by pressing the "Back" button, the user input is deleted with the points converted to the input field again. If the user has the wrong input, he cannot convert the point to the input field, touching it, he must perform the reverse deletion from right to left.

I see a possible solution with custom widgets displaying / viewing view settings based on user input detected using the TextWatcher implementation. But is there an existing EditText widget in the Android platform that has any style configuration with which I can encode in XML to get the aforementioned user interface change?

So far, for manual changes, I made the following changes (The code is for one input field, which was used to create a group of 4 input fields):

XML layout for a single input window:

<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <EditText android:id="@+id/pin_edit_box" style="@style/pin_edittext_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:digits="0123456789" android:focusable="true" android:imeOptions="actionNext" android:inputType="numberPassword" /> <ImageView android:id="@+id/pin_input_dot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minEms="3" android:focusable="false" android:layout_centerInParent="true" android:enabled="false" android:src="@drawable/ic_green_dot" android:visibility="gone" /> </RelativeLayout> 

Text Change Listener:

 pin_edit_box.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { int length = editable.toString().length(); if (length == 1) { pin_edit_box_this.setVisibility(View.INVISIBLE); pin_input_dot_this.setVisibility(View.VISIBLE); pin_edit_box_next.requestFocus(); } else if (length == 0) { // This part doesn't work as EditText is invisible at this time // dot image view is visible pin_edit_box_this.setVisibility(View.VISIBLE); pin_input_dot_this.setVisibility(View.GONE); pin_edit_box_this_previous.requestFocus(); } } }); 

When you try to detect an event to return or remove a button from

 boolean onKeyDown (int keyCode, KeyEvent event) { } 

An event with the KeyEvent.KEYCODE_DEL keyboard is never detected to make the views visible / invisible after a backward click. Official documentation says that events with a soft keyboard, which cannot always be delivered, will not always work.

As soft input methods can use multiple and ingenious text input methods, there is no guarantee that any keystroke on a soft keyboard will generate a key event: this is at the discretion of IME and the fact of sending such events is not recommended.

More here

Note: the screenshots above are taken from the BHIM application , which is intended for Indian money transactions.

Answer 1

See this PinView Library , it does almost the same thing you need.

It is easy to use:

Add dependencies

 dependencies { compile 'com.chaos.view:pinview:1.3.0' } 

Create a PinView instead of EditText

 <com.chaos.view.PinView android:id="@+id/pinView" style="@style/PinWidget.PinView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Hint." android:inputType="text" android:padding="@dimen/common_padding" android:textColor="@color/text_colors" android:textSize="18sp" android:cursorVisible="true" app:cursorColor="@color/line_selected" app:cursorWidth="2dp" app:itemCount="5" app:itemHeight="48dp" app:itemRadius="4dp" app:itemSpacing="0dp" app:itemWidth="36dp" app:lineColor="@color/line_colors" app:lineWidth="2dp" app:viewType="rectangle" /> 

You should see something like this.

Another workaround is to create your own EditText class and change it with custom types

Answer 2

try it

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <EditText android:id="@+id/edt1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:background="@drawable/normal" android:hint="" android:maxLength="1" /> <EditText android:id="@+id/edt2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="" android:layout_margin="5dp" android:background="@drawable/normal" android:layout_weight="1" android:maxLength="1" /> <EditText android:id="@+id/edt3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="" android:layout_margin="5dp" android:background="@drawable/normal" android:layout_weight="1" android:maxLength="1" /> <EditText android:id="@+id/edt4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="" android:layout_margin="5dp" android:background="@drawable/normal" android:layout_weight="1" android:maxLength="1" /> </LinearLayout> 

@ hood / Norma

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:height="1dp" android:gravity="bottom"> <shape android:shape="rectangle"> <solid android:color="#0011ff" /> </shape> </item> </layer-list> 

drawable.filled

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:height="1dp"> <shape android:shape="rectangle"> <solid android:color="#00001eff" /> </shape> </item> </layer-list> 

CODE OF ACTIVITY

  import android.os.Handler; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.text.Editable; import android.text.InputType; import android.text.TextUtils; import android.text.TextWatcher; import android.widget.EditText; public class MainActivity extends AppCompatActivity { EditText edt1, edt2, edt3, edt4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); edt1 = findViewById(R.id.edt1); edt2 = findViewById(R.id.edt2); edt3 = findViewById(R.id.edt3); edt4 = findViewById(R.id.edt4); edt1.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { if (TextUtils.isEmpty(edt1.getText().toString().trim())) { edt1.setBackgroundResource(R.drawable.normal); edt1.requestFocus(); edt1.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black)); new Handler().postDelayed(new Runnable() { @Override public void run() { edt1.setInputType(InputType.TYPE_CLASS_TEXT ); } },500); } else { edt1.setBackgroundResource(R.drawable.filled); edt1.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red)); edt2.requestFocus(); new Handler().postDelayed(new Runnable() { @Override public void run() { edt1.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); } },500); } } @Override public void afterTextChanged(Editable editable) { } }); edt2.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { if (TextUtils.isEmpty(edt2.getText().toString().trim())) { edt2.setBackgroundResource(R.drawable.normal); edt2.requestFocus(); edt2.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black)); new Handler().postDelayed(new Runnable() { @Override public void run() { edt2.setInputType(InputType.TYPE_CLASS_TEXT ); } },500); } else { edt2.setBackgroundResource(R.drawable.filled); edt3.requestFocus(); edt2.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red)); new Handler().postDelayed(new Runnable() { @Override public void run() { edt2.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); } },500); } } @Override public void afterTextChanged(Editable editable) { } }); edt3.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { if (TextUtils.isEmpty(edt3.getText().toString().trim())) { edt3.setBackgroundResource(R.drawable.normal); edt3.requestFocus(); edt3.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black)); new Handler().postDelayed(new Runnable() { @Override public void run() { edt3.setInputType(InputType.TYPE_CLASS_TEXT ); } },500); } else { edt3.setBackgroundResource(R.drawable.filled); edt3.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red)); edt4.requestFocus(); new Handler().postDelayed(new Runnable() { @Override public void run() { edt3.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); } },500); } } @Override public void afterTextChanged(Editable editable) { } }); edt4.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { if (TextUtils.isEmpty(edt4.getText().toString().trim())) { edt4.setBackgroundResource(R.drawable.normal); edt4.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black)); new Handler().postDelayed(new Runnable() { @Override public void run() { edt4.setInputType(InputType.TYPE_CLASS_TEXT ); } },500); } else { edt4.setBackgroundResource(R.drawable.filled); edt4.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red)); edt4.clearFocus(); new Handler().postDelayed(new Runnable() { @Override public void run() { edt4.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); } },500); } } @Override public void afterTextChanged(Editable editable) { } }); } } 

OUTPUT

NORMAL

WHEN EDIT

FINAL

Answer 3

Change the input type of the Edit Text to a text popup, it will display char as a char point.