Android Multi State switch

Question

I wanted to create something like this slider:

is there a way in android to define a three state slider? I'm new to android development, so please include as much example code as possible, it would be very helpful.

Answer 1

A simple example could be like the code below. You can play with graphics little bit and you will get what you want.

layout/main.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp" >

    <include
        android:id="@+id/tableRow1_ref"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/description" />

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:max="100" />

    <include
        android:id="@+id/tableRow1_ref"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/description" />

    <SeekBar
        android:id="@+id/seekBar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:max="100" />

</TableLayout>

layout/description.xml

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="left"
        android:paddingLeft="5dp"
        android:text="@string/kid" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/adult" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingRight="5dp"
        android:text="@string/senior" />

</TableRow>

MainActivity.java

package com.test.Slider;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class MainActivity extends ActionBarActivity
        implements OnSeekBarChangeListener{

    SeekBar sb1, sb2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        sb1 = (SeekBar)findViewById(R.id.seekBar1);
        sb2 = (SeekBar)findViewById(R.id.seekBar2);

        sb1.setOnSeekBarChangeListener(this);
        sb2.setOnSeekBarChangeListener(this);
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress,
            boolean fromUser) {
        // we don't need it
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // we don't need it     
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        int mProgress = seekBar.getProgress();
        if(mProgress > 0 & mProgress < 26) {
            seekBar.setProgress(0);
        } else if(mProgress > 25 & mProgress < 76) {
            seekBar.setProgress(50);
        } else seekBar.setProgress(100);
    }   
}

Output:

Answer 2

There is a good library for this: android-comboseekbar. Use it or see how it works.

Screen