How to make double seekbar in android?

Question

I am building an android application where the user select the a maximum value by seekbar.

I need another button on the same seekbar so that user can select maximum and minimum value from a particular unique seekbar.

Here is my code of single seek bar -

package com.ui.yogeshblogspot;

public class CustomSeekBarExActivity extends Activity implements OnSeekBarChangeListener{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 SeekBar bar=(SeekBar)findViewById(R.id.seekBar1);
 bar.setOnSeekBarChangeListener(this);
}

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
        boolean fromUser) {
    // TODO Auto-generated method stub
    TextView tv=(TextView)findViewById(R.id.textView2);
    tv.setText(Integer.toString(progress)+"%");

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub

}
}

Here is my xml code of seek bar -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" 
android:background="#FFFFFF">

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Choose Your Progress"
    android:textColor="#000000"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:layout_gravity="center"
    android:progressDrawable="@xml/progress"
    android:max="100"
    android:thumb="@xml/thumb"/>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:gravity="center"
    android:layout_gravity="center"
    android:paddingTop="10dp"
    android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

@Andy THanks this is the all function how can I add this code to activity. How this code can be used please help me!! — Hitesh Matnani, Nov 10 '14 at 04:12
The library he posted includes sample code. You should read it. — Nathan Walters, Nov 10 '14 at 04:40
@NathanWalters Thanks I had read it.. But how to integrated this in activity.. and how to use this ?? can you help in telling that please — Hitesh Matnani, Nov 10 '14 at 04:58
Did you actually read through the code though? It couldn't be clearer. — Nathan Walters, Nov 10 '14 at 05:06
there is a useful library, https://github.com/anothem/android-range-seek-bar — ashraful, Nov 12 '15 at 10:08
fully customize seekbar http://codingsignals.com/crystal-range-seekbar-in-android/ — Asif, Jul 19 '16 at 06:50

Asif · Answer 1 · 2016-07-19T11:03:53.013

15

Fully Customize two way and single way seek bar you can provide thumb color etc http://codingsignals.com/crystal-range-seekbar-in-android/

Add in your gradle

dependencies {
compile 'com.crystal:crystalrangeseekbar:1.0.0' 
}

<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"/>

edited Jul 19 '16 at 11:03

answered Jul 19 '16 at 06:56

Asif

647
9
18

2

This library is useful.But can you please tell how to set initial value? I mean initially both points should reach at some point . – Gevaria Purva Mar 28 '17 at 04:49
This library is quite good, although the radius of the circles don't seem to be configurable, even they have a param (app:corner_radius). So if you don't care the circles are quite big, is a great custom range seek bar. – xarlymg89 Feb 22 '19 at 09:51

score 14 · Accepted Answer · edited Nov 30 '17 at 20:41

14

The Android widget class library has only one slider control, seekbar with only one thumb control. Did some research online and found this cool custom widget, range-seek-bar.

you can followed any one of below

https://github.com/edmodo/range-bar

https://code.google.com/p/range-seek-bar/

https://github.com/Larpon/RangeSeekBar

edited Nov 30 '17 at 20:41

answered Nov 10 '14 at 05:13

Thirumoorthy

589
2
11

score 5 · Answer 3 · answered Dec 27 '16 at 07:50

From Here

        <com.appyvet.rangebar.RangeBar
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            android:id="@+id/SearchrangeSeekbarAge"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            custom:tickStart="18"
            custom:tickInterval="1"
            custom:tickEnd="70" />


        <com.appyvet.rangebar.RangeBar
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            android:id="@+id/SearchrangeSeekbarHeight"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            custom:tickStart="4.5"
            custom:tickInterval="0.10"
            custom:tickEnd="7.0" />


rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
        @Override
        public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
                int rightPinIndex,
                String leftPinValue, String rightPinValue) {
        }
    });

YaMiN · Answer 4 · 2023-03-08T12:31:25.280

Now that RangeSlider is officially added to Material Components and supports desired options I suggest using that instead of external libraries.

First of all, you should add the view to your XML layout:

<com.google.android.material.slider.RangeSlider
android:id="@+id/range_seek_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:valueFrom="0.0"
android:valueTo="100.0"
app:values="@array/initial_slider_values"/>

then add initial slider values to arrays

<resources>
  <array name="initial_slider_values">
    <item>20.0</item>
    <item>70.0</item>
  </array>
</resources>

after that you can access RangeSlider values in the code:

binding.rangeSeekBar.addOnChangeListener { slider, value, fromUser ->
    Logger.d(slider.values)
}

where values is a List of floats with 2 member

score 2 · Answer 5 · answered Nov 10 '14 at 04:17

You do not need to use two seekbar , but you can just do the same function of minimum and maximum by using only one seekbar with having two thumbs over it Here its a library you can use https://code.google.com/p/range-seek-bar/

You can use by using below code

private final Thumb getClosestThumb(float touchX)

{
double xValue = screenToNormalized(touchX);        
return (Math.abs(xValue - normalizedMinValue) < Math.abs(xValue - normalizedMaxValue)) ? Thumb.MIN : Thumb.MAX;
}

And in the "public boolean onTouchEvent(MotionEvent event)",

if(pressedThumb == null),
pressedThumb = getClosestThumb(mDownMotionX);

thanks this is an code or an library can you please help me in detail as I am new to it.... — Hitesh Matnani, Nov 10 '14 at 04:27

Rana Ranvijay Singh · Answer 6 · 2016-12-10T02:06:14.283

0

RangeSeekBar https://github.com/RanaRanvijaySingh/RangeSeekBar. Also there are other libraries available which offers a lot of customization. If you want to go for more interactive design then look for Material Range Bar http://android-arsenal.com/details/1/1272.

edited Dec 10 '16 at 02:06

answered Jul 03 '15 at 09:38

Rana Ranvijay Singh

6,055
3
38
54

score 0 · Answer 7 · 2021-10-05T22:10:31.423

0

I think this link also might be helpful .range-seek-bar . There is an explanation about it at jitpack.io.

edited Oct 05 '21 at 22:10

answered Feb 10 '21 at 17:53

score 0 · Answer 8 · answered Apr 07 '21 at 12:37

0

You can use this libraby of mine. It comes with a lots of cutomizations. It supports seeking progress in both directions.

answered Apr 07 '21 at 12:37

Faisal Khan

548
3
16

How to make double seekbar in android?

8 Answers8

Linked