Skip to content

Diffrent Key Shapes

Keval Patel edited this page Apr 15, 2018 · 6 revisions

PasscodeView supports different key shapes to match your application theme. There are three different shapes available in the SDK itself. You can also build your own key shapes.

Features:

  • Easy to customize
  • Supports different locale. (Guide)
  • An application can create its own key shape.

1. How to use Round keys?

mPinView.setKey(new RoundKey.Builder(mPinView)
                .setKeyPadding(R.dimen.key_padding)               //Padding arround the key. More padding means small key size.
                .setKeyStrokeColorResource(R.color.colorAccent)   //Color of the stroke of round key
                .setKeyStrokeWidth(R.dimen.key_stroke_width)      //Width of the stroke
                .setKeyTextColorResource(R.color.colorAccent)     //Key text color.
                .setKeyTextSize(R.dimen.key_text_size))           //Size of the numbers in key

2. How to use Rectangle keys?

mPinView.setKey(new RectKey.Builder(mPinView)
                .setKeyPadding(R.dimen.key_padding)               //Padding arround the key. More padding means small key size.
                .setKeyStrokeColorResource(R.color.colorAccent)   //Color of the stroke of round key
                .setKeyStrokeWidth(R.dimen.key_stroke_width)      //Width of the stroke
                .setKeyTextColorResource(R.color.colorAccent)     //Key text color.
                .setKeyTextSize(R.dimen.key_text_size));          //Size of the numbers in key

3. How to use Square keys?

mPinView.setKey(new SquareKey.Builder(mPinView)
                .setKeyPadding(R.dimen.key_padding)               //Padding arround the key. More padding means small key size.
                .setKeyStrokeColorResource(R.color.colorAccent)   //Color of the stroke of round key
                .setKeyStrokeWidth(R.dimen.key_stroke_width)      //Width of the stroke
                .setKeyTextColorResource(R.color.colorAccent)     //Key text color.
                .setKeyTextSize(R.dimen.key_text_size));          //Size of the numbers in key

Screenshots of inbuilt keys:

Rectangle Circle Square