An extended version of seekbar and range seekbar with basic and advanced customization.
Add a dependency to your build.gradle:
dependencies {
compile 'com.crystal:crystalrangeseekbar:1.1.3'
}- 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.
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:corner_radius="10"
app:min_value="50"
app:max_value="150"
app:bar_color="#C69E89"
app:bar_highlight_color="#A54B17"
app:left_thumb_color="#775E4F"
app:left_thumb_color_pressed="#4C2D1A"
app: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:corner_radius="10"
app:min_value="0"
app:max_value="100"
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"/>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: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);
}
}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:corner_radius="10"
app:min_value="0"
app:max_value="100"
app:steps="5"
app:bar_color="#F7BB88"
app:bar_highlight_color="#E07416"
app:left_thumb_image="@drawable/thumb"
app:right_thumb_image="@drawable/thumb"
app:left_thumb_image_pressed="@drawable/thumb_pressed"
app:right_thumb_image_pressed="@drawable/thumb_pressed"
app: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:corner_radius="10"
app:min_value="50"
app:max_value="100"
app:gap="20"
app:bar_color="#8990C4"
app:bar_highlight_color="#2434AD"
app:left_thumb_color="#1A246D"
app:right_thumb_color="#1A246D"
app:left_thumb_color_pressed="#030B47"
app:right_thumb_color_pressed="#030B47"
app: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:corner_radius="10"
app:min_value="0"
app:max_value="100"
app:fix_gap="30"
app:bar_color="#EE88F7"
app:bar_highlight_color="#D810EA"
app:left_thumb_color="#8D0D99"
app:right_thumb_color="#8D0D99"
app:left_thumb_color_pressed="#56005E"
app:right_thumb_color_pressed="#56005E"
app:data_type="_integer"/>Available attributes
corner_radius: corner radius to be used seekbar, default0fmin_value: minimum value of seekbar, default0max_value: maximum value of seekbar, default100min_start_value: minimum start value must be equal or greater than min value, defaultmin_valuemax_start_value: maximum start value must be equal or less than max value, defaultmax_valuesteps: minimum steps between range, default NO_STEP-1fgap: maintain minimum range between two thumbs, range must be greater >= min value && <= max value, default0fbar_height: bar height, default determined by thumb sizefix_gap: maintain fix range between two thumbs, range must be greater >= min value && <= max value, default NO_FIXED_GAP-1fbar_color_modecolor fill mode of inactive bar; can beColorMode.SOLIDorColorMode.GRADIENT; default isColorMode.SOLIDbar_colorinactive bar background color, defaultColor.GRAYbar_gradient_startinactive bar background gradient start color, defaultColor.GRAYbar_gradient_endinactive bar background gradient end color, defaultColor.DKGRAYbar_highlight_color_modecolor fill mode of active bar; can beColorMode.SOLIDorColorMode.GRADIENT; default isColorMode.SOLIDbar_highlight_coloractive bar background color, defaultColor.BLACKbar_highlight_gradient_startactive bar background gradient start color, defaultColor.DKGRAYbar_highlight_gradient_endactive bar background gradient end color, defaultColor.BLACKthumb_colordefault thumb color, defaultColor.BLACK(only CrystalSeekbar)thumb_color_pressedactive thumb color, defaultColor.DKGRAY(only CrystalSeekbar)thumb_imageleft drawable, defaultnull(only CrystalSeekbar)thumb_image_pressedactive thumb drawable, defaultnull(only CrystalSeekbar)left_thumb_colordefault left thumb color, defaultColor.BLACK(only CrystalRangeSeekbar)left_thumb_color_pressedactive left thumb color, defaultColor.DKGRAY(only CrystalRangeSeekbar)left_thumb_imageleft thumb drawable, defaultnull(only CrystalRangeSeekbar)left_thumb_image_pressedactive left thumb drawable, defaultnull(only CrystalRangeSeekbar)right_thumb_colordefault right thumb color, defaultColor.BLACK(only CrystalRangeSeekbar)right_thumb_color_pressedactive right thumb color, defaultColor.DKGRAY(only CrystalRangeSeekbar)right_thumb_imageright thumb drawable, defaultnull(only CrystalRangeSeekbar)right_thumb_image_pressedactive right thumb drawable, defaultnull(only CrystalRangeSeekbar)positioncan beleftorright, defaultleftdata_typecan be_longor_doubleor_integeror_floator_shortor_byte, default_integer
- Bug fixed when update property programmatically.
- Added new feature.
OnRangeSeekbarFinalValueListener, OnSeekbarFinalValueListener.
- Bug fixed setMinStartValue and setMaxStartValue programmatically.
- Add New Project.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent