If you’re looking to make A beautiful Android custom seek bar, which has a bubble view with progress appearing upon when seeking
Here is the complete implementation of Bubble Seekbar
dependencies { // lite version (recommended) // e.g. implementation 'com.xw.repo:bubbleseekbar:3.20-lite' implementation 'com.xw.repo:bubbleseekbar:${LATEST_VERSION}-lite' // enhanced version // e.g. implementation 'com.xw.repo:bubbleseekbar:3.20' // implementation 'com.xw.repo:bubbleseekbar:${LATEST_VERSION}' }
Usage
Init in xml
<com.xw.repo.BubbleSeekBar android:layout_width="match_parent" android:layout_height="wrap_content" app:bsb_bubble_color="@color/color_red_light" app:bsb_bubble_text_color="@color/colorPrimaryDark" app:bsb_max="50.0" app:bsb_min="-50" app:bsb_progress="0" app:bsb_second_track_color="@color/color_red" app:bsb_section_count="5" app:bsb_section_text_position="bottom_sides" app:bsb_show_progress_in_float="true" app:bsb_show_section_mark="true" app:bsb_show_section_text="true" app:bsb_show_thumb_text="true" app:bsb_track_color="@color/color_red_light"/>
<com.xw.repo.BubbleSeekBar android:layout_width="match_parent" android:layout_height="wrap_content" app:bsb_auto_adjust_section_mark="true" app:bsb_second_track_color="@color/color_blue" app:bsb_section_count="5" app:bsb_section_text_position="below_section_mark" app:bsb_show_section_mark="true" app:bsb_show_section_text="true" app:bsb_show_thumb_text="true" app:bsb_thumb_text_size="18sp" app:bsb_touch_to_seek="true"/>
Init in java (not for lite version)
mBbubbleSeekBar.getConfigBuilder() .min(0.0) .max(50) .progress(20) .sectionCount(5) .trackColor(ContextCompat.getColor(getContext(), R.color.color_gray)) .secondTrackColor(ContextCompat.getColor(getContext(), R.color.color_blue)) .thumbColor(ContextCompat.getColor(getContext(), R.color.color_blue)) .showSectionText() .sectionTextColor(ContextCompat.getColor(getContext(), R.color.colorPrimary)) .sectionTextSize(18) .showThumbText() .thumbTextColor(ContextCompat.getColor(getContext(), R.color.color_red)) .thumbTextSize(18) .bubbleColor(ContextCompat.getColor(getContext(), R.color.color_green)) .bubbleTextSize(18) .showSectionMark() .seekBySection() .autoAdjustSectionMark() .sectionTextPosition(BubbleSeekBar.TextPosition.BELOW_SECTION_MARK) .build();
Attentions
- There are two versions of this library.The differences as follow: version init getter/setter lite xml min, max, progress enhanced xml, java all attrs lite version is recommended.
- You must correct the offsets by setting
ScrollListener
whenBubbleSeekBar
‘s parent view is scrollable (such asScrollView
, exceptViewPager
), otherwise, the appearing position of the bubble may be wrong. For example:
mContainer.setOnYourContainerScrollListener(new OnYourContainerScrollListener() { @Override public void onScroll() { // call this method to correct offsets mBubbleSeekBar.correctOffsetWhenContainerOnScrolling(); } });
- When customize the section texts, you should make sure that the attr
bsb_section_text_position
has been set tobelow_section_mark
at first, then follow the example below in your java code:
mBubbleSeekBar.setCustomSectionTextArray(new BubbleSeekBar.CustomSectionTextArray() { @NonNull @Override public SparseArray<String> onCustomize(int sectionCount, @NonNull SparseArray<String> array) { array.clear(); array.put(1, "bad"); array.put(4, "ok"); array.put(7, "good"); array.put(9, "great"); return array; } });
BTW, the attr bsb_show_thumb_text
will be set to false
automatically for avoiding the text coverage display problems.
- The attr
bsb_always_show_bubble
is not supported in theRecyclerView
,ListView
andGridView
.