Android | SeekBar with new look

When i am using Seekbar in Android 4.0.3 emulator. the look of it does not attract people. so i decided to play with its look and below is sample code through which you can apply your own look to Seekbar.

As everyone knows, Seekbar consists of progress line and progress thumb. Here we will override existing look with new ones and we will get what we want.

Note: It has been verified on Android 4.0.3 emulator.

Below are steps:

• Create folder called "drawable" in "res" folder.
• Add "seekbar_line.xml" file by right click on "drawable" folder -> New -> Android XML file -> give file name and then select "Shape" from given list and then follow steps.
• Add below code to "seekbar_line.xml" file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:visible="true"
android:shape="line" >
<stroke android:width="1dp"  android:color="#FF000000" />
</shape>

• then add another file with "seekbar_thumb.xml" name and then add below code to it.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:visible="true"
android:dither="true">

    <size
        android:width="10dp"
        android:height="20dp"/>
   
    <corners
        android:radius="2dp" />
   
    <gradient
        android:startColor="#FFAA0000"
        android:endColor="#FFFF0000"
        android:angle="0"
        android:type="linear"
        />
   

</shape>



Code of Strings.xml file:


<resources>

    <string name="app_name">SeekBarExample</string>
    <string name="tvvalue"></string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_seek_bar_example">SeekBar Example</string>

</resources>


Code of Layout file:


<LinearLayout 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:orientation="vertical" >

    <TextView
        android:id="@+id/tvvalue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tvvalue"
/>
   
    <SeekBar
        android:id="@+id/sbvalue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="99"
        android:progress="0"
        android:thumb="@drawable/seekbar_thumb"
        android:thumbOffset="0dp"
        android:progressDrawable="@drawable/seekbar_line"
        />

</LinearLayout>

Code of Java file:


package com.example.seekbarexample;

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

public class SeekBarExample extends Activity implements OnSeekBarChangeListener {

private TextView tvValue;
private SeekBar sbValue;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_seek_bar_example);
       
        tvValue = (TextView) findViewById(R.id.tvvalue);
        sbValue = (SeekBar) findViewById(R.id.sbvalue);
       
        sbValue.setOnSeekBarChangeListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_seek_bar_example, menu);
        return true;
    }

public void onProgressChanged(SeekBar arg0, int arg1, boolean arg2) {
// TODO Auto-generated method stub

tvValue.setText(String.valueOf(arg1));


}

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

}

public void onStopTrackingTouch(SeekBar arg0) {
// TODO Auto-generated method stub

}
}

Result: