A Pin view widget for Android

Related tags

UI/UX PinView
Overview

PinView

Android Arsenal Maven Central Android Gems

A Pin view widget for Android. PinView has a feature that allows you to find out when they have completed all parameters. Support for Android 3.0 and up. It supports portrait and landscape mode, saving the state.

Example screenshot

Try out the sample application on Google Play.

PinView Sample on Google Play

Demo

Example gif

Including in Your Project

Last version is 1.0.0

Just add the following statement in your build.gradle

compile 'com.github.davidpizarro:pinview:VERSION'

You may also add the library as an Android Library to your project. All the library files live in library.

Usage

To add the PinView to your layout, add this to your xml

<com.dpizarro.pinview.library.PinView
        android:id="@+id/pinView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

You can add custom attributes in your xml to customize: pin boxes number, splits, number of characters in pin boxes, styles, mask password, titles, drawables, sizes, colors, behaviors...

<com.dpizarro.pinview.library.PinView
            android:id="@+id/pinView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            pinview:titles="@array/small_titles"
            pinview:password="true"
            pinview:numberPinBoxes="4"
            pinview:split="-"
            pinview:numberCharacters="2"
            pinview:deleteOnClick="false"
            pinview:keyboardMandatory="false"
            pinview:nativePinBox="false"
            pinview:textSizePinBox="@dimen/size_text_pinbox"
            pinview:textSizeTitles="@dimen/size_titles"
            pinview:drawablePinBox="@drawable/custom_pinbox"
            pinview:sizeSplit="@dimen/size_split"
            pinview:colorSplit="@color/color_splits"
            pinview:colorTextPinBox="@android:color/black"
            pinview:colorTextTitles="@color/color_title"/>

Review attrs.xml file to know the list of shapes ready to be used in the library.

This configuration can be also provided programmatically. You can use PinView programatically, using the Builder class to set the settings and the desired functionalities to make easy:

PinView pinView = (PinView) view.findViewById(R.id.pinView);

PinViewSettings pinViewSettings = new PinViewSettings.Builder()
                                                     .withPinTitles(titlesAux)
                                                     .withMaskPassword(true)
                                                     .withDeleteOnClick(true)
                                                     .withKeyboardMandatory(false)
                                                     .withSplit("-")
                                                     .withNumberPinBoxes(5)
                                                     .withNativePinBox(false)
                                                     .build();

pinView.setSettings(pinViewSettings);

You can set/get values programatically:

mPinView.setPin(5);
mPinView.setTitles(getResources().getStringArray(R.array.titles));
mPinView.setMaskPassword(true);
mPinView.setDeleteOnClick(true);
mPinView.setNativePinBox(true);
mPinView.setCustomDrawablePinBox(R.drawable.pin_box);
mPinView.setKeyboardMandatory(false);
mPinView.setSplit("**");
mPinView.setColorTitles(Color.rgb(255, 0, 128));
mPinView.setColorTextPinBoxes(Color.rgb(200, 57, 222));
mPinView.setColorSplit(Color.rgb(0, 0, 0));
mPinView.setSizeSplit(getResources().getDimension(R.dimen.size_split));
mPinView.setTextSizePinBoxes(getResources().getDimension(R.dimen.size_pinboxes));
mPinView.setTextSizeTitles(getResources().getDimension(R.dimen.size_titles));

We can use a Listener to notify us when we could do Login and the returned value. You will need to implement OnCompleteListener interface.

pinView.setOnCompleteListener(new PinView.OnCompleteListener() {
            @Override
            public void onComplete(boolean completed, final String pinResults) {
                //Do what you want
                if (completed) {
                    doLogin(pinResults);
                }
            }
        });

Or browse the source code of the sample application for a complete example of use.

Contribution

Pull requests are welcome!

I'd like to improve this library with your help! If you've fixed a bug or have a feature you've added, just create a pull request. Issues can be reported on the github issue tracker.

Author

David Pizarro ([email protected])

Follow me on Google+ Follow me on Twitter Follow me on LinkedIn

License

Copyright 2015 David Pizarro

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.
Comments
  • Readme suggests incorrect gradle include

    Readme suggests incorrect gradle include

    The readme suggests using the following:

    compile 'com.github.dpizarro:pinview:LATEST'

    However, that fails and after checking the repo, I think it should be this:

    compile 'com.github.davidpizarro:pinview:1.0.0'

    Thanks for a great library.

    opened by biddster 4
  • clear() called after onComplete() crashes on a new project

    clear() called after onComplete() crashes on a new project

    This is strange, but calling clear() after onComplete() crashes the project with an IndexOutOfBoundsException in setSpan (0 ... 1). The crash is in Android code (not the library) and seems like Android assumes that the field is not null (or it hasn't updated the length). I've seen some more cases in the internet.

    It happens in a LG G2 and a emulator with a Nexus 5. I can send you an empty project with the code to test the issue if you need it.

    opened by javiergamarra 2
  • Cannot assign to 'pinResults': the setter is public/*package*/ for synthetic extension in '<library Gradle: com.github.davidpizarro:pinview:1.0.0@aar>'

    Cannot assign to 'pinResults': the setter is public/*package*/ for synthetic extension in ''

    trying override fun onVerificationCompleted(phoneAuthCredential: PhoneAuthCredential) { val code = phoneAuthCredential.smsCode if(code != null){ // set pin here automatically to pinView Box pinView.pinResults = code =======================> error goes here :( verifyCode(code) } }

    pls help 😞

    opened by pwraxe 0
  • setOnCompleteListener executes before password masking

    setOnCompleteListener executes before password masking

    Hi,

    Great work on this! I just have a small problem which may be due to my lack of understanding of use of this library. I have a pinview with 4 boxes, 1 number each and setMaskPassword is enabled. I have added a setOnCompleteListener on the pinview and it fires as expected.

    However, I am having trouble with password masking which is not working. Let me explain the observed behavior.

    Upon entering first digit, the digit is not masked and the number is displayed on the screen. Same with entering second and third digits. Upon entering fourth digit, the setOnCompleteListener callback is called and then after a second all four boxes are masked. I am guessing when setOnCompleteListener finishes, the masking is done.

    Please help.

    opened by adityagoel19 2
  • RTL Support issue

    RTL Support issue

    in case of RTL Layout, the input starts from right to left, is there a possible to keep it from left to right. because in case of OTP the numbers usually cames from left to right

    opened by alaa7731 0
Owner
David Pizarro
David Pizarro
GitHub
An Android Widget for selecting items that rotate on a wheel.

Looking for maintainers I'm no longer active on this project but I'll still focus on fixing crashing issues and review any code changes etc. WheelView

Luke Deighton 888 Jan 3, 2023
segmentcontrol widget for android

中文 a simple SegmentControl Widget 使用： 添加依赖到build.gradle： dependencies { compile 'com.7heaven.widgets:segmentcontrol:1.17' } 相关属性: selectedColor 设置

7heaven 614 Nov 26, 2022
Android Thermometer Widget.

Thermometer Android Thermometer Widget. Developer Kofi Gyan ([email protected]) License Copyright 2016 Kofi Gyan. Licensed under the Apache Licen

Kofi Gyan 125 Nov 17, 2022
Custom wheel widget for android

Wheel widget for Android To include the wheel widget in the current layout, you should add in the layout xml this lines: <it.sephiroth.android

Alessandro Crugnola 384 Nov 21, 2022
Android Widget

Circular Counter Circular Counter is an Android Widget I needed to implement for an application I was developing. As it could be useful to more people

Diogo Bernardino 254 Nov 25, 2022
This is a sample Android Studio project that shows the necessary code to create a note list widget, And it's an implementation of a lesson on the Pluralsight platform, but with some code improvements

NoteKeeper-Custom-Widgets This is a sample Android Studio project that shows the necessary code to create a note list widget, And it's an implementati

Ibrahim Mushtaha 3 Oct 29, 2022
A library that provides an implementation of the banner widget from the Material design.

MaterialBanner A banner displays a prominent message and related optional actions. MaterialBanner is a library that provides an implementation of the

Sergey Ivanov 252 Nov 18, 2022
It's a flip way to show share widget.

What's FlipShare ? It's a cool way to show share widget. Demo Usage step 1. Confirm your parentView to locate the share widget, and then you can custo

巴掌 630 Sep 5, 2022
TabSlider - An expanding slider widget which displays selected value

TabSlider - An expanding slider widget which displays selected value

null 1 Apr 20, 2022
Android View for displaying and selecting values in a circle-shaped View, with animations and touch gestures.

CircleDisplay Android View for displaying and selecting (by touch) values / percentages in a circle-shaped View, with animations. Features Core featur

Philipp Jahoda 287 Nov 18, 2022
FloatingView can make the target view floating above the anchor view with cool animation

FloatingView FloatingView can make the target view floating above the anchor view with cool animation Links 中文版 README Blog about FloatingView demo.ap

UFreedom 1.8k Dec 27, 2022
用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View.

PathAnimView 用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View. 现已经找到图片->SVG->PATH的正确姿势， Now i have a pic.I have a view. Oh~,Path(A

张旭童 1.1k Oct 28, 2022
TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Tan Jun Rong 2.6k Jan 5, 2023
View that imitates Ripple Effect on click which was introduced in Android L (for Android 2.3+)

RippleView View that imitates Ripple Effect on click which was introduced in Android L. Usage For a working implementation, Have a look at the Sample

Muthuramakrishnan Viswanathan 1.2k Dec 30, 2022
Snake View is a simple and animated linear chart for Android.

Snake View Snake library is a simple and animation line chart for Android. Latest Version How to use Configuring your project dependencies Add the lib

Txus Ballesteros 339 Dec 14, 2022
[] A simple way to "badge" any given Android view at runtime without having to cater for it in layout

Android ViewBadger A simple way to "badge" any given Android view at runtime without having to cater for it in layout. Note: If your aim is to replica

Jeff Gilfelt 3k Nov 28, 2022
Android view with both path from constructed path or from svg.

android-pathview You want to animate svg or normal Paths?<br> Change the color, pathWidth or add svg.<br> Animate the "procentage" property to make th

Georgi Eftimov 2.9k Dec 27, 2022
A horizontal view scroller library for Android

View Flow for Android ViewFlow is an Android UI widget providing a horizontally scrollable ViewGroup with items populated from an Adapter. Scroll down

Patrik Åkerfeldt 1.8k Dec 29, 2022
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.

This project isn't maintained anymore. It is now recommended to use https://github.com/peterLaurence/MapView. MapView is maintained by Peter, one of o

Mike Dunn 1.5k Dec 29, 2022