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.