Bizzyness.net

Xamarin Android PinView

I was wondering how to set up a custom iOS like pinview component, to enable users to login using a pin code. while i know the solution i came up with is not the most flexible, it does seem to doe its job well.

First i created a layout to show 5 input boxes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:id="@+id/RootViewTrackList"
   android:background="@drawable/bg_grad"
   android:layout_height="match_parent"
   android:orientation="vertical">
    <TextView
       android:id="@+id/titleBox"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentTop="true"
       android:text="Enter PIN"
       android:gravity="center"
       android:textColor="#000"
       android:textSize="30sp"
       android:padding="10dip" />
    <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:orientation="vertical">
        <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal">
            <TextView
               android:id="@+id/pinBox0"
               android:inputType="numberPassword"
               android:password="true"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:text="8"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox1"
               android:inputType="numberPassword"
               android:password="true"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:text="8"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox2"
               android:inputType="numberPassword"
               android:password="true"
               android:text="8"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox3"
               android:inputType="numberPassword"
               android:password="true"
               android:text="8"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox4"
               android:inputType="numberPassword"
               android:password="true"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:text="8"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
        </LinearLayout>
        <TextView
           android:id="@+id/statusMessage"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text=""
           android:gravity="center"
           android:textColor="#ff0000"
           android:textSize="20sp"
           android:padding="5dip" />
    </LinearLayout>
</LinearLayout>

in my activity it a simple matter of getting the views, reading their contents and change the focus to the appropriate view when needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
[Activity (Label = "pinviewActivity")]
    public class pinviewActivity : Activity
    {
        string userEntered;
        string userPin="88888";

        const int PIN_LENGTH = 5;
        Context appContext;

        TextView pinBox0;
        TextView pinBox1;
        TextView pinBox2;
        TextView pinBox3;
        TextView pinBox4;

        TextView [] pinBoxArray;

        TextView statusView;

        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);
            SetContentView(Resource.Layout.passcode);
            appContext = this;
            userEntered = "";

            pinBox0 = (TextView)FindViewById(Resource.Id.pinBox0);
            pinBox1 = (TextView)FindViewById(Resource.Id.pinBox1);
            pinBox2 = (TextView)FindViewById(Resource.Id.pinBox2);
            pinBox3 = (TextView)FindViewById(Resource.Id.pinBox3);
            pinBox4 = (TextView)FindViewById(Resource.Id.pinBox4);

            statusView = (TextView) FindViewById(Resource.Id.statusMessage);

            pinBoxArray = new TextView[PIN_LENGTH];
            pinBoxArray[0] = pinBox0;
            pinBoxArray[1] = pinBox1;
            pinBoxArray[2] = pinBox2;
            pinBoxArray[3] = pinBox3;
            pinBoxArray[4] = pinBox4;

            pinBox0.FocusableInTouchMode = true;
            pinBox1.FocusableInTouchMode = true;
            pinBox2.FocusableInTouchMode = true;
            pinBox3.FocusableInTouchMode = true;
            pinBox4.FocusableInTouchMode = true;

            pinBox0.RequestFocusFromTouch ();
            int i = 0;
            foreach (TextView t in pinBoxArray) {
                t.AfterTextChanged += delegate(object sender, Android.Text.AfterTextChangedEventArgs e) {
                    // read the input values and construct the entire
                    userEntered = "";
                    foreach (TextView tr in pinBoxArray) {
                        userEntered = userEntered+tr.Text;
                    }
                    Log.Info ("PinView", userEntered);
                    i++;
                    if(pinBoxArray.Length > i){
                        pinBoxArray[i].RequestFocusFromTouch();
                    }
                };

            }
            pinBox4.AfterTextChanged += delegate(object sender, Android.Text.AfterTextChangedEventArgs e) {
                if (userEntered.Length == PIN_LENGTH) {
                    //Check if entered PIN is correct
                    if (userEntered.Equals (userPin)) {
                        statusView.SetTextColor (Android.Graphics.Color.Green);
                        statusView.Text = "Correct";
                    } else {
                        statusView.SetTextColor (Android.Graphics.Color.Red);
                        statusView.Text = "Wrong PIN. Keypad Locked";
                        Log.Info ("PinView", "Wrong PIN");
                    }
                }
            };
        }
    }

Leave a comment

Leave a comment

Your email address will not be published. Required fields are marked *