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.
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 Studio. Note 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 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(); } }); }} |
