Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Meter Number Picker in Android

  • Last Updated : 06 Jan, 2021

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

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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_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.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :