Skip to content

A custom SeekBar on Android, which can be changed the size ,color , thumb drawable , tick drawable , tick text and isb_indicator , also , will show an isb_indicator view with progress above SeekBar when seeking. https://github.com/warkiz/IndicatorSeekBar

License

Notifications You must be signed in to change notification settings

kogorkus/IndicatorSeekBar

Repository files navigation

#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.

  1. Create an issue.
  2. Send mail to me, "warkiz".concat("4j").concat("@").concat("gmail.com")

About

A custom SeekBar on Android, which can be changed the size ,color , thumb drawable , tick drawable , tick text and isb_indicator , also , will show an isb_indicator view with progress above SeekBar when seeking. https://github.com/warkiz/IndicatorSeekBar

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 100.0%