#IndicatorSeekBar
#级标题
A deeply customized SeekBar on Android, which can be changed the size / color / thumbDrawable / tickDrawable / textsBelowTick / indicator by user, can show an indicator view with progress above SeekBar when seeking. ###1. ScreenShot
###2. How to use ####2.1 xml
<com.warkiz.widget.IndicatorSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:isb_max="78.8"
app:isb_min="10.2"
app:isb_progress="50.3"
app:isb_progress_value_float="true"
app:isb_show_indicator="true"/>
<com.warkiz.widget.IndicatorSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isb_indicator_custom_layout="@layout/custom_indicator"
app:isb_indicator_type="custom"
app:isb_max="189"
app:isb_min="23"
app:isb_progress="67"
app:isb_seek_bar_type="discrete_ticks_texts"
app:isb_show_indicator="true"
app:isb_text_array="@array/tick_below_text_length_9"
app:isb_text_color="@color/color_blue"
app:isb_thumb_width="18dp"
app:isb_tick_drawable="@mipmap/ic_launcher"
app:isb_tick_num="9"
app:isb_tick_on_thumb_left_hide="true"
app:isb_track_background_bar_color="#FF00"
app:isb_track_background_bar_size="2dp"
app:isb_track_progress_bar_color="#FF0000"
app:isb_track_progress_bar_size="5dp"/>
####2.2 Java
IndicatorSeekBar indicatorSeekBar = new IndicatorSeekBar.Builder(this)
.setMax(200)
.setMin(0)
.setProgress(35)
.setSeekBarType(IndicatorSeekBarType.DISCRETE_TICKS)
.setTickType(TickType.OVAL)
.setTickColor(Color.parseColor("#0000FF"))
.setTickSize(8)
.setTickNum(8)
.setBackgroundTrackSize(2)
.setBackgroundTrackColor(Color.parseColor("#666666"))
.setProgressTrackSize(3)
.setProgressTrackColor(Color.parseColor("#0000FF"))
.showIndicator(true)
.setIndicatorType(IndicatorType.SQUARE_CORNERS)
.setIndicatorColor(Color.parseColor("#0000FF"))
.build();
####3. Ability #####3.1 custom color/size Below seekbar parts' color/size can be custom:
- background track
- progress track
- ticks
- text below tick
- thumb
- indicator
- indicator text
#####3.1 hide ticks you can hide the ticks on the seekbar both end sides or on thumb left.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_tick_both_end_hide="true"
...
/>
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_tick_on_thumb_left_hide="true"
...
/>
#####3.1 change the seekbar corners shape seekbar's track's is round corners default , could be set to square.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_tick_both_end_hide="true"
...
/>
#####3.1 seeking to show progress text below thumb. when the seekabr type is CONTINUOUS or DISCRETE_TICKS , you can set the progress text showing when seeking.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_seek_bar_type="continuous"/discrete_ticks
app:isb_thumb_progress_stay="true"
...
/>
or
indicatorSeekBar.setTextArray(R.array.tick_below_text_length_5);
#####3.1 custom 2 below texts on both ends of seekbar when the seekabr type is CONTINUOUS_TEXTS_ENDS or DISCRETE_TICKS_TEXTS_ENDS , you can set the left & right text.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_seek_bar_type="continuous_texts_ends"/discrete_ticks_texts_ends
app:isb_text_left_end="last"
app:isb_text_right_end="next"
...
/>
#####3.1 custom texts below tick when the seekabr type is DISCRETE_TICKS_TEXTS , you can custom the texts below tick by an array, and the array's length should equals ticks num.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_text_array="@array/tick_below_text_length_5"
app:isb_tick_num="5"
...
/>
or
indicatorSeekBar.setTextArray(R.array.tick_below_text_length_5);
#####3.1 custom thumb drawable Thumb can be replace by a drawable:
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_thumb_drawable="@mipmap/ic_launcher"
...
/>
#####3.1 custom tick drawable Ticks can be replace by a drawable:
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_tick_drawable="@mipmap/ic_launcher"
...
/>
#####3.1 custom indicator IndicatorSeekbar provided 3 kinds of indicator type ROUNDED_CORNERS / SQUARE_CORNERS / CUSTOM, when the indicator type is CUSTOM , you can set a custom indicator view.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_indicator_type="custom"
app:isb_indicator_custom_layout="@layout/indicator"
...
/>
or
indicatorSeekBar.setCustomIndicator(R.layout.custom_indicator_blue);
#####3.1 custom indicator's top content view when the indicator type is ROUNDED_CORNERS or SQUARE_CORNERS , you can set a custom indicator top content view.
<com.warkiz.widget.IndicatorSeekBar
...
app:isb_indicator_type="rounded_corners"/square_corners
app:isb_indicator_custom_top_content_layout="@layout/indicator"
...
/>
or
indicatorSeekBar.getIndicator().setIndicatorTopContentLayout(R.layout.top_content_view);
#####3.1 Listener indicatorSeekBar.setOnSeekChangeListener(new IndicatorSeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(IndicatorSeekBar seekBar, int progress, float progressFloat, boolean fromUserTouch) {
}
@Override
public void onSectionChanged(IndicatorSeekBar seekBar, int thumbPosOnTick, String tickBelowText, boolean fromUserTouch) {
//only callback on discrete serious seekbar type.
}
@Override
public void onStartTrackingTouch(IndicatorSeekBar seekBar, int thumbPosOnTick) {
}
@Override
public void onStopTrackingTouch(IndicatorSeekBar seekBar) {
}
});
####3. Proguard -keep class com.warkiz.widget.** { *; }
####3. Attr //seekBar //indicator //track //thumb //tick //texts
####3. License Apache License 2.0
####3. Contact me Feel free to contact me if you have any trouble on this project.
- Create an issue.
- Send mail to me, "warkiz".concat("4j").concat("@").concat("gmail.com")