Code Monkey home page Code Monkey logo

pin-number-picker's Introduction

Pin-Number-Picker

A librarification of the PinNumberPicker from the AndroidTV Settings app, with a couple additional goodies. This is meant for Android TV apps where the user has a D-pad remote or keyboard!

screenshot

How to Use

The sample app has a working example, but here's the gist of it: one PinNumberPicker is one vertical carousel of numbers. So, align however many of them you need in your layout, then connect them in Java:

<net.firekesti.pinnumberpicker.PinNumberPicker
        android:id="@+id/picker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<net.firekesti.pinnumberpicker.PinNumberPicker
        android:id="@+id/picker2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
PinNumberPicker numberPicker1 = (PinNumberPicker) findViewById(R.id.picker1);
PinNumberPicker numberPicker2 = (PinNumberPicker) findViewById(R.id.picker2);
numberPicker1.setValueRange(0, 9);
numberPicker1.setNextNumberPicker(numberPicker2);

By using setNextNumberPicker, you allow the user to go from one PinNumberPicker to the next by using the Enter or D-pad Center button. It also ties in with the OnFinalNumberDoneListener, which will be called whenever there is no "next" PinNumberPicker in the sequence. This allows you to read the number values once the user presses Enter/Center on the last picker.

The Listener

This allows you to listen for when the user presses Enter/Center on the last PinNumberPicker in the sequence. From here, you can collect the number values.

numberPicker4.setOnFinalNumberDoneListener(new OnFinalNumberDoneListener() {
    @Override
    public void onDone() {
        String pin = "" + numberPicker1.getValue() + numberPicker2.getValue() +
                numberPicker3.getValue() + numberPicker4.getValue();
        Toast.makeText(MainActivity.this, "PIN is " + pin, Toast.LENGTH_SHORT).show();
    }
});

Arrows

The Android TV settings app version does not have arrows. I decided to add them as an optional feature! Enabling them is a two-step process. First:

numberPicker1.setArrowsEnabled(true);
numberPicker2.setArrowsEnabled(true);

Then, in your dimens.xml:

<dimen name="pin_number_picker_height">@dimen/pin_number_picker_height_with_arrows</dimen>

This is covered in the sample app as well.

How to Style

You can change the color of the number text, the focus-background color, and the arrow color like this:

<color name="pin_number_picker_focused_background">@color/colorPrimaryDark</color>
<color name="pin_picker_arrow_color">@color/colorAccent</color>
<color name="pin_picker_text_color">@color/colorTextLight</color>

You can change the opacity of the numbers, when focused and not, like this:

<item name="pin_alpha_for_focused_number" type="dimen" format="float">0.5</item>
<item name="pin_alpha_for_adjacent_number" type="dimen" format="float">0.1</item>

You can slow down or speed up the animations like this:

<integer name="pin_number_scroll_duration">500</integer>
<integer name="pin_number_scroll_anim_duration">250</integer>

Finally, you can change the size this way:

<dimen name="pin_number_picker_text_size">32sp</dimen>
<dimen name="pin_number_picker_text_view_width">64dp</dimen>
<dimen name="pin_number_picker_text_view_height">64dp</dimen>
<dimen name="pin_number_picker_width">64dp</dimen>
<dimen name="pin_number_picker_height_with_arrows">320dp</dimen>
<dimen name="pin_number_picker_height_standard">192dp</dimen>

Please make sure!!!

###pin_number_picker_height_standard should be 3x pin_number_picker_text_view_height
###pin_number_picker_height_with_arrows should be 5x pin_number_picker_text_view_height

Why, you ask? Well, you want to avoid something like this:
screenshot

Okay, I think that's it! Please file an Issue if you have any questions or see any bugs!

pin-number-picker's People

Contributors

firekesti avatar

Watchers

James Cloos avatar Chuck Zhang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.