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");
                        }
                    }
                };
            }
        }
    « PHP/MySQL Prepared statements

    Leave a comment

    Leave a comment Cancel reply

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

    Pages

    Archives

    • July 2013
    • October 2012

    Categories

    • Main (2)
    • Tech (1)
    • Uncategorized (1)

    WordPress

    • Log in
    • WordPress

    Subscribe

    • Entries (RSS)
    • Comments (RSS)

    Pages

    Archives

    • July 2013
    • October 2012

    Categories

    • Main (2)
    • Tech (1)
    • Uncategorized (1)

    WordPress

    • Log in
    • WordPress

    CyberChimps WordPress Themes

    © My blog