Skip to content

Home

Jump to bottom Edit New page
Santiago Castro edited this page Oct 27, 2015 · 26 revisions

RangeBar

public class RangeBar extends View

Table of Contents

Installation

Edit build.gradle 

repositories {
    mavenCentral()
}

dependencies {
    compile 'com.appyvet:materialrangebar:1.2'
}

Class Overview

The RangeBar is similar to an enhanced SeekBar widget, though it doesn't make use of the SeekBar. It provides for the selection of a range of values rather than a single value. The selectable range values are discrete values designated by tick marks; the thumb (handle) will snap to the nearest tick mark.

Developers can customize the following attributes (both via XML and programmatically):

  • bar color
  • bar thickness
  • tick height
  • number of ticks
  • connecting line thickness
  • connecting line color
  • thumb normal image
  • thumb pressed image
If any of the following attributes are specified, the thumb images will be ignored and be replaced with a circle whose properties can be specified as follows:
  • thumb radius
  • thumb normal color
  • thumb pressed color
Finally, the following property can be set programmatically, but not via XML:
  • thumb indices (the location of the thumbs on the RangeBar)
A RangeBarSample app is included in this repository to demonstrate the customizable attributes of the RangeBar and its functionality.

Usage

To add the RangeBar to your application, specify com.edmodo.rangebar.RangeBar in your layout XML. Be sure to include xmlns:custom="http://schemas.android.com/apk/res-auto" in your RangeBar if you are setting any of the custom RangeBar attributes. 

<com.edmodo.rangebar.RangeBar
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rangebar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Add customizable attributes with the alias custom: followed by the attribute name and value. 

<com.edmodo.rangebar.RangeBar
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rangebar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    custom:tickCount="5"
    custom:barColor="@color/fuchsia"
    />

Alternatively, you can modify attributes programmatically by using provided RangeBar methods: 

RangeBar rangebar = (RangeBar) findViewById(R.id.rangebar);
rangebar.setTickCount(50);
rangebar.setTickHeight(25);
rangebar.setBarWeight(6);
rangebar.setBarColor(229999999);

To detect when the RangeBar has changed, you can create a RangeBar.OnRangeBarChangeListener() to notify you when the indices of the RangeBar have changed: 

rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
    @Override
    public void onIndexChangeListener(RangeBar rangeBar, int leftThumbIndex, int rightThumbIndex) { 
        //Code using the leftThumbIndex and rightThumbIndex to update the index values.
    }
});

XML Attributes

Note: dim indicates a dimension type.

Attribute Name Related Method Default Value Description
custom:tickCount setTickCount(integer) 3 Sets the number of ticks on the rangebar. Ticks will space themselves evenly along the length of the bar. Note: RangeBar begins to slow down noticeably with >1000 ticks. Note: setTickCount() resets the thumb indices, but only before either thumb has been touched. Consequently, initializing the tick count should set the indices to either end, but changing the tick count during usage should not reset the indices (unless necessary).
custom:tickHeight setTickHeight(dim) 24dp Sets the height of the tick bars.
custom:barWeight setBarWeight(dim) 2px Sets the weight of the background bar and the tick bars.
custom:barColor setBarColor(int) Color.LTGRAY Sets the color of the background bar and the tick bars. Takes in either a reference value to a color or a hex color (e.g. "#FFFFFFFF").
custom:connectingLineWeight setConnectingLineWeight(dim) 4px Sets the weight of the connecting line between the thumbs.
custom:connectingLineColor setConnectingLineColor(int) '#FF33B5E5' (Holo Blue Light) Sets the color of the connecting line between the thumbs. In XML, takes in either a reference value to a color (e.g. Color.LTGRAY) or a hex color (e.g. "#FFFFFFFF"). Programmatically, it takes in the integer value of a color. Use Color.parseColor() to convert from a hex color to an integer value.
custom:thumbImageNormal setThumbImageNormal(int) R.drawable.seek_thumb_normal Sets the image to be used for the "normal" image for the thumbs. Takes in a reference ID to the desired image.
custom:thumbImagePressed setThumbImagePressed(int) R.drawable.seek_thumb_pressed Sets the image to be used for the "pressed" image for the thumbs. takes in a reference ID to the desired image.
custom:thumbRadius setThumbRadius(dim) 15dp If thumbRadius is set in XML or programmatically, it will override the thumb images and draw a circle with a radius equal to the value of thumbRadius for each of the thumbs. The color of the normal/pressed circles will be equal to custom:primaryColor, and will default to Holo Blue Light. In order to reset the thumbs to the default size, call setThumbRadius(-1).
custom:thumbColorNormal setThumbColorNormal(int) '#FF33B5E5' (Holo Blue Light) If thumbColorNormal is set in XML or programmatically, it will override the thumb images and draw a circle with a normal color equal to thumbColorNormal. In order to reset the thumbs to the default normal thumb color, call setThumbColorNormal(-1).
custom:thumbColorPressed setThumbColorPressed(int) '#FF33B5E5' (Holo Blue Light) If thumbColorPressed is set in XML or programmatically, it will override the thumb images and draw a circle with a pressed color equal to thumbColorPressed. In order to reset the thumbs to the default pressed thumb color, call setThumbColorPressed(-1).
None setThumbIndices(int leftThumbIndex, int rightThumbIndex) leftThumbIndex = 0, rightThumbIndex = tickCount - 1 Will set the thumb indices to the specified values. If either value is outside the allowable bounds (from 0 to tickCount - 1), it will throw a Log error and change nothing.

Note that including any of the attributes thumbRadius, thumbColorNormal, or thumbColorPressed will override the thumb images, and set the other two attributes to their default values. To reset the thumbs to the thumb images during a program, call setThumbRadius(-1), setThumbColorNormal(-1), and setThumbColorPressed(-1).

Download

The latest version can be downloaded as a zip and referenced by your application as a library project.

License

Copyright 2013, Edmodo, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or 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.

Contributions

We'd love for you to participate in the development of our project. Before we can accept your pull request, please sign our Individual Contributor License Agreement. It's a short form that covers our bases and makes sure you're eligible to contribute. Thank you!

http://goo.gl/gfj6Mb

Add a custom footer
Add a custom sidebar
Clone this wiki locally