SimpleRangeView

SimpleRangeView is custom view component for Android, written in Kotlin, that provides for the selection of a range of discrete values designated by tick marks.

Gradle

dependencies {
 compile 'me.bendik.simplerangeview:simplerangeview:0.2.0'
}

Basic usage	RangeView Builder

Attributes

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

Range Attributes

name	format	description	default value
lineColor	color	Range bar color	#F7F7F7
activeLineColor	color	Active range bar color	#0C6CE1
fixedLineColor	color	Fixed range bar color	#E3E3E3
lineThickness	dimension	Range bar thickness	4
activeLineThickness	dimension	Active range bar thickness	6
fixedLineThickness	dimension	Fixed range bar thickness	6
innerRangePadding	dimension	Range inner padding	16
innerRangePaddingLeft	dimension	Range inner left padding	16
innerRangePaddingRight	dimension	Range inner right padding	16
movable	boolean	It allows to move the entire active range	false
showFixedLine	boolean	Show fixed range bar	false
count	integer	Count of ticks	10
start	integer	Start of active range	0
end	integer	End of active range	9
minDistance	integer	Minimal active range length	1
maxDistance	integer	Maximal active range length	0 ~ count
startFixed	integer	Start of fixed range	0
endFixed	integer	End of fixed range	0

Tick Attributes

name	format	description	default value
tickColor	color	Range bar tick color	#C5C5C5
activeTickColor	color	Active tick color	#FFFFFF
fixedTickColor	color	Fixed tick color	#C5C5C5
tickRadius	dimension	Tick radius	1
activeTickRadius	dimension	Active tick radius	1
fixedTickRadius	dimension	Fixed tick radius	1
showTicks	boolean	Show ticks	true
showActiveTicks	boolean	Show fixed ticks	true
showFixedTicks	boolean	Show active ticks	true

Label Attributes

name	format	description	default value
labelColor	color	Label color	#C5C5C5
activeLabelColor	color	Active label color	#0C6CE1
fixedLabelColor	color	Fixed label color	#0F7BFF
activeThumbLabelColor	color	Active thumb label color	#C5C5C5
fixedThumbLabelColor	color	Fixed thumb label color	#C5C5C5
labelFontSize	dimension	Label font size	12
labelMarginBottom	dimension	Label bottom margin	16
showLabels	boolean	Show labels	true

Thumb Attributes

name	format	description	default value
activeThumbColor	color	Active thumb color	#0F7BFF
activeFocusThumbColor	color	Focused thumb color	#0F7BFF
fixedThumbColor	color	Fixed thumb color	#E3E3E3
activeFocusThumbAlpha	float	Focused thumb alpha	1.0
activeThumbRadius	dimension	Active thumb radius	10
activeThumbFocusRadius	dimension	Focused thumb radius	14
fixedThumbRadius	dimension	Fixed thumb radius	10

Examples

Layout XML

This is a SimpleRangeView with a lower and upper value, count of ticks and fixed range

<me.bendik.simplerangeview.SimpleRangeView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fixed_rangeview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:count="10"
    app:start="3"
    app:end="6"
    app:showFixedLine="true"
    app:startFixed="2"
    app:endFixed="7"
    />

This is a SimpleRangeView with movable active range and minimal length of active range

<me.bendik.simplerangeview.SimpleRangeView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fixed_rangeview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:count="10"
    app:start="3"
    app:end="6"
    app:movable="true"
    app:minDistance="2"
    />

Adding listeners

rangeView.setOnRangeLabelsListener(new SimpleRangeView.OnRangeLabelsListener() {
    @Nullable
    @Override
    public String getLabelTextForPosition(@NotNull SimpleRangeView rangeView, int pos, @NotNull SimpleRangeView.State state) {
        return String.valueOf("L" + (pos+1));
    }
});

rangeView.setOnTrackRangeListener(new SimpleRangeView.OnTrackRangeListener() {
    @Override
    public void onStartRangeChanged(@NotNull SimpleRangeView rangeView, int start) {
        editStart.setText(String.valueOf(start));
    }

    @Override
    public void onEndRangeChanged(@NotNull SimpleRangeView rangeView, int end) {
        editEnd.setText(String.valueOf(end));
    }
});

rangeView.setOnChangeRangeListener(new SimpleRangeView.OnChangeRangeListener() {
    @Override
    public void onRangeChanged(@NotNull SimpleRangeView rangeView, int start, int end) {
        editRange.setText(String.valueOf(start) + " - " + String.valueOf(end));
    }
});

Using Builder

final SimpleRangeView rangeView = new SimpleRangeView.Builder(this)
        .count(10)
        .start(2)
        .end(7)
        .startFixed(1)
        .endFixed(8)
        .showFixedLine(true)
        .movable(true)
        .onChangeRangeListener(this)
        .onTrackRangeListener(this)
        .onRangeLabelsListener(this)
        .build();

Change Log

0.2 - Bugfixes, Refactoring & maxDistance attribute
0.1.1 - Bugfixes & Handle Instance State
0.1 - Initial release

TODO

Get default colors from material and appcompat themes
Handle onSaveInstanceState / onRestoreInstanceState
Implement minimal distance between two active range labels (?)

License

Copyright (C) 2016 Vitaliy Bendik

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.

Simple Range View

General

Additional

Advertisement