Android NumberPicker – Examples and Libraries

Android NumberPicker Examples and Libraries

You can build an input component for picking numbers using a spinner or a chooser dialog. Or you can use an already existing solution. In this tutorial we want to look at some solutions that can allow us pick numbers in ase we need such a functionality in our android apps.

Here are the solutions:

(a). NumberSlidingPicker

It is an Android Number Picker with gestures.

NumberSlidingPicker is a widget that enables the user to select a number from a predefined range. Progress value can be changed using the up and down arrows, click and edit the editable text or swiping up/down or left/right.

Check it below in the demo gif:

Android numberpicker

Step 1: Install it

Start by installing this widget:

Add jitpack in your project level build file:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Then the implementation statement in app levelbuild file:

implementation 'com.github.sephiroth74:NumberSlidingPicker:1.0.3'

Now sync for it to be downloaded.

Step 2: Add it To Layout

You need to add this numberpicker to your xml layout:

    <it.sephiroth.android.library.numberpicker.NumberPicker
        style="@style/NumberPicker.Filled"
        app:picker_max="100"
        app:picker_min="0"
        android:progress="50"
        app:picker_stepSize="2"
        app:picker_tracker="exponential"
        app:picker_orientation="vertical"
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />

Step 3: Write Code

In your code you can attach a listener to the numberpicker to get when the user selects a given number:

        numberPicker.doOnProgressChanged { numberPicker, progress, formUser ->
            // progress changed
        }

        numberPicker.doOnStartTrackingTouch { numberPicker -> 
            // tracking started
        }

        numberPicker.doOnStopTrackingTouch { numberPicker -> 
            // tracking ended
        }

Example

Here’s an example showing how to use this numberpicker widget:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.databinding.ViewDataBinding
import androidx.lifecycle.ViewModelProviders
import it.sephiroth.android.library.numberpicker.NumberPicker
import it.sephiroth.android.numberpicker.demo.databinding.ActivityMainBinding
import timber.log.Timber

class MainActivity : AppCompatActivity() {
    private lateinit var presenter: Presenter
    private lateinit var model: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        model = ViewModelProviders.of(this).get(MainViewModel::class.java)
        presenter = Presenter()

        val binding: ActivityMainBinding =
                DataBindingUtil.setContentView<ViewDataBinding>(this, R.layout.activity_main) as ActivityMainBinding
        binding.lifecycleOwner = this
        binding.model = model
        binding.presenter = presenter

        // regular listener
//        numberPicker.setListener {
//            onProgressChanged { numberPicker, progress, fromUser ->
//                Timber.v("doOnProgressChanged($progress, $fromUser)")
//            }
//
//            onStartTrackingTouch {
//                Timber.v("onStartTrackingTouch")
//            }
//
//            onStopTrackingTouch {
//                Timber.v("onStopTrackingTouch")
//            }
//        }
    }

    inner class Presenter {
        fun onProgressChanged(numberPicker: NumberPicker, progress: Int, fromUser: Boolean) {
            Timber.d("onProgressChanged")
            model.globalProgress.value = progress
        }

        fun onStartTracking(numberPicker: NumberPicker) {
            Timber.d("onStartTracking")
        }

        fun onStopTracking(numberPicker: NumberPicker) {
            Timber.d("onStopTracking")
        }
    }
}

You can find the full code here.

Reference

Find code referencehere.

BEFORE YOU GO

YOU'VE BEEN SELECTED FOR A GIFT

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Leave a Reply

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

*

code