If you need a Passcode view (like PIN code or iOS Passcode) then there's a good widget. The basic concept is a library that contains two seperated views.
This is a full customizable numeric pad interface. Easy to use for lock screen, PIN pad, login or other security reason. You can add new button or change the button style using PasscodeBaseAdapter.
An simple indicator view to feedback for user when type on the PasscodeView. You can place anywhere in the layout XML independent PasscodeView. It is also highly customizable with XML attributes like padding, margin, default or active drawable and of course animation.
There is enough to download only the passcodeview-library which contains all neccessary files.
The AAR file is available using by JitPack. So you need to edit the gradle files and run gradle sync.
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}Add the dependency at the end of your /app/build.gradle files:
dependencies {
compile 'com.github.siczmj:passcodeview:v1.0.1'
}<com.nirigo.mobile.view.passcode.PasscodeView
android:id="@+id/passcode_view"android:layout_width="wrap_content"android:layout_height="wrap_content"
/>The PasscodeView working as auto wrapping mode and stretch mode too. What does it mean? In wrap mode the PasscodeView measure self by children sizes. It's good when you set the buttons size wrap_content or any exact size. In this case you need to use appropriate inflater in getView() implementation. See any example of PasscodeViewAdapter. If you set the layout_width and/or layout_height of PasscodeView to match_parent or exact size then will be stretch each child with equal size. So, in this case not matter what is the size of the children.
publicclassCustomPasscodeAdapterextendsPasscodeBaseAdapter {
privateLayoutInflaterinflater;
publicCustomPasscodeAdapter(Contextcontext) {
super(Arrays.asList(
newPasscodeItem("1", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("2", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("3", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("4", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("5", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("6", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("7", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("8", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("9", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("X", PasscodeItem.TYPE_CLEAR),
newPasscodeItem("0", PasscodeItem.TYPE_NUMBER),
newPasscodeItem("<", PasscodeItem.TYPE_REMOVE)
));
this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@OverridepublicViewgetView(intposition, ViewconvertView, ViewGroupparent) {
PasscodeItemitem = getItem(position);
if(convertView == null || convertView.getTag() != PasscodeItem.class){
convertView = inflater.inflate(R.layout.button_passcode_custom, parent, false);
convertView.setTag(PasscodeItem.class);
}
AppCompatButtonbutton = (AppCompatButton) convertView;
button.setText(item.getValue());
button.setVisibility(item.getType() == PasscodeItem.TYPE_EMPTY ? View.INVISIBLE : View.VISIBLE);
returnconvertView;
}
}CustomPasscodeAdapteradapter = newCustomPasscodeAdapter(getActivity());
passcodeView.setAdapter(adapter);Add the passcode xml namespace to access all custom attributes:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:passcode="http://schemas.android.com/apk/res-auto"
...Add the indicator to xml and give the appearance parameters:
<com.nirigo.mobile.view.passcode.PasscodeIndicator
android:id="@+id/passcode_indicator"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="24dp"android:layout_marginTop="24dp"passcode:indicator_background="@color/custom_gray"passcode:indicator_background_active="@color/custom_green"passcode:indicator_length="6"passcode:indicator_level="2"passcode:indicator_margin="7dp"passcode:indicator_size="12dp"passcode:indicator_animation="@anim/custom_indicator_animation"
/>The indicator it's just a feedback for users so exactly not matter what indicate. That mean you need to set the indicator level only and you want to use anything.
passcodeIndicator.setIndicatorLevel(yourCurrentPasscode.length());passcodeIndicator.wrongPasscode();In this case the default animation will be shake all indicator drawables. See the demo.
It's really easy. You can see the example in the Android implementation:
You need to extends the PasscodeItem model and add the new parameters. Like PasscodeItemAndroid and PasscodeItemAndroidImage in the models package of example project.
Make new adapter that use your unique PasscodeItems. Like AndroidPasscodeAdapter.
Handle it in the getView() implementation and pass your custom layout. Like in the AndroidPasscodeAdapter.getView() I added Enter event with ImageView
Catch the onItemClick and hanle the custom event. like in the ExampleAndroidFragment, check Enter event.
Yes.
Type member can help you seperate View type or action type.
| Field | Value | Explain |
|---|---|---|
| TYPE_EMPTY | -1 | Use if you want to hide an View. |
| TYPE_NUMBER | 0 | Typical mean dial number. |
| TYPE_REMOVE | 1 | Backspace or remove last character. |
| TYPE_CLEAR | 2 | Clear all text. |
| TYPE_ENTER | 3 | Send previously typed characters. |
There are follow samples available:
Plain usage:
- ExamplePlainFragment.java
Customization example:
- ExampleCustomizedFragment.java
- CustomPasscodeAdapter.java
IOS look example:
- ExampleIOSFragment.java
- PasscodeItemIOS.java
- IOSPasscodeAdapter.java
- ...and corresponding elements
Android PIN code example:
- ExampleAndroidFragment.java
- PasscodeItemAndroid.java and PasscodeItemAndroidImage.java
- AndroidPasscodeAdapter.java
- ...and corresponding elements
- change number of column
- add selector support
- add watch() method to passcodeindicator to listening EditText/Autocomplete..
- example for imageview implementation
- AAR in maven repo
See the LICENSE file in the project root.