How to make double seekbar in android?
Asked Answered
B

8

15

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>
Blackamoor answered 10/11, 2014 at 4:0 Comment(7)
github.com/Larpon/RangeSeekBar check this viewSideburns
@Sideburns THanks this is the all function how can I add this code to activity. How this code can be used please help me!!Blackamoor
The library he posted includes sample code. You should read it.Binal
@NathanWalters Thanks I had read it.. But how to integrated this in activity.. and how to use this ?? can you help in telling that pleaseBlackamoor
Did you actually read through the code though? It couldn't be clearer.Binal
there is a useful library, github.com/anothem/android-range-seek-barEndbrain
fully customize seekbar codingsignals.com/crystal-range-seekbar-in-androidSynthetic
E
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

Euphuism answered 10/11, 2014 at 5:13 Comment(0)
S
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' 
}

Two way seekbar

<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"/>
Synthetic answered 19/7, 2016 at 6:56 Comment(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 .Inaugural
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.Margarita
E
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

Euphuism answered 10/11, 2014 at 5:13 Comment(0)
D
6

enter image description here

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

Dinorahdinosaur answered 15/2, 2021 at 16:22 Comment(0)
D
5

enter image description here

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) {
        }
    });
Diopside answered 27/12, 2016 at 7:50 Comment(0)
P
2

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);
Prizefight answered 10/11, 2014 at 4:17 Comment(2)
thanks this is an code or an library can you please help me in detail as I am new to it....Blackamoor
this is library for seekbarPrizefight
O
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. enter image description here

On answered 3/7, 2015 at 9:38 Comment(0)
D
0

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

Dragrope answered 10/2, 2021 at 17:53 Comment(0)
I
0

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

bidirection-seekbar-github

Immature answered 7/4, 2021 at 12:37 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.