Meter Number Picker Library Using Android Application

Introduction

   
This article demonstrates how to add Meter Number Picker Library on Android Application using Android studio. The Android library provides a customizable NumberPicker styled as a meter. 
 
 
Step 1
 
Create a new project in Android Studio from File >> Project and fill in all the necessary details. 
 
 
Next, go to Gradle Scripts >> build.gradle (Module: app).Select build.gradle, The app gradle compiles the code, and then build types will appear. Just replace that with the following code. To make a Meter Number Picker in your layout in  XML, add the Meter Number library in your project or you can also use Gradle. 
 
Usage 
  
Make sure you've added maven central to the list.
  1. allprojects {  
  2.     repositories {  
  3.         google()  
  4.         jcenter()  
  5.         mavenCentral()  
  6.     }  
  7. }  
Compile Code
  1. implementation 'com.alex-zaitsev:meternumberpicker:1.0.2'  
Step 2
 
Next, go to app >> res >> values >>style.xml.
 
 
Select the style page. The XML code will appear. Create black and red color themes. 
 
 
Style Code
 
First, create the style for your meter number picker, then create a style for your meter view.
  1. <resources>  
  2.   
  3.     <!-- Base application theme. -->  
  4.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
  5.         <!-- Customize your theme here. -->  
  6.         <item name="colorPrimary">@color/colorPrimary</item>  
  7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  8.         <item name="colorAccent">@color/colorAccent</item>  
  9.     </style>  
  10.     <style name="MeterNumberPickerStyle">  
  11.         <item name="mnp_min">0</item>  
  12.         <item name="mnp_max">9</item>  
  13.         <item name="mnp_textColor">@android:color/white</item>  
  14.         <item name="mnp_textSize">50sp</item>  
  15.         <item name="mnp_paddingHorizontal">5dp</item>  
  16.         <item name="mnp_paddingVertical">25dp</item>  
  17.     </style>  
  18.     <style name="MeterViewStyle">  
  19.         <item name="mv_firstColor">@android:color/black</item>  
  20.         <item name="mv_numberOfFirst">5</item>  
  21.         <item name="mv_numberOfSecond">1</item>  
  22.         <item name="mv_pickerStyle">@style/MeterNumberPickerStyle</item>  
  23.         <item name="mv_secondColor">@android:color/holo_red_dark</item>  
  24.     </style>  
  25. </resources>  
Step 3
 
Next, go to app >> res >> layout >>activity_main.xml. Select the activity page. The XML code will appear. Create the layout of the Meter View and Button.
 
 

Design View  

 
Meter Number Picker and Button View. 
 
 
Step 4
 
Next, go to app >> java >> package name. Select MainActivity.java. The Java code will appear.
 
 
Toast Message Code 
 
This toast message is everything you need for most toast notifications.
  1. Toast.makeText(MainActivity.this"" + number, Toast.LENGTH_SHORT).show();  
MainActivity Code
  1. package com.example.ravi.meternumberpicker;  
  2.   
  3. import android.hardware.camera2.params.MeteringRectangle;  
  4. import android.support.v7.app.AppCompatActivity;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.Button;  
  8. import android.widget.Toast;  
  9. import com.alexzaitsev.meternumberpicker.MeterNumberPicker;  
  10. import com.alexzaitsev.meternumberpicker.MeterView;  
  11.   
  12. public class MainActivity extends AppCompatActivity {  
  13.   
  14.     MeterView meterNumberPicker;  
  15.     @Override  
  16.     protected void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.activity_main);  
  19.   
  20.         meterNumberPicker = (MeterView) findViewById(R.id.meterView);  
  21.         meterNumberPicker.setValue(6000);  
  22.         Button button = (Button) findViewById(R.id.button);  
  23.         button.setOnClickListener(new View.OnClickListener() {  
  24.             @Override  
  25.             public void onClick(View view) {  
  26.                 int number = meterNumberPicker.getValue();  
  27.                 Toast.makeText(MainActivity.this"" + number, Toast.LENGTH_SHORT).show();  
  28.   
  29.             }  
  30.         });  
  31.     }  
  32.  
Step 5
 
Next, go to Android Studio and deploy the application. Select Emulator or your Android Device with USB debugging enabled. Give it a few seconds to make installations and set permissions  
 
Run the application in your desired emulator (Shift + F10).
 
 
 

Summary

 
Finally, we have successfully created the Meter Number Picker Application. Later we will discuss more Android applications.


Similar Articles