markusressel/meter-number-picker


The android library that provides a simple and customizable NumberPicker styled as meter.

Download


Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"
        
    

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]
        
    

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.markusressel:meter-number-picker:v.1.0.4'
	}
	dependencies {
		implementation("com.github.markusressel:meter-number-picker:v.1.0.4")
	}
	<dependency>
	    <groupId>com.github.markusressel</groupId>
	    <artifactId>meter-number-picker</artifactId>
	    <version>v.1.0.4</version>
	</dependency>

                            
    libraryDependencies += "com.github.markusressel" % "meter-number-picker" % "v.1.0.4"
        
        

                            
    :dependencies [[com.github.markusressel/meter-number-picker "v.1.0.4"]]
        
        

Readme


Meter Number Picker

The android library that provides a simple and customizable NumberPicker styled as meter. It's based on NumberPicker.

Android Arsenal

Preview

Usage

Make sure you've added maven central to the list of your repositories at the root build.gradle:

repositories {
    mavenCentral()
}

Then add a dependency into your module's build.gradle:

dependencies {
    implementation 'com.alex-zaitsev:meternumberpicker:1.0.4'
}

Content

The library contains 2 views: MeterNumberPicker and MeterView. MeterNumberPicker is a base block for MeterView. On the screenshot above whole view is the MeterView and a single block of it is MeterNumberPicker. They are pretty simple, you can easily create your own meter class based on them.

Usage

Firstly, create a style for your number 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>

Then, create a style for your meter view and pass the previous style:

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

Almost there! Now create your view and apply the style:

<com.alexzaitsev.meternumberpicker.MeterView
    android:id="@+id/meterView"
    style="@style/MeterViewStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

You can use MeterNumberPicke directly without MeterView wrapper. Look at the MeterView sources to catch more details.
You may also want to check the sample.

Attributes

MeterNumberPicker

|attribute name|attribute description| |:-:|:-:| |mnp_min|The min value of this widget.| |mnp_max|The max value of this widget.| |mnp_value|The current value of this widget.| |mnp_textColor|The text color of the numbers.| |mnp_textSize|The text size of the numbers.| |mnp_typeface|The typeface of the numbers.| |mnp_minWidth|The min width of this widget.| |mnp_minHeight|The min height of this widget.| |mnp_paddingHorizontal|Internal horizontal padding of this widget (left/right).| |mnp_paddingVertical|Internal vertical padding of this widget (top/bottom).|

MeterView

|attribute name|attribute description| |:-:|:-:| |mv_numberOfFirst|Number of the first-placed blocks.| |mv_numberOfSecond|Number of the second-placed blocks.| |mv_firstColor|Background color for the first-placed blocks.| |mv_secondColor|Background color for the second-placed blocks.| |mv_pickerStyle|The style for the MeterNumberPicker.| |mv_enabled|Defines whether view reacts on clicks.|

License

MeterNumberPicker is under Apache 2.0.