First Create A Drawble file using these steps
![enter image description here]()
and name the drawble and specify Root element as layer-list -> click on OK. a new file custom_seekbar.xml will be created
![enter image description here]()
Now in custom_seekbar.xml inside the layer-list add an item and give a shape to it. specify the color, height, corners of the SeekBar. Also, add another item of the same shape and size but you can change the color, left part of SeekBar’s thumb will be of this color.
![enter image description here]()
Now again click on drawable -> new -> drawable resource file, name the file as thumb.xml and specify Root element as shape -> click on OK. a new file thumb.xml will be created. Inside this file give the height, radius, and color of the thumb. these things can be changed. It totally depends upon how you want to design.
![enter image description here]()
Now go to the activity_main.xml create a layout and inside the layout add a SeekBar. Specify the height width of SeekBar and the max progress that you want to use set progress to 0.
android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb"
android:max="50"
android:progress="0"
This will create a customized Seekbar inside activity_main.xml.
![enter image description here]()
Now open MainActivity.java class Declare objects of SeekBar and TextView, inside onCreate method initialize both objects using findViewById() method. Perform an event of SeekBar change listener that will hold progress value, and by using this event set the progress value inside TextView.
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
// increment or decrement on process changed
// increase the textsize
// with the value of progress
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
value.setText(progress+"/"+"50");
}..
![enter image description here]()
Build and run the app. Put the thumb on Seekbar and move it either forward or backward it will display the process.
Code for the above implementation is given below:
Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
package com.abhi.customseekbar;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
SeekBar seekBar;
TextView value;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initialize the seekBar object
seekBar=findViewById(R.id.seekbar);
value=findViewById(R.id.progress);
// calling the seekbar event change listener
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
// increment or decrement on process changed
// increase the textsize
// with the value of progress
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
value.setText(progress+"/"+"50");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// This method will automatically
// called when the user touches the SeekBar
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// This method will automatically
// called when the user
// stops touching the SeekBar
}
});
}
}
Below is the code for the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#458C85"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/Relative_1"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_weight="2">
<TextView
android:id="@+id/textViewSelectSizeOfArray"
android:layout_width="273dp"
android:layout_height="wrap_content"
android:layout_above="@+id/seekbar"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="9dp"
android:text="Custom Seek Bar"
android:textAlignment="center"
android:textColor="@color/white"
android:textSize="25dp" />
<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="50"
android:progress="0"
android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" />
<TextView
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="199dp"
android:padding="10dp"
android:text="0"
android:textAlignment="center"
android:textColor="@color/white"
android:textSize="30dp"
android:textStyle="bold">
</TextView>
</RelativeLayout>
</LinearLayout>
Below is the code for the custom_seekbar.xml file.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- color, size, shape height of seekbar -->
<item android:gravity="center_vertical">
<shape android:shape="rectangle">
<solid android:color="#605A5C"/>
<size android:height="30dp"/>
<corners android:radius="9dp"/>
</shape>
</item>
<!-- color, size, shape height of seekbar when u drag it-->
<item android:gravity="center_vertical">
<scale android:scaleWidth="100%">
<selector>
<item android:state_enabled="false"
android:drawable="@color/purple_200"/>
<item>
<shape android:shape="rectangle">
<solid android:color="@color/black"/>
<size android:height="30dp"/>
<corners android:radius="9dp"/>
</shape>
</item>
</selector>
</scale>
</item>
</layer-list>
Below is the code for the thumb.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/purple_200"/>
<size android:height="30dp" android:width="25dp"/>
<corners android:radius="5dp"/>
</shape>
