EasySignSeekBar Documentation

You can define and configure the SignSeekBar directly in your layout XML files using custom attributes. Common attributes include controlling the visibility of the sign (tooltip), section marks, and text, as well as styling the sign's border and arrow.

<com.zhouyou.view.seekbar.SignSeekBar
        android:id="@+id/seek_bar"
        android:layout_width="match_parent"
        android:layout_height="16dp"
        app:ssb_section_text_position="bottom_sides"
        app:ssb_show_progress_in_float="false"
        app:ssb_show_section_mark="false"
        app:ssb_show_section_text="true"
        app:ssb_show_sign="true"
        app:ssb_show_thumb_text="false"
        app:ssb_sign_arrow_height="5dp"
        app:ssb_sign_arrow_width="10dp"
        app:ssb_sign_border_color="@color/color_red"
        app:ssb_sign_border_size="1dp"
        app:ssb_sign_color="@color/color_gray"
        app:ssb_sign_show_border="true"/>

For dynamic configuration, use the getConfigBuilder() method on your SignSeekBar instance. This allows you to set min/max values, progress, section counts, colors for tracks, thumbs, and signs, as well as text sizes and positions.

signSeekBar.getConfigBuilder()
                .min(0)
                .max(4)
                .progress(2)
                .sectionCount(4)
                .trackColor(ContextCompat.getColor(getContext(), R.color.color_gray))
                .secondTrackColor(ContextCompat.getColor(getContext(), R.color.color_blue))
                .thumbColor(ContextCompat.getColor(getContext(), R.color.color_blue))
                .sectionTextColor(ContextCompat.getColor(getContext(), R.color.colorPrimary))
                .sectionTextSize(16)
                .thumbTextColor(ContextCompat.getColor(getContext(), R.color.color_red))
                .thumbTextSize(18)
                .signColor(ContextCompat.getColor(getContext(), R.color.color_green))
                .signTextSize(18)
                .autoAdjustSectionMark()
                .sectionTextPosition(SignSeekBar.TextPosition.BELOW_SECTION_MARK)
                .build();

Implement SignSeekBar.OnProgressChangedListener to react to user interactions or programmatic progress changes. The listener provides three main callbacks:

• onProgressChanged: Called whenever the progress changes. The fromUser boolean indicates if the change was triggered by a user touch event.
• getProgressOnActionUp: Called when the user releases the thumb.
• getProgressOnFinally: Called when the progress change operation is finalized.

signSeekBar.setOnProgressChangedListener(new SignSeekBar.OnProgressChangedListener() {
            @Override
            public void onProgressChanged(SignSeekBar signSeekBar, int progress, float progressFloat, boolean fromUser) {
                // fromUser indicates if the change was triggered by a user touch event
                String s = String.format(Locale.CHINA, "onChanged int:%d, float:%.1f", progress, progressFloat);
                progressText.setText(s);
            }

            @Override
            public void getProgressOnActionUp(SignSeekBar signSeekBar, int progress, float progressFloat) {
                String s = String.format(Locale.CHINA, "onActionUp int:%d, float:%.1f", progress, progressFloat);
                progressText.setText(s);
            }

            @Override
            public void getProgressOnFinally(SignSeekBar signSeekBar, int progress, float progressFloat, boolean fromUser) {
                String s = String.format(Locale.CHINA, "onFinally int:%d, float:%.1f", progress, progressFloat);
                progressText.setText(s + getContext().getResources().getStringArray(R.array.labels)[progress]);
            }
        });

The following attributes are available for configuring SignSeekBar in XML layouts. All attributes are prefixed with ssb_.

<declare-styleable name="SignSeekBar">
    <attr name="ssb_min" format="float|reference"/> <!-- min < max, default: 0.0f-->
    <attr name="ssb_max" format="float|reference"/> <!-- min < max, default: 100.0f-->
    <attr name="ssb_progress" format="float|reference"/> <!-- real time progress value, default: min-->
    <attr name="ssb_is_float_type" format="boolean"/> <!-- support for float type-->
    <attr name="ssb_track_size" format="dimension|reference"/> <!-- height of right-track, default: 2dp-->
    <attr name="ssb_second_track_size" format="dimension|reference"/> <!-- height of left-track, default: 2dp higher than right-track's height-->
    <attr name="ssb_thumb_radius" format="dimension|reference"/> <!-- radius of thumb, default: 2dp higher than left-track's height-->
    <attr name="ssb_thumb_radius_on_dragging" format="dimension|reference"/> <!-- radius of thumb when be dragging, default: 2 times of left-track's height-->
    <attr name="ssb_track_color" format="color|reference"/> <!-- color of right-track, default: R.color.colorPrimary-->
    <attr name="ssb_second_track_color" format="color|reference"/> <!-- color of left-track, default: R.color.colorAccent-->
    <attr name="ssb_thumb_color" format="color|reference"/> <!-- color of thumb, default: same as left-track's color-->
    <attr name="ssb_section_count" format="integer|reference"/> <!-- shares of whole progress(max - min), default: 10-->
    <attr name="ssb_show_section_mark" format="boolean"/> <!-- show demarcation points or not, default: false-->
    <attr name="ssb_auto_adjust_section_mark" format="boolean"/> <!-- auto scroll to the nearest section_mark or not, default: false-->
    <attr name="ssb_show_section_text" format="boolean"/> <!-- show section-text or not, default: false-->
    <attr name="ssb_section_text_size" format="dimension|reference"/> <!-- text size of section-text, default: 14sp-->
    <attr name="ssb_section_text_color" format="color|reference"/> <!-- text color of section-text, default: same as right-track's color-->
    <attr name="ssb_section_text_position" format="integer"/> <!-- text position relative to track: sides (0), bottom_sides (1), below_section_mark (2)-->
    <attr name="ssb_section_text_interval" format="integer"/> <!-- the interval of two section-text, default: 1-->
    <attr name="ssb_show_thumb_text" format="boolean"/> <!-- show real time progress-text under thumb or not, default: false-->
    <attr name="ssb_thumb_text_size" format="dimension|reference"/> <!-- text size of progress-text, default: 14sp-->
    <attr name="ssb_thumb_text_color" format="color|reference"/> <!-- text color of progress-text, default: same as left-track's color-->
    <attr name="ssb_show_progress_in_float" format="boolean"/> <!-- show Sign-progress in float or not, default: false-->
    <attr name="ssb_touch_to_seek" format="boolean"/> <!-- touch anywhere on track to quickly seek, default: false-->
    <attr name="ssb_seek_by_section" format="boolean"/> <!-- seek by section, the progress may not be linear, default: false-->
    <attr name="ssb_sign_color" format="color|reference"/> <!-- color of sign, default: same as left-track's color-->
    <attr name="ssb_sign_border_color" format="color|reference"/> <!-- color of sign border-->
    <attr name="ssb_sign_show_border" format="boolean"/> <!-- show sign border, default: same as left-track's color-->
    <attr name="ssb_sign_text_size" format="dimension|reference"/> <!-- text size of sign-progress, default: 14sp-->
    <attr name="ssb_sign_border_size" format="dimension|reference"/> <!-- border size, default: 1dp-->
    <attr name="ssb_sign_text_color" format="color|reference"/> <!-- text color of sign-progress, default: #ffffffff-->
    <attr name="ssb_anim_duration" format="integer"/> <!-- duration of animation, default: 200ms-->
    <attr name="ssb_show_sign" format="boolean"/> <!-- hide sign, default: false-->
    <attr name="ssb_text_space" format="dimension|reference"/> <!-- default: 2dp-->
    <attr name="ssb_sides_labels" format="reference"/> <!-- default: null-->
    <attr name="ssb_thumb_bg_alpha" format="float|reference"/> <!-- 0.0f-1.0f, default: 0.2f-->
    <attr name="ssb_thumb_ratio" format="float|reference"/> <!-- 0.0f-1.0f, default: 0.7f-->
    <attr name="ssb_show_thumb_shadow" format="boolean"/> <!-- show thumb shadow, default: false-->
    <attr name="ssb_sign_arrow_autofloat" format="boolean"/> <!-- sign arrow auto float, default: true-->
    <attr name="ssb_sign_height" format="dimension|reference"/> <!-- sign height, default: 22dp-->
    <attr name="ssb_sign_width" format="dimension|reference"/> <!-- sign width, default: 72dp-->
    <attr name="ssb_sign_arrow_height" format="dimension|reference"/> <!-- sign arrow height, default: 3dp-->
    <attr name="ssb_sign_arrow_width" format="dimension|reference"/> <!-- sign arrow width, default: 5dp-->
    <attr name="ssb_sign_round" format="dimension|reference"/> <!-- sign round, default: 3dp-->
</declare-styleable>