Crystal Range Seekbar

An extended version of seekbar and range seekbar with basic and advanced customization.

Usage

Add a dependency to your build.gradle:

dependencies {
    implementation 'com.github.tabassumLatif:crystal-range-seekbar:v1.1.4'
}

Features

Customize with xml using custom handy attributes.
Customize in your activity, fragment or dialog.
Styling with your own widget.
Creating newly widget from activity, fragment or dialog.

Sample usage - Seekbar

Default style using xml.

<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
    android:id="@+id/rangeSeekbar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Styling with bubble animation using custom widget BubbleThumbSeekbar.

<com.crystal.crystalrangeseekbar.widgets.BubbleThumbSeekbar
    android:id="@+id/rangeSeekbar2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cs_corner_radius="10"
    app:cs_min_value="50"
    app:cs_max_value="150"
    app:cs_bar_color="#C69E89"
    app:cs_bar_highlight_color="#A54B17"
    app:cs_left_thumb_color="#775E4F"
    app:cs_left_thumb_color_pressed="#4C2D1A"
    app:cs_data_type="_integer"/>

Styling with bubble animation with drawable using custom widget BubbleThumbSeekbar.

<com.crystal.crystalrangeseekbar.widgets.BubbleThumbSeekbar
    android:id="@+id/rangeSeekbar3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cs_corner_radius="10"
    app:cs_min_value="0"
    app:cs_max_value="100"
    app:cs_steps="5"
    app:cs_bar_color="#F7BB88"
    app:cs_bar_highlight_color="#E07416"
    app:cs_left_thumb_image="@drawable/thumb"
    app:cs_left_thumb_image_pressed="@drawable/thumb_pressed"
    app:cs_data_type="_integer"/>

Right to Left position (rtl)

<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
    android:id="@+id/rangeSeekbar7"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cs_position="right"/>

Right to Left position with drawable position update from code (rtl)

<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
    android:id="@+id/rangeSeekbar8"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:min_value="100"
    app:max_value="200"
    app:steps="5"
    app:bar_color="#F7BB88"
    app:bar_highlight_color="#E07416"
    app:left_thumb_image="@drawable/thumb"
    app:left_thumb_image_pressed="@drawable/thumb_pressed"
    app:data_type="_integer"/>

// get seekbar from view
final CrystalSeekbar rangeSeekbar = (CrystalSeekbar) rootView.findViewById(R.id.rangeSeekbar8);

// change position left to right
rangeSeekbar.setPosition(CrystalSeekbar.Position.RIGHT).apply();

Create new seekbar from code and add to any view.

// get seekbar from view
final CrystalSeekbar seekbar = new CrystalSeekbar(getActivity());

// get min and max text view
final TextView tvMin = (TextView) rootView.findViewById(R.id.textMin5);
final TextView tvMax = (TextView) rootView.findViewById(R.id.textMax5);

// set listener
seekbar.setOnSeekbarChangeListener(new OnSeekbarChangeListener() {
    @Override
    public void valueChanged(Number minValue) {
        tvMin.setText(String.valueOf(minValue));
    }
});

// set final value listener
seekbar.setOnSeekbarFinalValueListener(new OnSeekbarFinalValueListener() {
    @Override
    public void finalValue(Number value) {
        Log.d("CRS=>", String.valueOf(value));
    }
});
        
// get range seekbar container
RelativeLayout container = (RelativeLayout) rootView.findViewById(R.id.contRangeSeekbar5);
container.addView(rangeSeekbar);

Styling with create custom widget

public class MySeekbar extends CrystalSeekbar {

    public MySeekbar(Context context) {
        super(context);
    }

    public MySeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MySeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected float getMinValue(TypedArray typedArray) {
        return 5f;
    }

    @Override
    protected float getMaxValue(TypedArray typedArray) {
        return 90f;
    }

    @Override
    protected float getMinStartValue(TypedArray typedArray) {
        return 20f;
    }

    @Override
    protected int getBarColor(TypedArray typedArray) {
        return Color.parseColor("#A0E3F7");
    }

    @Override
    protected int getBarHighlightColor(TypedArray typedArray) {
        return Color.parseColor("#53C9ED");
    }

    @Override
    protected int getLeftThumbColor(TypedArray typedArray) {
        return Color.parseColor("#058EB7");
    }

    @Override
    protected int getLeftThumbColorPressed(TypedArray typedArray) {
        return Color.parseColor("#046887");
    }

    @Override
    protected Drawable getLeftDrawable(TypedArray typedArray) {
        return ContextCompat.getDrawable(getContext(), R.drawable.thumb);
    }

    @Override
    protected Drawable getLeftDrawablePressed(TypedArray typedArray) {
        return ContextCompat.getDrawable(getContext(), R.drawable.thumb_pressed);
    }
}

Sample usage - Range Seekbar

Default style using xml.

<com.crystal.crystalrangeseekbar.widgets.CrystalRangeSeekbar
    android:id="@+id/rangeSeekbar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

// get seekbar from view
final CrystalRangeSeekbar rangeSeekbar = (CrystalRangeSeekbar) rootView.findViewById(R.id.rangeSeekbar1);

// get min and max text view
final TextView tvMin = (TextView) rootView.findViewById(R.id.textMin1);
final TextView tvMax = (TextView) rootView.findViewById(R.id.textMax1);

// set listener
rangeSeekbar.setOnRangeSeekbarChangeListener(new OnRangeSeekbarChangeListener() {
    @Override
    public void valueChanged(Number minValue, Number maxValue) {
        tvMin.setText(String.valueOf(minValue));
        tvMax.setText(String.valueOf(maxValue));
    }
});

// set final value listener
rangeSeekbar.setOnRangeSeekbarFinalValueListener(new OnRangeSeekbarFinalValueListener() {
    @Override
    public void finalValue(Number minValue, Number maxValue) {
        Log.d("CRS=>", String.valueOf(minValue) + " : " + String.valueOf(maxValue));
    }
});

Styling with bubble animation with drawable using custom widget BubbleThumbRangeSeekbar.

<com.crystal.crystalrangeseekbar.widgets.BubbleThumbRangeSeekbar
    android:id="@+id/rangeSeekbar5"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cs_corner_radius="10"
    app:cs_min_value="0"
    app:cs_max_value="100"
    app:cs_steps="5"
    app:cs_bar_color="#F7BB88"
    app:cs_bar_highlight_color="#E07416"
    app:cs_left_thumb_image="@drawable/thumb"
    app:cs_right_thumb_image="@drawable/thumb"
    app:cs_left_thumb_image_pressed="@drawable/thumb_pressed"
    app:cs_right_thumb_image_pressed="@drawable/thumb_pressed"
    app:cs_data_type="_integer"/>

Set minimum range (gap).

<com.crystal.crystalrangeseekbar.widgets.CrystalRangeSeekbar
    android:id="@+id/rangeSeekbar3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cs_corner_radius="10"
    app:cs_min_value="50"
    app:cs_max_value="100"
    app:cs_gap="20"
    app:cs_bar_color="#8990C4"
    app:cs_bar_highlight_color="#2434AD"
    app:cs_left_thumb_color="#1A246D"
    app:cs_right_thumb_color="#1A246D"
    app:cs_left_thumb_color_pressed="#030B47"
    app:cs_right_thumb_color_pressed="#030B47"
    app:cs_data_type="_integer"/>

Set fix range (gap).

<com.crystal.crystalrangeseekbar.widgets.CrystalRangeSeekbar
    android:id="@+id/rangeSeekbar4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cs_corner_radius="10"
    app:cs_min_value="0"
    app:cs_max_value="100"
    app:cs_fix_gap="30"
    app:cs_bar_color="#EE88F7"
    app:cs_bar_highlight_color="#D810EA"
    app:cs_left_thumb_color="#8D0D99"
    app:cs_right_thumb_color="#8D0D99"
    app:cs_left_thumb_color_pressed="#56005E"
    app:cs_right_thumb_color_pressed="#56005E"
    app:cs_data_type="_integer"/>

Available attributes

cs_corner_radius: corner radius to be used seekbar, default 0f
cs_min_value: minimum value of seekbar, default 0
cs_max_value: maximum value of seekbar, default 100
cs_min_start_value: minimum start value must be equal or greater than min value, default min_value
cs_max_start_value: maximum start value must be equal or less than max value, default max_value
cs_steps: minimum steps between range, default NO_STEP -1f
cs_gap: maintain minimum range between two thumbs, range must be greater >= min value && <= max value, default 0f
cs_bar_height: bar height, default determined by thumb size
cs_fix_gap: maintain fix range between two thumbs, range must be greater >= min value && <= max value, default NO_FIXED_GAP -1f
cs_bar_color_mode color fill mode of inactive bar; can be ColorMode.SOLID or ColorMode.GRADIENT; default is ColorMode.SOLID
cs_bar_color inactive bar background color, default Color.GRAY
cs_bar_gradient_start inactive bar background gradient start color, default Color.GRAY
cs_bar_gradient_end inactive bar background gradient end color, default Color.DKGRAY
cs_bar_highlight_color_mode color fill mode of active bar; can be ColorMode.SOLID or ColorMode.GRADIENT; default is ColorMode.SOLID
cs_bar_highlight_color active bar background color, default Color.BLACK
cs_bar_highlight_gradient_start active bar background gradient start color, default Color.DKGRAY
cs_bar_highlight_gradient_end active bar background gradient end color, default Color.BLACK
cs_thumb_color default thumb color, default Color.BLACK (only CrystalSeekbar)
cs_thumb_color_pressed active thumb color, default Color.DKGRAY (only CrystalSeekbar)
cs_thumb_image left drawable, default null (only CrystalSeekbar)
cs_thumb_image_pressed active thumb drawable, default null (only CrystalSeekbar)
cs_left_thumb_color default left thumb color, default Color.BLACK (only CrystalRangeSeekbar)
cs_left_thumb_color_pressed active left thumb color, default Color.DKGRAY (only CrystalRangeSeekbar)
cs_left_thumb_image left thumb drawable, default null (only CrystalRangeSeekbar)
cs_left_thumb_image_pressed active left thumb drawable, default null (only CrystalRangeSeekbar)
cs_right_thumb_color default right thumb color, default Color.BLACK (only CrystalRangeSeekbar)
cs_right_thumb_color_pressed active right thumb color, default Color.DKGRAY (only CrystalRangeSeekbar)
cs_right_thumb_image right thumb drawable, default null (only CrystalRangeSeekbar)
cs_right_thumb_image_pressed active right thumb drawable, default null (only CrystalRangeSeekbar)
cs_position can be left or right, default left
cs_data_type can be _long or _double or _integer or _float or _short or _byte, default _integer

Changelog

1.1.2 - 24-Aug-2016

Bug fixed when update property programmatically.

1.1.1 - 21-Aug-2016

Added new feature. OnRangeSeekbarFinalValueListener, OnSeekbarFinalValueListener.

1.0.1 - 9-Aug-2016

Bug fixed setMinStartValue and setMaxStartValue programmatically.

1.0.0 - 17-July-2016

Add New Project.

LICENSE

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

##Authors

Syed Owais Ali original Author
Balazs Rozsenich

tabassumLatif/crystal-range-seekbar