Skip to content
Related Articles
Open in App
Not now

Related Articles

Meter Number Picker in Android

Improve Article
Save Article
  • Last Updated : 06 Jan, 2021
Improve Article
Save Article

Meter picker is one of the most popular functions used in Android apps for tracking the meter. You can see this function in the distance tracking app. With the help of this, you can track how much distance you have traveled. In this article, we are going to learn how to implement a meter picker in the android app. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Meter Number Picker in Android

Application of Meter Number Picker

  • This Meter Picker is some of the games to track how much you have traveled.
  • In most food delivery app, this meter picker is used to track how must distance the delivery boy has traveled.

Attributes of Meter Number Picker



mnp_textSizeUse to represent the text size of the number
mnp_minRepresent the minimum value of the widget
mnp_maxRepresent the maximum value of the widget
mnp_textColorRepresent the Text color of the number
mnp_typefaceRepresent typeface of number
mnp_minHeightRepresent the minimum height of the widget
mnp_minWidthRepresent the minimum width of the widget
mnp_paddingVerticalUse to give padding from top and bottom to widget
mnp_paddingHorizontalUse to give padding from the right and left to the widget

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android StudioNote that select Java as the programming language.

Step 2: Add dependency of Meter number picker library in build.gradle file

First Navigate to Gradle scripts and then to build.gradle(Project) level. Add the line given below in the allprojects{} section.


Then Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation ‘com.alex-zaitsev:meternumberpicker:1.0.5’

Now click on Sync now it will sync your all files in build.gradle().

Step 3: Add code for style in the themes.xml file

First Navigate to the res folder then go to the values folder and then navigate to the themes.xml file and add the following code to it inside the <resources> tag.


<!--style created for meter picker--> 
<style name="MeterNumberPickerStyle">
  <item name="mnp_min">0</item>
  <item name="mnp_max">9</item>
  <item name="mnp_textColor">@android:color/white</item>
  <item name="mnp_textSize">50sp</item>
  <item name="mnp_paddingHorizontal">5dp</item>
  <item name="mnp_paddingVertical">25dp</item>
<!--style given for first 5 elements is black
    And for last element is red-->
<style name="MeterViewStyle">
  <item name="mv_firstColor">@android:color/black</item>
  <item name="mv_numberOfFirst">5</item>
  <item name="mv_numberOfSecond">1</item>
  <item name="mv_pickerStyle">@style/MeterNumberPickerStyle</item>
  <item name="mv_secondColor">@android:color/holo_red_dark</item>

Step 4: Create a new ShadowImageView in your activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.


<?xml version="1.0" encoding="utf-8"?>
        android:layout_centerInParent="true" />
        android:textStyle="bold" />

Step 5: Working with the file

Go to the file and refer to the following code. Below is the code for the file. Comments are added inside the code to understand the code in more detail.


import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.alexzaitsev.meternumberpicker.MeterView;
public class MainActivity extends AppCompatActivity {
    // variable to pick number
    MeterView meterNumberPicker;
    protected void onCreate(Bundle savedInstanceState) {
        // number picker called using meter picker id
        meterNumberPicker = findViewById(;
        // button called using button id
        Button button = (Button) findViewById(;
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                int number = meterNumberPicker.getValue();
                // Toast value to display the number
                Toast.makeText(MainActivity.this, "" + number, Toast.LENGTH_SHORT).show();


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!