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.