DOCSEARCHbyAlgolia
Submit Docs

BubbleSeekBar Documentation

repository·master·Indexed 25 days ago

https://github.com/woxingxiao/bubbleseekbar

A highly customizable Android seek bar featuring a floating bubble view to display progress. Available in Lite and Enhanced versions, it supports configuration via XML and Java/Kotlin for colors, sections, and text. Includes functionality for custom section texts and offset correction for scrollable containers.

Tokens
1.7K
Snippets
5
Records
5
Agent score
36%

What's inside BubbleSeekBar

  1. Initialize BubbleSeekBar in XML

    master

    You can add BubbleSeekBar to your layout files using the com.xw.repo.BubbleSeekBar class. Use the app: namespace for custom attributes.

    Common attributes include:

    • app:bsb_max: Maximum value.
    • app:bsb_min: Minimum value.
    • app:bsb_progress: Current progress.
    • app:bsb_section_count: Number of sections.
    • app:bsb_track_color: Color of the main track.
    • app:bsb_second_track_color: Color of the second track.
    • app:bsb_bubble_color: Color of the progress bubble.
    • app:bsb_show_thumb_text: Whether to show text on the thumb.
    • app:bsb_show_section_text: Whether to show text for sections.
    <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"/>

  2. Install BubbleSeekBar

    master

    Add the dependency to your build.gradle file. There are two versions available:

    1. Lite version (Recommended): Supports initialization via XML only for min, max, and progress.
    2. Enhanced version: Supports full initialization via both XML and Java/Kotlin.

    Replace ${LATEST_VERSION} with the current version (e.g., 3.20).

    dependencies {
     // lite version (recommended)
     implementation 'com.xw.repo:bubbleseekbar:${LATEST_VERSION}-lite'

     // enhanced version
     // implementation 'com.xw.repo:bubbleseekbar:${LATEST_VERSION}'
}

  3. Correct Bubble Position in Scrollable Containers

    master

    When BubbleSeekBar is placed inside a scrollable parent view (like ScrollView), the bubble's position may appear incorrect during scrolling. To fix this, you must call correctOffsetWhenContainerOnScrolling() inside your container's scroll listener.

       mContainer.setOnYourContainerScrollListener(new OnYourContainerScrollListener() {
       @Override
       public void onScroll() {
           // call this method to correct offsets
           mBubbleSeekBar.correctOffsetWhenContainerOnScrolling();
       }
   });

  4. Initialize BubbleSeekBar in Java (Enhanced Version Only)

    master

    If you are using the enhanced version (not the lite version), you can configure the seek bar programmatically using getConfigBuilder(). This allows for full customization of colors, text sizes, and section behaviors.

    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();

  5. Customize Section Texts

    master

    To provide custom text for specific sections, first ensure that bsb_section_text_position is set to below_section_mark. Then, use setCustomSectionTextArray with a CustomSectionTextArray implementation to map section indices to strings.

       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;
       }
   });