Creating Custom SeekBar in Android
Last Updated :
12 Dec, 2021
SeekBar can be understood as an extension of ProgressBar in Android. You have to just drag the thumb on SeekBar and drag it towards the backward or forward direction and store the current value of progress changed. SeekBar is widely used in different applications ex – Audio player Video Player etc. You can implement the traditional SeekBar provided by Android. In this article, we will see how we can customize the android SeekBar. For creating a custom SeekBar first we will design our SeekBar and thumb of seekBar for this we will add layout files in drawable. We can use pictures as a thumb too for that instead of creating a layout we have to just put the picture on the drawable rest things will be the same.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2:
Wait for some time, After the build finish, you will see a MainActivity.java file and an XML file inside res -> layout named as activity_main.xml. We will create our custom SeekBar and implement that on our activity_main.xml.
Step 3:
Now right click on drawable -> new -> drawable resource file, name the file as custom_seekbar.xml and specify Root element as layer-list -> click on OK. a new file custom_seekbar.xml will be created
Step 4:
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.
Step 5:
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.
Step 6:
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.
Step 7:
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");
}..
Step 8
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.
Java
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);
seekBar=findViewById(R.id.seekbar);
value=findViewById(R.id.progress);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
value.setText(progress+"/"+"50");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}
|
Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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
<?xml version="1.0" encoding="utf-8"?>
<item android:gravity="center_vertical">
<shape android:shape="rectangle">
<solid android:color="#605A5C"/>
<size android:height="30dp"/>
<corners android:radius="9dp"/>
</shape>
</item>
<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
<?xml version="1.0" encoding="utf-8"?>
<solid android:color="@color/purple_200"/>
<size android:height="30dp" android:width="25dp"/>
<corners android:radius="5dp"/>
</shape>
|
Output:
Project Link: Click Here
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...