How to add the slider (left and right) effect using seekbar?

问题

I have a dialog and in this i have 2 button "Yes" and "No". If i slide right then it will treat as pressed "No" and if i slide left it will treated as pressed "Yes" same as like some phone calling screes do for accept and reject calls. I tired this link. Initially my slider is positioned at mid position (android:progress ="50"), and if current progress returns 5 i am considering it pressed "yes" and if it returns 90 i consider pressed "No" and when i try to slide left or right it should produce a sliding effect for better UI as thumb moves. I tired this way but its not a good effect when right/left movement of thumb.. Means i want exactly same as slide to unlock button like this but want to keep the slider in middle so that i can move both side for Yes and No.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:angle="0"
                android:startColor="#ff2c10"
                android:endColor="#ff2c10" />
            <corners android:radius="35dip" />
            <size android:height="55dp"
                  android:width="250dp"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip >
            <shape>
                <gradient
                    android:angle="0"
                    android:centerY="0.5"
                    android:startColor="#295d0b"
                    android:endColor="#295d0b" />
                <corners android:radius="35dip" />
                <size android:height="55dp"
                      android:width="250dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

And my seekbar.xml looks like....

    <SeekBar
        android:id="@+id/sb"
        android:layout_marginTop="10dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:progress="50"
        android:progressDrawable="@drawable/seek_bar"
        android:thumb="@drawable/slide_thumb"
        android:splitTrack="false"
        android:background="@null"
        android:thumbOffset="2dp"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yes"
        android:textSize="25sp"
        android:textColor="@android:color/white"
        android:layout_marginTop="22dp"
        android:layout_marginLeft="10dp"
        android:textStyle="bold"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No"
        android:textSize="25sp"
        android:textColor="@android:color/white"
        android:layout_alignParentRight="true"
        android:layout_marginTop="22dp"
        android:layout_marginRight="10dp"
        android:textStyle="bold"
        />

but its not giving me the right effect as i wanted, i want same as these below pictures are.. But with "yes" and "No" text.

回答1:

Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">


<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="32dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_gravity="center"
    android:layout_marginTop="121dp"
    android:max="100"
    android:paddingLeft="30dp"
    android:paddingRight="30dp"
    android:progress="50"
    android:progressDrawable="@drawable/seekbar_progressbar"
    android:thumbTintMode="multiply" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="24dp"
    android:background="@drawable/circle_background_no"
    android:textColor="#dedede"
    android:text="No"
    android:padding="5dp"
    android:layout_marginLeft="17dp"
    android:layout_marginStart="17dp"
    android:layout_alignTop="@+id/textView"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />


<TextView
    android:layout_width="wrap_content"
    android:layout_height="24dp"
    android:textColor="#dedede"
    android:background="@drawable/circle_background_yes"
    android:padding="5dp"
    android:paddingRight="7dp"
    android:paddingLeft="7dp"
    android:gravity="center"
    android:text="Yes"
    android:id="@+id/textView"
    android:layout_marginRight="13dp"
    android:layout_marginEnd="13dp"
    android:layout_alignTop="@+id/seekBar"
    android:layout_alignRight="@+id/seekBar"
    android:layout_alignEnd="@+id/seekBar"
    android:layout_marginTop="4dp" />

In drawable

circle_background_yes.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="10dip"/>
    <stroke android:color="#14ba92" android:width="0dip"/>
    <solid android:color="#14ba92"/>
</shape>

circle_background_no.xml

  <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="10dip"/>
    <stroke android:color="#990800" android:width="0dip"/>
    <solid android:color="#990800"/>
</shape>

seekbar_progressbar.xml

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape android:shape="rectangle" >
        <corners android:radius="5dp"/>

        <gradient
            android:angle="180"
            android:endColor="#14ba92"
            android:startColor="#14ba92" />
    </shape>
</item>
<item>
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="180"
                android:endColor="#990800"
                android:startColor="#d14900" />
        </shape>
    </clip>
</item>
<item>
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="180"
                android:endColor="#990800"
                android:startColor="#d14900" />
        </shape>
    </clip>
</item>

If you don't like the default thumb, you will have to create your own Drawable, which you can then set the thumb in code with something like:

Drawable thumb = getResources().getDrawable( R.drawable.myThumb );
SeekBar mSeekBar = (SeekBar) findViewById(R.id.mySeekBar);
mSeekbar.setThumb(thumb);

Or you can set the thumb in XML with:

<SeekBar 
    ...
    android:thumb="@drawable/seek_thumb" />

The actual Drawable can be an image, shape, or any other kind of Drawable you could possibly desire. If you want the thumb to change appearance when it is pressed, you will want to create a State List Drawable.

来源：https://stackoverflow.com/questions/37518776/how-to-add-the-slider-left-and-right-effect-using-seekbar

标签

android

seekbar