How to create a four digit password Android layout

Question

I want to create a layout for an Android app that has a numeric keypad and takes four digits to determine if it matches a preset passcode value.

I have seen a few applications use this, so I would have thought that it was a high level widget of some description.

The only thing I can find that's remotely close to what I want is this:

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:ems="10"
    android:inputType="numberPassword" >

    <requestFocus />
</EditText>

But this isn't really what I'm looking for.

Any input would be awesome and thanks in advance.

EDIT: Here's an image of the iOS dropbox app start screen that I'd like:

Solution 1

In the end I created multiple custom widgets.

There is a Keypad widget. It inherits from TableLayout and has four rows of three buttons. Each button modifies a String - either adding digits or removing them.

Another widget I added was called PINEntry. It takes a single int to specify how many digits have been entered and displays that information accordingly.

I use these two widgets together in another View to recreate the passcode screen.

Solution 2

I'm beginner in Android. when I stuck in coding I always use to refer stackoverflow. I have learnt lot of things from stackoverflow. This is the first time i have dared to answer this question. Pardon me if I'm wrong and any suggestion regarding coding or the way of writing code in stackoverflow is highly appreciated. Thank You..

I have did something like this in Fragments.. Take 4 EditText in and set maxLength attribute to 1 in xml for all 4 EditTexts. You can modify EditText as per your requirement.

Note: OnKey method may or may not be not be invoked for DEL(BackSpace) in Stock Android KeyBoard.

public class VerifyCodeFrag extends Fragment implements TextWatcher,View.OnKeyListener,View.OnFocusChangeListener
                        {
                            private EditText et_digit1, et_digit2, et_digit3, et_digit4;//In this et_digit1 is Most significant digit and et_digit4 is least significant digit
                            private int whoHasFocus;
                            char[] code = new char[4];//Store the digits in charArray.
                            @Override
                            public void onCreate(Bundle savedInstanceState)
                            {
                                super.onCreate(savedInstanceState);
                            }

                            @Override
                            public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                                     Bundle savedInstanceState)
                            {
                                View view=inflater.inflate(R.layout.fragment_verify_code, container, false);
                                initializeView(view);
                                et_digit1.requestFocus();//Left digit gets focus after adding of fragment in Container
                                return view;
                            }

This method is used to intilize views.

private void initializeView(View view)
  {                          
 et_digit1 = (EditText) view.findViewById(R.id.et_vfcode_digit1);
 et_digit2 = (EditText) view.findViewById(R.id.et_vfcode_digit2);
 et_digit3 = (EditText) view.findViewById(R.id.et_vfcode_digit3);
 et_digit4 = (EditText) view.findViewById(R.id.et_vfcode_digit4);
 setListners();
  }

This method is to set the listeners for each EditTexts.

private void setListners()
  {
   et_digit1.addTextChangedListener(this);
   et_digit2.addTextChangedListener(this);
   et_digit3.addTextChangedListener(this);
   et_digit4.addTextChangedListener(this);

   et_digit1.setOnKeyListener(this);
   et_digit2.setOnKeyListener(this);
   et_digit3.setOnKeyListener(this);
   et_digit4.setOnKeyListener(this);

   et_digit1.setOnFocusChangeListener(this);
   et_digit2.setOnFocusChangeListener(this);
   et_digit3.setOnFocusChangeListener(this);
   et_digit4.setOnFocusChangeListener(this);
     }

These are the override method of interface OnFocusChangeListner by which I'm checking which EditText currently has focus from where it is useful to fetch number from respective EditText Boxes in afterTextChnged method(override method of TextWatcher).

 @Override
  public void onFocusChange(View v, boolean hasFocus)
  {
  switch(v.getId())
  {
  case R.id.et_vfcode_digit1:
  whoHasFocus=1;
  break;

  case R.id.et_vfcode_digit2:
  whoHasFocus=2;
  break;

  case R.id.et_vfcode_digit3:
  whoHasFocus=3;
  break;

  case R.id.et_vfcode_digit4:
  whoHasFocus=4;
  break;

   default:
   break;
   }
   }

These are the override method of TextWatcher Interface. Here in this afterTextChanged(override method) I'm fetching number from EdiTexts storing them in respective index of charArray. And once the user enter the number in EditText the next EditText will get focus by requestfocus method(Example:et_digit2.requestFocus()).

@Override
public void beforeTextChanged(CharSequence s, int start, int count, int    after)
{
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count)
{
}  
@Override
public void afterTextChanged(Editable s)
{
switch (whoHasFocus)
{
case 1:
if(!et_digit1.getText().toString().isEmpty())
{
code[0]= et_digit1.getText().toString().charAt(0);
et_digit2.requestFocus();
}
break;

case 2:
if(!et_digit2.getText().toString().isEmpty())
{
code[1]= et_digit2.getText().toString().charAt(0);
et_digit3.requestFocus();
}
break;

case 3:
if(!et_digit3.getText().toString().isEmpty())
{
code[2]= et_digit3.getText().toString().charAt(0);
et_digit4.requestFocus();
}
break;

case 4:
if(!et_digit4.getText().toString().isEmpty())
{
code[3]= et_digit4.getText().toString().charAt(0);
}
break;


default:
break;
}
}

This method will functionate as delete(BackSpace) key.
In this override method I'm checking whether EditText is empty and DEL(backspace in keypad is pressed). if true the previous EditText will get focus.

@Override
public boolean onKey(View v, int keyCode, KeyEvent event)
{
if (event.getAction() == KeyEvent.ACTION_DOWN)
{
if (keyCode == KeyEvent.KEYCODE_DEL)
{
switch(v.getId())
{
 case R.id.et_vfcode_digit2:
 if (et_digit2.getText().toString().isEmpty())
 et_digit1.requestFocus();
 break;

 case R.id.et_vfcode_digit3:
 if (et_digit3.getText().toString().isEmpty())
 et_digit2.requestFocus();
 break;

case R.id.et_vfcode_digit4:
if (et_digit4.getText().toString().isEmpty())
et_digit3.requestFocus();
break;

default:
break;
}
}
}
return false;
}
}

Sample image.

[1]: https://i.stack.imgur.com/DAc9y.jpg

Solution 3

Did you try adding this:

android:maxLength="4"
android:password="true"

This results in a more password like way.

Update: I'd implement four EditText and make them each maxLength="1". If you align them horizontally this should work :)

Comments

[Muhammed Refaat]

provide a reference please

[Mike - SMT]

Welcome to stack overflow Er Prajesh. Please do not answer a question with a wall of code. Please describe your answer in section and point out each important part of the code that is relevant to the question. If you answer a question with code that the OP or others done understand then that answer does not contribute useful knowledge.