Seek Bar

Main.XML

<?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:background="@color/default_screen_bg"
    android:orientation="vertical" >

    <SeekBar
        android:id="@+id/seek1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:progress="20"
        android:secondaryProgress="20" />

    <LinearLayout
        android:id="@+id/refresh_match_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/background_view_rounded_single"
        android:orientation="vertical"
        android:visibility="visible" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Volume Control"
            android:textColor="#ffffff"
            android:textSize="20sp" />

        <SeekBar
            android:id="@+id/volume_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:progress="0"
            android:max="100"
            android:progressDrawable="@drawable/progressbar"
            android:secondaryProgress="0" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:orientation="horizontal"
            android:visibility="visible"
            android:weightSum="12" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="0"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="20"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="40"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="60"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="80"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="100"
                android:textColor="@android:color/white"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Main Java File

package com.example.seekbar1;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Toast;

public class MainActivity extends Activity {

 private SeekBar volumeControl = null;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

       volumeControl = (SeekBar) findViewById(R.id.volume_bar);

       volumeControl.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
           int progressChanged = 0;

           public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser){
               progressChanged = progress;
           }

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

           public void onStopTrackingTouch(SeekBar seekBar) {
               Toast.makeText(MainActivity.this,"seek bar progress:"+progressChanged,
                       Toast.LENGTH_SHORT).show();
           }
       });

   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       // Inflate the menu; this adds items to the action bar if it is present.
       getMenuInflater().inflate(R.menu.main, menu);
       return true;
   }

}


Place background_view_rounded_single.xml in drawable folder.

background_view_rounded_single.xml

<?xml version="1.0" encoding="UTF-8"?> <inset android:insetLeft="1.0px" android:insetRight="1.0px" android:insetTop="0.0px" android:insetBottom="1.0px" xmlns:android="http://schemas.android.com/apk/res/android"> <selector> <item android:state_pressed="true"> <shape> <gradient android:startColor="@color/rounded_container_bg" android:endColor="@color/rounded_container_bg" android:angle="270.0" /> <corners android:radius="11.0dip" /> </shape> </item> <item> <shape> <stroke android:width="1.0px" android:color="@color/rounded_container_border" /> <gradient android:startColor="@color/rounded_container_bg" android:endColor="@color/rounded_container_bg" android:angle="270.0" /> <corners android:radius="10.0dip" /> </shape> </item> </selector> </inset>


Place progressbar.xml in drawable folder

<?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 android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="270"
                android:endColor="@color/light_gray_header_color"
                android:startColor="@color/light_gray_header_color" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                <gradient
                    android:angle="270"
                    android:endColor="#00996a"
                    android:startColor="#00d190" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                <gradient
                    android:angle="270"
                    android:endColor="#00996a"
                    android:startColor="#00d190" />
            </shape>
        </clip>
    </item>

</layer-list>

colors.xml

 <color name="default_screen_bg">#20324a</color>
    <color name="rounded_container_bg">#80000000</color>
    <color name="rounded_container_border">#3b3f44</color>
    <color name="light_gray_header_color">#646663</color>