How can i design the custom seekbar in android?

Question

how can i design custom seekbar below image like

e

is anyone have an idea please guide me Adavance thanks to all

Answer 1

In your drawable folder create to xml files and type the following code.

Changing SeekBar background:

seekbar_progress_bg.xml

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
            android:src="@drawable/img_seekbar_progress_blue"
            android:tileMode="repeat"
            android:antialias="true"
            android:dither="false"
            android:filter="false"
            android:gravity="left"
        />
        </clip>
    </item>
</layer-list>

Changing SeekBar Progress:

seekbar_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:drawable="@drawable/img_seekbar_bg"
        android:dither="true">
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#80028ac8"
                    android:centerColor="#80127fb1"
                    android:centerY="0.75"
                    android:endColor="#a004638f"
                    android:angle="270"
                />
            </shape>
        </clip>
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/seekbar_progress_bg"
    />
</layer-list>

Actual seekbar which uses above xml files:

<SeekBar
            android:id="@+id/songProgressBar"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_marginRight="20dp"
             android:layout_marginLeft="20dp"
             android:layout_marginBottom="20dp"
             android:layout_above="@id/player_footer_bg"
             android:thumb="@drawable/seek_handler"
             android:progressDrawable="@drawable/seekbar_progress"
             android:paddingLeft="6dp"
             android:paddingRight="6dp"/>

I have designed it for my need you can modify it according to your requirement

you can also see here and here for examples

Extend your class with SeekBar.OnSeekBarChangeListener

/**
     * Update timer on seekbar
     * */
    public void updateProgressBar() {
        mHandler.postDelayed(mUpdateTimeTask, 100);        
    }   

    /**
     * Background Runnable thread
     * */
    private final Runnable mUpdateTimeTask = new Runnable() {
           @Override
        public void run() {
               long totalDuration = mp.getDuration();
               long currentDuration = mp.getCurrentPosition();

               // Displaying Total Duration time
               songTotalDurationLabel.setText(""+utils.milliSecondsToTimer(totalDuration));
               // Displaying time completed playing
               songCurrentDurationLabel.setText(""+utils.milliSecondsToTimer(currentDuration));

               // Updating progress bar
               int progress = (utils.getProgressPercentage(currentDuration, totalDuration));
               //Log.d("Progress", ""+progress);
               songProgressBar.setProgress(progress);

               // Running this thread after 100 milliseconds
               mHandler.postDelayed(this, 100);
           }
        };

    /**
     * 
     * */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromTouch) {

    }

    /**
     * When user starts moving the progress handler
     * */
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // remove message Handler from updating progress bar
        mHandler.removeCallbacks(mUpdateTimeTask);
    }

    /**
     * When user stops moving the progress hanlder
     * */
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        mHandler.removeCallbacks(mUpdateTimeTask);
        int totalDuration = mp.getDuration();
        int currentPosition = utils.progressToTimer(seekBar.getProgress(), totalDuration);

        // forward or backward to certain seconds
        mp.seekTo(currentPosition);

        // update timer progress again
        updateProgressBar();
    }

you have to create a textview or a view and updates its value its progress changes.