ChaosLeung / Pinview
Licence: apache-2.0
A PIN view library for Android. Use to enter PIN/OTP/password etc.
Stars: ✭ 387
Programming Languages
java
68154 projects - #9 most used programming language
Labels
Projects that are alternatives of or similar to Pinview
KodeEditor
A simple code editor with syntax highlighting and pinch to zoom
Stars: ✭ 60 (-84.5%)
Mutual labels: edittext
currency edittext
Simple currency formatter for Android EditText
Stars: ✭ 64 (-83.46%)
Mutual labels: edittext
AutoFormatInputWatcher
This repository contains input watcher for auto formatting digits in edit text
Stars: ✭ 15 (-96.12%)
Mutual labels: edittext
VerifyBlocksView
Android view for providing blocks (Edit Texts) to achieve verification process.
Stars: ✭ 28 (-92.76%)
Mutual labels: edittext
CustomFontView
Custom View classes for TextView, EditText & Buttons - to set custom fonts
Stars: ✭ 26 (-93.28%)
Mutual labels: edittext
android native code view
A EditText with syntax highlight support
Stars: ✭ 23 (-94.06%)
Mutual labels: edittext
Spedittool
An efficient and scalable library for inputing and displaying gif or @mention on graph-text mixed TextView/EditText
Stars: ✭ 292 (-24.55%)
Mutual labels: edittext
BlockEditText
Block EditText is a library provide an input view present in multiple block style that common use in TAC or credit card field.
Stars: ✭ 113 (-70.8%)
Mutual labels: edittext
RotatableAutofitEditText
Extended EditText which allows to move, rotate and resize text at the same time
Stars: ✭ 51 (-86.82%)
Mutual labels: edittext
EasyMoney-Widgets
The widgets (EditText and TextView) for support of money requirements like currency, number formatting, comma formatting etc.
Stars: ✭ 91 (-76.49%)
Mutual labels: edittext
currency-edittext
A Custom EditText implementation that allows formatting of currency-based numeric inputs.
Stars: ✭ 86 (-77.78%)
Mutual labels: edittext
textmatcher
A simple text watcher that matches specific targets like mention or hashtag in a string by defining rules
Stars: ✭ 67 (-82.69%)
Mutual labels: edittext
Autocomplete
Simple yet powerful autocomplete behavior for EditTexts, to avoid working with MultiAutoCompleteTextView APIs.
Stars: ✭ 307 (-20.67%)
Mutual labels: edittext
Editdrawabletext
EditDrawableText - An EditText which makes your Drawable Clickable
Stars: ✭ 288 (-25.58%)
Mutual labels: edittext
CustomEditText
Simple Custom EditText for Android like Instagram
Stars: ✭ 23 (-94.06%)
Mutual labels: edittext
PinView
Provides a widget for enter PIN/OTP/password etc on Android 4.1+ (API 16).
Dependency
JCenter(Deprecated)
repositories {
maven {
jcenter()
}
}
dependencies {
implementation 'com.chaos.view:pinview:1.4.4'
}
MavenCentral
repositories {
maven {
mavenCentral()
}
}
dependencies {
implementation 'io.github.chaosleung:pinview:1.4.4'
}
Note that
MavenCentral
usesio.github.chaosleung
as the group id
Usage
PinView inherits from EditText, which means you can use all the APIs from EditText.
Step 1:
Add PinView in your layout.
XML
<com.chaos.view.PinView
android:id="@+id/firstPinView"
style="@style/PinWidget.PinView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cursorVisible="true"
android:hint="Hint."
android:inputType="text"
android:itemBackground="@mipmap/ic_launcher"
android:padding="@dimen/common_padding"
android:textColor="@color/text_colors"
android:textSize="18sp"
android:textStyle="bold"
app:cursorColor="@color/line_selected"
app:cursorWidth="2dp"
app:hideLineWhenFilled="true"
app:itemCount="5"
app:itemHeight="48dp"
app:itemRadius="4dp"
app:itemSpacing="0dp"
app:itemWidth="48dp"
app:lineColor="@color/line_colors"
app:lineWidth="2dp"
app:viewType="rectangle" />
Java
final PinView pinView = findViewById(R.id.secondPinView);
pinView.setTextColor(
ResourcesCompat.getColor(getResources(), R.color.colorAccent, getTheme()));
pinView.setTextColor(
ResourcesCompat.getColorStateList(getResources(), R.color.text_colors, getTheme()));
pinView.setLineColor(
ResourcesCompat.getColor(getResources(), R.color.colorPrimary, getTheme()));
pinView.setLineColor(
ResourcesCompat.getColorStateList(getResources(), R.color.line_colors, getTheme()));
pinView.setItemCount(4);
pinView.setItemHeight(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_size));
pinView.setItemWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_size));
pinView.setItemRadius(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_radius));
pinView.setItemSpacing(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_spacing));
pinView.setLineWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_line_width));
pinView.setAnimationEnable(true);// start animation when adding text
pinView.setCursorVisible(false);
pinView.setCursorColor(
ResourcesCompat.getColor(getResources(), R.color.line_selected, getTheme()));
pinView.setCursorWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_cursor_width));
pinView.addTextChangedListener(new TextWatcher() {...});
pinView.setItemBackgroundColor(Color.BLACK);
pinView.setItemBackground(getResources().getDrawable(R.drawable.item_background));
pinView.setItemBackgroundResources(R.drawable.item_background);
pinView.setHideLineWhenFilled(false);
pinView.setPasswordHidden(false);
pinView.setTransformationMethod(new PasswordTransformationMethod());
Step 2:
Specifies pinViewStyle
in your theme,
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
<item name="pinViewStyle">@style/PinWidget.PinView</item>
</style>
or use the PinWidget.PinView
style.
<com.chaos.view.PinView
android:id="@+id/pinView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/PinWidget.PinView" />
Step 3 (Optional):
To highlight current item, use 'selected' state, in other words,
add android:state_selected="true"
to app:lineColor
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Use for the item to be input, set the value as the default to disable it -->
<item android:color="@color/line_selected" android:state_selected="true" />
<item android:color="@color/line_focused" android:state_focused="true" />
<item android:color="@color/line_default" />
</selector>
or add android:cursorVisible="true"
.
Attributes
- itemCount, the length of your pin code.
- itemWidth, the width of each item.
- itemHeight, the height of each item.
- itemSpacing, the spacing between two items.
- lineWidth, the line (border) width.
- lineColor, the line (border) colors.
-
viewType, the view type of PinView, currently this will be one of
rectangle
,line
ornone
. - cursorVisible, show cursor or not.
- cursorColor, the cursor color.
- cursorWidth, the width of cursor.
- itemBackground, the item background.
- hideLineWhenFilled, specifies whether the line (border) should be hidden or visible when text entered.
Thanks
- Inspired by PasswordInput in EthanCo
License
Copyright 2017-2018 Chaos Leong
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].