Create custom Seekbar in android example tutorial

How to customize seekbar and change its properties using external custom XML layout file with android:thumb”” thumbnail.

In this tutorial we are simply customizing seekbar and changing its all properties like background and drag thumbnail icon and after dragging background color, After this changing our seekbar will completely modified and dose not look the same as default seekbar.  So here is the complete step by step tutorial for Create custom Seekbar in android example tutorial.

android-project-download-code-button

Note : Please download all three icon images from below and copy inside drawable-hdpi folder.

drawable hdpi folder

 

Below is the demo images:

drag_thumb

 

progress_one

 

progress_two

 

How to Create custom Seekbar in android example tutorial.

Code for MainActivity.java file.

 package com.customseekbar_android_examples.com;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends Activity {

 SeekBar customSeekbar;
 TextView progress;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 customSeekbar = (SeekBar)findViewById(R.id.seekBar1);
 progress = (TextView)findViewById(R.id.textView1);
 
 customSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
 @Override
 public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
 

 progress.setText( " " + i);
 
 }

 @Override
 public void onStartTrackingTouch(SeekBar seekBar) {

 }
 @Override
 public void onStopTrackingTouch(SeekBar seekBar) {

 }
 });
 
 }

}

Code for activity_main.xml layout file.

 <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.customseekbar_android_examples.com.MainActivity" >

 <SeekBar
 android:id="@+id/seekBar1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_centerVertical="true"
 android:thumb="@drawable/drag_thumb"
 android:progressDrawable="@layout/custom_seekbar_layout"
 android:max="100" />

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/seekBar1"
 android:layout_centerHorizontal="true"
 android:layout_marginBottom="24dp"
 android:text=""
 android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Code for custom_seekbar_layout.xml file.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item
 android:id="@+id/SecondaryProgress"
 android:drawable="@drawable/progress_two"/>
 <item
 android:id="@+android:id/progress"
 android:drawable="@drawable/progress_one"/>
</layer-list>

Screenshots:

seekbar-1

Create custom Seekbar in android example tutorial

Click here to download Create custom Seekbar in android example tutorial project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *