Simple Range View


Source link: https://github.com/bendikv/simple-range-view

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.1.1' 
}
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
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.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. 

Resources

gifencoder is a pure Java library implementing the GIF89a specification.

SwagPoints - An Android custom circular SeekBar that supports max/min range and step settings.

Android Loaders for the rest of us.

The concept of loaders in Android is pretty great: a way to do async work in a lifecycle-aware way. Unfortunately, the implementation is pretty bad. Loadie attempts to fix this in several ways.

Providing swipe feature for android applications.

You can now select a date and a time with only one widget!

A sample Android application to demonstrate how to build screens as fully independent modules.

It relies on a Finite State Machine (EasyFlow), to handle screens as states and trigger/consume events. Events allow the application to handle navigation between screens. The global context of the FSM is used to pass arguments as a Bundle. It also shows how to use dependency injection (via Dagger 2 for example) in modules.

This way:

  • modules are fully independent
  • modules declare the dependencies they need
  • modules declare the states they correspond to
  • modules declare the events that can be triggered
  • the hosting application sets up the states it uses (i.e., "screens")
  • the hosting application sets up how to navigation between states (with events)
  • the hosting application sets up the dependency injection mechanism

Topics


2D Engines   3D Engines   9-Patch   Action Bars   Activities   ADB   Advertisements   Analytics   Animations   ANR   AOP   API   APK   APT   Architecture   Audio   Autocomplete   Background Processing   Backward Compatibility   Badges   Bar Codes   Benchmarking   Bitmaps   Bluetooth   Blur Effects   Bread Crumbs   BRMS   Browser Extensions   Build Systems   Bundles   Buttons   Caching   Camera   Canvas   Cards   Carousels   Changelog   Checkboxes   Cloud Storages   Color Analysis   Color Pickers   Colors   Comet/Push   Compass Sensors   Conferences   Content Providers   Continuous Integration   Crash Reports   Credit Cards   Credits   CSV   Curl/Flip   Data Binding   Data Generators   Data Structures   Database   Database Browsers   Date &   Debugging   Decompilers   Deep Links   Dependency Injections   Design   Design Patterns   Dex   Dialogs   Distributed Computing   Distribution Platforms   Download Managers   Drawables   Emoji   Emulators   EPUB   Equalizers &   Event Buses   Exception Handling   Face Recognition   Feedback &   File System   File/Directory   Fingerprint   Floating Action   Fonts   Forms   Fragments   FRP   FSM   Functional Programming   Gamepads   Games   Geocaching   Gestures   GIF   Glow Pad   Gradle Plugins   Graphics   Grid Views   Highlighting   HTML   HTTP Mocking   Icons   IDE   IDE Plugins   Image Croppers   Image Loaders   Image Pickers   Image Processing   Image Views   Instrumentation   Intents   Job Schedulers   JSON   Keyboard   Kotlin   Layouts   Library Demos   List View   List Views   Localization   Location   Lock Patterns   Logcat   Logging   Mails   Maps   Markdown   Mathematics   Maven Plugins   MBaaS   Media   Menus   Messaging   MIME   Mobile Web   Native Image   Navigation   NDK   Networking   NFC   NoSQL   Number Pickers   OAuth   Object Mocking   OCR Engines   OpenGL   ORM   Other Pickers   Parallax List   Parcelables   Particle Systems   Password Inputs   PDF   Permissions   Physics Engines   Platforms   Plugin Frameworks   Preferences   Progress Indicators   ProGuard   Properties   Protocol Buffer   Pull To   Purchases   Push/Pull   QR Codes   Quick Return   Radio Buttons   Range Bars   Ratings   Recycler Views   Resources   REST   Ripple Effects   RSS   Screenshots   Scripting   Scroll Views   SDK   Search Inputs   Security   Sensors   Services   Showcase Views   Signatures   Sliding Panels   Snackbars   SOAP   Social Networks   Spannable   Spinners   Splash Screens   SSH   Static Analysis   Status Bars   Styling   SVG   System   Tags   Task Managers   TDD &   Template Engines   Testing   Testing Tools   Text Formatting   Text Views   Text Watchers   Text-to   Toasts   Toolkits For   Tools   Tooltips   Trainings   TV   Twitter   Updaters   USB   User Stories   Utils   Validation   Video   View Adapters   View Pagers   Views   Watch Face   Wearable Data   Wearables   Weather   Web Tools   Web Views   WebRTC   WebSockets   Wheel Widgets   Wi-Fi   Widgets   Windows   Wizards   XML   XMPP   YAML   ZIP Codes