Open In App

Meter Number Picker in Android

Improve
Improve
Like Article
Like
Save
Share
Report

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

Attributes

Description

mnp_textSize Use to represent the text size of the number
mnp_min Represent the minimum value of the widget
mnp_max Represent the maximum value of the widget
mnp_textColor Represent the Text color of the number
mnp_typeface Represent typeface of number
mnp_minHeight Represent the minimum height of the widget
mnp_minWidth Represent the minimum width of the widget
mnp_paddingVertical Use to give padding from top and bottom to widget
mnp_paddingHorizontal Use 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.

mavenCentral()

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.

XML




<!--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>
  
<!--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>
</style>


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




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.alexzaitsev.meternumberpicker.MeterView
        android:id="@+id/meterView"
        style="@style/MeterViewStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
  
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/meterView"
        android:layout_centerInParent="true"
        android:layout_marginTop="70dp"
        android:text="Get"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold" />
  
</RelativeLayout>


Step 5: Working with the MainActivity.java file

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

Java




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


Output:



Last Updated : 06 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads