Odometer

General

Category
Free
Tag
Number Pickers
License
Apache License, Version 2.0
Min SDK
15 (Android 4.0.3–4.0.4 Ice Cream Sandwich)
Registered
Jun 22, 2017
Favorites
3
Link
https://github.com/Chils17/OdometerLibrary
See also
MaterialNumberPicker
Number Picker
Android Dial Picker
Meter Number Picker
android-numberpicker

Additional

Language
Java
Version
N/A
Created
Jun 22, 2017
Updated
Jun 29, 2017 (Retired)
Owner
Chirag Patel (Chils17)
Contributor
Chirag Patel (Chils17)
1
Activity
Badge
Generate
Download
Source code

Announcement

Odometer

This is an Android Library for making Odometer with little customization with reading, slots, colors, font and size.
Example is available in app module.

Download

Gradle dependency:

  • Add the following to your project level build.gradle:
repositories {
    maven {
        url "https://jitpack.io"
    }
}
  • Add this to your app build.gradle:
dependencies {
    compile 'com.github.Chils17:OdometerLibrary:687d5ac1e9'
}

Usage

Xml

  • Create Odometer with their properties.
    <com.androidchils.odometer.Odometer
        android:layout_width="match_parent"
        android:layout_height="wrap_content"> 
    </com.androidchils.odometer.Odometer>
  • Add EdgeColor of Odometer
     chils:np_edgeColor="@android:color/white"
  • Add CenterColor of Odometer
     chils:np_centerColor="@android:color/black"
  • Add Reading
    Reading is the values that you want to show.
     chils:np_reading="0000"
  • Add Slots
    Slots means that how many slots you want to create.
    chils:np_slots="4"
  • Add TextColor
    chils:np_textColor="@color/white"
  • Add TextSize
    chils:np_textSize="18sp"
  • Add custom font from .ttf. Put your .ttf file at assets\fonts. Font will apply everywhere title, content, buttons 
    chils:np_font="@string/lato_regular"
  • Those attributes necessary to add reading and slots together in Odometer 
    chils:np_reading="0000"
    chils:np_slots="4"

Odometer

  • You can even use the Odometer alone.
      <com.androidchils.odometer.Odometer
             android:id="@+id/odometer"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             chils:np_centerColor="@android:color/black"
             chils:np_edgeColor="@android:color/white"
             chils:np_font="@string/lato_regular"
             chils:np_reading="0000"
             chils:np_slots="4"
             chils:np_textColor="@color/white"
             chils:np_textSize="18sp" />

Java

  • Create Builder for default Odometer.
    Its necessary to add odometer in the layout.
     Odometer odometer=new Odometer.Builder(this)
                     .build();
     ((LinearLayout) findViewById(R.id.linear)).addView(odometer);
  • Add Customize Color
    .background(int odo_edge_color, int odo_center_color)
      Odometer odometer=new Odometer.Builder(this)
                     .background(ContextCompat.getColor(this, R.color.white), ContextCompat.getColor(this, R.color.black))
                     .build();
      ((LinearLayout) findViewById(R.id.linear)).addView(odometer);
  • Add custom font from .ttf. Put your .ttf file at assets\fonts.
    Font will apply in odometer number.
    .font(String font)
      Odometer odometer=new Odometer.Builder(this)
                      .background(ContextCompat.getColor(this, R.color.white), ContextCompat.getColor(this, R.color.black))
                      .font(getString(R.string.lato_regular))
                      .build();
      ((LinearLayout) findViewById(R.id.linear)).addView(odometer);
  • Add reading to set the value of odometer.
    It is essential of both reading and slot have to be equal in length.
    .reading(String reading)
     Odometer odometer=new Odometer.Builder(this)
                     .background(ContextCompat.getColor(this, R.color.white), ContextCompat.getColor(this, R.color.black))
                     .font(getString(R.string.lato_regular))
                     .reading("1234")
                     .build();
      ((LinearLayout) findViewById(R.id.linear)).addView(odometer);
  • Add slot.
    It is essential of both reading and slot have to be equal in length.
    .slot(int slot)
     Odometer odometer = new Odometer.Builder(this)
                     .background(ContextCompat.getColor(this, R.color.white), ContextCompat.getColor(this, R.color.black))
                     .font(getString(R.string.lato_regular))
                     .reading("1234")
                     .slot(4)
                     .build();
     ((LinearLayout) findViewById(R.id.linear)).addView(odometer);
  • Add text color.
    .textColor(int odo_text_color)
      Odometer odometer = new Odometer.Builder(this)
                     .background(ContextCompat.getColor(this, R.color.white), ContextCompat.getColor(this, R.color.black))
                     .font(getString(R.string.lato_regular))
                     .reading("1234")
                     .slot(4)
                     .textColor(ContextCompat.getColor(this, R.color.white))
                     .build();
      ((LinearLayout) findViewById(R.id.linear)).addView(odometer);
  • Add text size.
    .textSize(float textSize)
       Odometer odometer = new Odometer.Builder(this)
                      .background(ContextCompat.getColor(this, R.color.white), ContextCompat.getColor(this, R.color.black))
                      .font(getString(R.string.lato_regular))
                      .reading("1234")
                      .slot(4)
                      .textColor(ContextCompat.getColor(this, R.color.white))
                      .textSize(18)
                      .build();
       ((LinearLayout) findViewById(R.id.linear)).addView(odometer);

Layout Customization

If you want to get the value of Odometer scrolling value you can create your own.

Note: You can see an example layout in both sample and library modules.

Example XML layout:

     <TextView
            android:id="@+id/tvOutPut"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:textColor="@color/black"
            android:textSize="18sp" />
    
        <Button
            android:id="@+id/btn_submit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:background="@color/black"
            android:text="Submit"
            android:textColor="@color/white"
            android:textStyle="bold" />

Set a listener to be notified when value has changed:

        btn_submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tvOutPut.setText(odometer.getFinalOdometerValue());
            }
        });

License

    Apache Version 2.0

    Copyright 2017.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.