11# PinView
22
3- Provides a widget for enter PIN/OTP/password etc.
3+ Provides a widget for enter PIN/OTP/password etc on Android 4.1+ (API 16) .
44
55<p ><img src =" screenshots/styles.png " width =" 35% " />
66<img src =" screenshots/input.gif " width =" 35% " /></p >
@@ -15,7 +15,7 @@ repositories {
1515}
1616
1717dependencies {
18- compile 'com.chaos.view:pinview:1.2 .0'
18+ compile 'com.chaos.view:pinview:1.3 .0'
1919}
2020```
2121
@@ -38,6 +38,9 @@ Add PinView in your layout.
3838 android : padding =" @dimen/common_padding"
3939 android : textColor =" @color/text_colors"
4040 android : textSize =" 18sp"
41+ android : cursorVisible =" true"
42+ app : cursorColor =" @color/line_selected"
43+ app : cursorWidth =" 2dp"
4144 app : itemCount =" 5"
4245 app : itemHeight =" 48dp"
4346 app : itemRadius =" 4dp"
@@ -55,18 +58,22 @@ PinView pinView = (PinView) findViewById(R.id.secondPinView);
5558pinView. setTextColor(
5659 ResourcesCompat . getColor(getResources(), R . color. colorAccent, getTheme()));
5760pinView. setTextColor(
58- ResourcesCompat . getColorStateList(getResources(), R . color. line_colors , getTheme()));
61+ ResourcesCompat . getColorStateList(getResources(), R . color. text_colors , getTheme()));
5962pinView. setLineColor(
6063 ResourcesCompat . getColor(getResources(), R . color. colorPrimary, getTheme()));
6164pinView. setLineColor(
62- ResourcesCompat . getColorStateList(getResources(), R . color. text_colors , getTheme()));
65+ ResourcesCompat . getColorStateList(getResources(), R . color. line_colors , getTheme()));
6366pinView. setItemCount(4 );
6467pinView. setItemHeight(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_size));
6568pinView. setItemWidth(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_size));
6669pinView. setItemRadius(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_radius));
6770pinView. setItemSpacing(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_spacing));
6871pinView. setLineWidth(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_line_width));
6972pinView. setAnimationEnable(true );// start animation when adding text
73+ pinView. setCursorVisible(false );
74+ pinView. setCursorColor(
75+ ResourcesCompat . getColor(getResources(), R . color. line_selected, getTheme()));
76+ pinView. setCursorWidth(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_cursor_width));
7077```
7178
7279### Step 2:
@@ -90,18 +97,34 @@ or use the `PinWidget.PinView` style.
9097 style =" @style/PinWidget.PinView" />
9198```
9299
100+ ### Step 3 (Optional):
101+
102+ To highlight current item,
103+
104+ add ` android:state_selected="true" ` to ` app:lineColor `
105+
106+ ``` xml
107+ <selector xmlns : android =" http://schemas.android.com/apk/res/android" >
108+ <!-- Use for the item to be input, set the value as the default to disable it -->
109+ <item android : color =" @color/line_selected" android : state_selected =" true" />
110+ <item android : color =" @color/line_focused" android : state_focused =" true" />
111+ <item android : color =" @color/line_default" />
112+ </selector >
113+ ```
114+
115+ or add ` android:cursorVisible="true" ` .
116+
93117## Attributes
94118
95- * ** itemSize** , @deprecated use itemWidth or itemHeight instead.
96- * ** borderWidth** , @deprecated use lineWidth instead.
97- * ** borderColor** , @deprecated use lineColor instead.
98119* ** itemCount** , the length of your pin code.
99120* ** itemWidth** , the width of each item.
100121* ** itemHeight** , the height of each item.
101122* ** itemSpacing** , the spacing between two items.
102- * ** lineWidth** , the line(border) width.
103- * ** lineColor** , the line(border) colors.
123+ * ** lineWidth** , the line (border) width.
124+ * ** lineColor** , the line (border) colors.
104125* ** viewType** , the view type of PinView, currently this will be one of ` rectangle ` or ` line ` .
126+ * ** cursorColor** , the cursor color.
127+ * ** cursorWidth** , the width of cursor.
105128
106129## Thanks
107130
0 commit comments