How Can I Design The Custom Seekbar In Android?

how can i design custom seekbar below image like e is anyone have an idea please guide me Adavance thanks to all

Solution 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-listxmlns:android="http://schemas.android.com/apk/res/android"><item><clip><bitmapxmlns: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-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@android:id/background"android:drawable="@drawable/img_seekbar_bg"android:dither="true"></item><itemandroid:id="@android:id/secondaryProgress"><clip><shape><gradientandroid:startColor="#80028ac8"android:centerColor="#80127fb1"android:centerY="0.75"android:endColor="#a004638f"android:angle="270"
                /></shape></clip></item><itemandroid: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
     * */publicvoidupdateProgressBar() {
        mHandler.postDelayed(mUpdateTimeTask, 100);        
    }   

    /**
     * Background Runnable thread
     * */private final Runnable mUpdateTimeTask = new Runnable() {
           @Override
        publicvoidrun() {
               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 barint progress = (utils.getProgressPercentage(currentDuration, totalDuration));
               //Log.d("Progress", ""+progress);
               songProgressBar.setProgress(progress);

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

    /**
     * 
     * */
    @Override
    publicvoidonProgressChanged(SeekBar seekBar, int progress, boolean fromTouch) {

    }

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

    /**
     * When user stops moving the progress hanlder
     * */
    @Override
    publicvoidonStopTrackingTouch(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.