How to implement three way sliding button in Android

Question

I want to implement a three way sliding button for my app. at the first position it should show one color, at the center it should show another color and at the end position it should change the color again. Here I am giving the images for this.

How can I implement this?

Answer 1

This actually looks for my like a extend of the seekbar.

To implement this kind of slider I would create a class that extends seekbar. In the Constructor I would use .setMax(2); which means that the seekbar has only 3 positions/steps.

Then in the default implementation I would intecrate a seekbar.OnChangeListener(). There in the pogressChanged(...) method switch the background image resoure with .setBackgroundDrawable(...) and if necessary change the thumb with .setThumb(...) to a image of your desire.

If you even want to change the position of the slider you can implement a Click event handling and there change the position of the slider with .setProgress();

This is a very easy to handle and quick to do implementation since it requires only several lines of code.

Answer 2

This can be achieved using RadioGroup.

You will have to customize the RadioButtons inside RadioGroup like this:

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_toggler"
    android:orientation="horizontal"
    android:padding="4dp">

    <RadioButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button1_background"
        android:button="@null"
        android:checked="true" />

    <RadioButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button2_background"
        android:button="@null"
        android:checked="false" />

    <RadioButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button3_background"
        android:button="@null"
        android:checked="false" />

</RadioGroup>

drawable/button1_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn1checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn1unchecked"
        android:state_checked="false" />
</selector>

drawable/button2_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn2checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn2unchecked"
        android:state_checked="false" />
</selector>

drawable/button3_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn3checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn3unchecked"
        android:state_checked="false" />
</selector>

Use relevant drawable resources for all 3 buttons. Now you can handle event on RadioGroup check change.