![\"SeekBar](\"\/ui\/wp-content\/uploads\/2016\/02\/SeekBar-in-Android.jpg\")
<\/p>\nIn Android, SeekBar is an extension of ProgressBar that adds a draggable thumb, a user can touch the thumb and drag left or right to set the value for current progress.<\/p>\n
<\/p>\n
SeekBar is one of the very useful user interface element in Android that allows the selection of integer values using a natural user interface. An example of SeekBar is your device\u2019s brightness control and volume control.<\/p>\n
Important Note:<\/strong><\/span> Attribute of a SeekBar are same as ProgressBar and the only difference is user determine the progress by moving a slider (thumb) in SeekBar. To add a SeekBar to a layout (XML) file, you can use the\u00a0<SeekBar>\u00a0element.<\/p>\n SeekBar code in XML:<\/strong><\/p>\n SeekBar.OnSeekBarChangeListener is a listener used as a\u00a0callback that notifies client when the progress level of seekbar has been changed. This listener can be used for both user initiated changes (in xml file or java class) as well as for programmatic changes.<\/p>\n seekBarInstanceVariable.setOnSeekBarChangeListener(new\u00a0OnSeekBarChangeListener()\u00a0{…}<\/strong>\u00a0– This method is used to notify the user changes\/actions in the SeekBar.<\/p>\n Methods Needs To Be Implemented:<\/strong><\/span><\/span><\/p>\n In Seek bar for getting changes in progress we need to implement three abstract methods. Below is detail description of these three methods:<\/p>\n 1. public\u00a0void\u00a0onProgressChanged (SeekBar seekBar,\u00a0int\u00a0progresValue,\u00a0boolean\u00a0fromUser)\u00a0{…}<\/strong> – 2. public\u00a0void\u00a0onStartTrackingTouch(SeekBar seekBar)\u00a0{…}<\/strong> – 3. public\u00a0void\u00a0onStopTrackingTouch(SeekBar seekBar)\u00a0{…}<\/strong> – getMax():<\/strong><\/span><\/p>\n We can get the maximum value of the SeekBar programmatically means in java class. This method returns an integer value. Below code will\u00a0get the maximum value from a Seekbar.<\/p>\n getProgress():<\/strong><\/span><\/p>\n We can get the current progress value from a Seekbar in java class using getProgress() \u00a0method. This method returns an integer value. Below code is used to\u00a0get the current progress value from a Seek bar.<\/p>\n Now let\u2019s \u00a0we discuss\u00a0important\u00a0attributes that helps us to configure a SeekBar in xml file (layout).<\/p>\n 1. id:<\/span>\u00a0<\/strong>id attribute uniquely identify SeekBar.<\/p>\n 2. max:<\/span>\u00a0<\/strong>max attribute in SeekBar define the maximum it can take. It must be an integer value like 10, 20, 100, 200 etc. We can set the max value in XML\u00a0file as well as in java class. By default, a SeekBar takes maximum value of 100.<\/p>\n Below we set 150 maximum value for a Seek bar.<\/p>\n Setting max value of\u00a0SeekBar Progress In Java Class :<\/strong><\/p>\n 3. progress:<\/span>\u00a0<\/strong>progress is an attribute of SeekBar used to define the default progress value, between 0 and max. It must be an integer value.<\/p>\n Below we set the 200 max value and then set 50 default progress value.<\/p>\n Setting progress In Java Class :<\/strong><\/p>\n 4. progressDrawable:<\/strong><\/span>\u00a0progress drawable attribute is used in Android to set the custom drawable xml for the progress mode of a seekbar. Progress drawable is used when we need to use a custom progress of a seekbar.<\/p>\n Below we set the custom gradient drawable for the progress mode of a Seekbar.<\/p>\n Step 1:<\/strong> Add this code in activity_main.xml or main.xml<\/p>\n Step 2:<\/strong> Create a new drawable resource xml in drawable folder and name it custom_progress. Here add the below code which creates gradient effect in seekbar.<\/p>\n 5. indeterminate:<\/strong><\/span>\u00a0indeterminate is an attribute used in android\u00a0to\u00a0enable the indeterminate mode of a seekbar.\u00a0In this mode a seekbar shows a cyclic animation without an indication of progress. This mode is used in application when we don\u2019t know the amount of work has been done. Here\u00a0actual progress\u00a0will be hidden from user.<\/p>\n Below we set the indeterminate to true.<\/p>\n 6. background:<\/strong><\/span>\u00a0background attribute of seekbar is used to set the background. We\u00a0can set a color or a drawable in the background of a Seekbar. We\u00a0can also set the background color in JAVA\u00a0class.<\/p>\n Below we set the green color for the background of a Seek bar.<\/p>\n Setting Background of SeekBar In Java class:<\/strong><\/p>\n 7. padding:<\/strong><\/span>\u00a0padding attribute of seekbar is used to set the padding from left, right, top or bottom.<\/p>\n Below we set the 20dp padding from the top of the Seek bar.<\/p>\n 8. thumb:<\/strong><\/span>\u00a0thumb attribute is used in seekbar to draw a thumb on a seekbar. We can use an image or a drawable for the thumb.<\/p>\n Below is an example code in which we set a drawable icon for the thumb of the seekbar.<\/p>\n First download the thumb icon from here<\/a> and save in drawable folder of your project. You can also click on below icon and then download it:<\/p>\n Example 1:<\/strong><\/span> In the below example\u00a0of\u00a0 seekbar in Android we display a simple seekbar by using its different attributes as discussed earlier in this post. We also perform seekbar changed listener event which\u00a0is used to get the changes in the progress of a seek bar.\u00a0After getting changes, the changed value of progress is displayed by using a Toast. Below is the download code, final output and step by step tutorial:<\/p>\n Important Note:<\/strong><\/span> Don’t miss the 2nd example of Custom SeekBar in Android which is discussed right after this example.<\/p>\n Download Code<\/a> ? <\/a><\/p>\n Step 1:<\/strong><\/span> Create a new project and name it SeekBarExample<\/strong><\/p>\n Step 2:<\/strong><\/span> Open res -> layout ->\u00a0activity_main.xml (or) main.xml<\/strong>\u00a0and add following code:<\/p>\n In this step we open an xml file and add the code for displaying a seekbar by using its different attributes like max, default progress and few more.<\/p>\n Step 3:<\/strong><\/span> Open src -> package ->\u00a0MainActivity.<\/strong>java<\/strong><\/p>\n In this step we open\u00a0MainActivity\u00a0and\u00a0add the code to\u00a0initiate the seekbar and then perform seekbar changed listener event for getting the changes in the progress of the seekbar. By using this event listener we set get the current value of a seekbar and when a user stop the tracking touch, the value of progress is displayed by using a Toast.<\/p>\n In the 2nd example of seekbar we displayed a custom vertical seekbar by using its different attributes. Similar to first example we perform seekbar changed listener event which is used in getting the changes done in the progress and then those\u00a0changed value of progress is displayed by using a Toast.<\/p>\n Download Code<\/a> ? <\/a><\/p>\n Step 1:<\/strong><\/span> Create a new project and name it SeekBarExample<\/strong><\/p>\n Step 2:<\/strong><\/span> Open res -> layout -> activity_main.xml (or) main.xml<\/strong>\u00a0and add following code:<\/p>\n In this step we open xml file and add the code for displaying a vertical seekbar by using its different attributes like max, default progress etc. In this xml for displaying a vertical seekbar we used a rotational attribute and set 270 value for that.<\/p>\n Step 3:<\/strong>\u00a0 Create an xml file \u00a0in drawable -> custom_progress.xml<\/p>\n In this step we create a custom drawable xml for the seek\u00a0bar. In this xml we create a\u00a0layer list in which we create an item and then set the gradient colors for our custom seek\u00a0bar.<\/p>\n Step 4:<\/strong><\/span> Open\u00a0 \u00a0src -> package -> MainActivity.<\/strong>java<\/strong><\/p>\n In this step we open\u00a0MainActivity\u00a0and here\u00a0we add the code to\u00a0initiate the vertical seekbar and then perform seek bar changed listener event for getting the changes in the progress of the seek bar. By using this event listener we get the current progress value of a seek bar and when a user stop the tracking touch, that value of progress is displayed by using a Toast.<\/p>\n In Android, SeekBar is an extension of ProgressBar that adds a draggable thumb, a user can touch the thumb and drag left or right to set the value for current progress. SeekBar is one of the very useful user interface element in Android that allows the selection of integer values using a natural user interface. … Continue reading SeekBar Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1079","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\" \/>\r\n<\/pre>\n
\nHow To Add Listener To Notify The Changes In SeekBar:<\/strong><\/h4>\n
\nThis listener method will be invoked if any change is made in the SeekBar.<\/p>\n
\nThis listener method will be invoked at the start of user’s touch event. Whenever a user touch the thumb for dragging this method will automatically called.<\/p>\n
\nThis listener method will be invoked at the end of user touch event. Whenever a user stop dragging the thump this method will be automatically called.<\/p>\nSeekBar simpleSeekBar = (SeekBar) findViewById(R.id.simpleSeekBar); \/\/ initiate the Seek bar\r\n\r\nint maxValue=simpleSeekBar.getMax(); \/\/ get maximum value of the Seek bar\r\n<\/pre>\n
SeekBar simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); \/\/ initiate the Seek bar\r\n\r\nint seekBarValue= simpleSeekBar.getProgress(); \/\/ get progress value from the Seek bar\r\n<\/pre>\n
\nAttributes of SeekBar In Android:<\/strong><\/h4>\n
<SeekBar\r\n android:id=\"@+id\/simpleSeekBar\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\" \/> <!-- id of a Seek bar used to uniquely identify it--><\/pre>\n
<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:max=\"150\"\/><!-- set 150 maximum value for the progress --><\/em>\r\n<\/pre>\n
![\"max](\"\/ui\/wp-content\/uploads\/2016\/02\/max-in-seekbar-android.jpg\")
<\/p>\n\/*Add in Oncreate() funtion after setContentView()*\/\r\nSeekBar simpleSeekBar=(SeekBar) findViewById(R.id.simpleSeekBar<\/em>); \/\/ initiate the Seekbar\r\nsimpleSeekBar.setMax(150); \/\/ 150 maximum value for the Seek bar\r\n<\/pre>\n
<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:max=\"200\"\r\nandroid:progress=\"50\"\/><!-- set 150 maximum value for the progress --><\/em>\r\n<\/pre>\n
![\"progress](\"\/ui\/wp-content\/uploads\/2016\/02\/progress-in-SeekBar-Android.jpg\")
<\/p>\nSeekBar simpleSeekBar=(ProgressBar) findViewById(R.id.simpleSeekBar); \/\/ initiate the progress bar\r\n\r\nsimpleSeekBar.setMax(200); \/\/ 200 maximum value for the Seek bar\r\n\r\nsimpleSeekBar.setProgress(50); \/\/ 50 default progress value\r\n<\/pre>\n
<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:max=\"200\"\r\nandroid:progress=\"50\"\r\nandroid:progressDrawable=\"@drawable\/custom_progress\"\/><!-- set custom progress drawable for the progress -->\r\n<\/pre>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" >\r\n <item>\r\n <shape>\r\n <gradient\r\n android:endColor=\"#fff\"\r\n android:startColor=\"#f00\"\r\n android:useLevel=\"true\" \/>\r\n <\/shape>\r\n <\/item>\r\n\r\n<\/layer-list><\/pre>\n
![\"progressDrawable](\"\/ui\/wp-content\/uploads\/2016\/03\/progressDrawable-in-SeekBar-Android.gif\")
<\/p>\n<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:max=\"200\"\r\nandroid:indeterminate=\"true\"\/><!-- set custom progress drawable for the progress -->\r\n<\/pre>\n
![\"indeterminate](\"\/ui\/wp-content\/uploads\/2016\/03\/indeterminate-in-SeekBar-Android.gif\")
<\/p>\n<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:max=\"200\"\r\nandroid:indeterminate=\"true\"\r\nandroid:background=\"#0F0\"\/><!-- set green color in the background of seek bar-->\r\n<\/pre>\n
![\"background](\"\/ui\/wp-content\/uploads\/2016\/03\/background-in-SeekBar-Android.gif\")
<\/p>\nSeekBar simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); \/\/ initiate the seek bar\r\n\r\nsimpleSeekBar.setBackgroundColor(Color.GREEN); \/\/ green background color for the seek bar<\/pre>\n
\n
<SeekBar\r\n android:id=\"@+id\/simpleSeekBar\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:max=\"200\"\r\n android:progress=\"150\"\r\n android:background=\"#34A853\"\r\n android:paddingTop=\"40dp\"\/><!-- set 20dp padding from the top of the seek bar--><\/pre>\n
![\"Padding](\"\/ui\/wp-content\/uploads\/2016\/03\/Padding-in-SeekBar-Android.jpg\")
<\/p>\n![\"thumb](\"\/ui\/wp-content\/uploads\/2016\/03\/thumb.png\")
<\/a><\/p>\n<SeekBar\r\nandroid:id=\"@+id\/simpleSeekBar\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:max=\"200\"\r\nandroid:progress=\"100\"\r\nandroid:thumb=\"@drawable\/thumb\"\/><!-- set\u00a0 a thumb drawable icon for the seek bar-->\r\n<\/pre>\n
\n<\/strong><\/p>\n
\nSeekBar Example In Android Studio:<\/strong><\/h4>\n
<\/p>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n tools:context=\".MainActivity\">\r\n\r\n <SeekBar\r\n android:id=\"@+id\/simpleSeekBar\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginTop=\"20dp\"\r\n android:max=\"200\"\r\n android:progress=\"60\"\r\n \/>\r\n\r\n<\/RelativeLayout><\/pre>\n
package example.gb.seekbarexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.support.v7.widget.ButtonBarLayout;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.SeekBar;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n Button submitButton;\r\n SeekBar simpleSeekBar;\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n \/\/ initiate views\r\n simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar);\r\n \/\/ perform seek bar change listener event used for getting the progress value\r\n simpleSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {\r\n int progressChangedValue = 0;\r\n\r\n public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {\r\n progressChangedValue = progress;\r\n }\r\n\r\n public void onStartTrackingTouch(SeekBar seekBar) {\r\n \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n public void onStopTrackingTouch(SeekBar seekBar) {\r\n Toast.makeText(MainActivity.this, \"Seek bar progress is :\" + progressChangedValue,\r\n Toast.LENGTH_SHORT).show();\r\n }\r\n });\r\n\r\n }\r\n\r\n \r\n}<\/pre>\n
\nCustom vertical SeekBar Example In Android Studio:<\/strong><\/h4>\n
<\/p>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n tools:context=\".MainActivity\">\r\n\r\n <SeekBar\r\n android:id=\"@+id\/customSeekBar\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_centerInParent=\"true\"\r\n android:max=\"200\"\r\n android:progress=\"40\"\r\n android:thumb=\"@drawable\/thumb_icon\"\r\n android:rotation=\"270\"\r\n android:progressDrawable=\"@drawable\/custom_progress\"\/>\r\n\r\n<\/RelativeLayout><\/pre>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n <item>\r\n \r\n <shape>\r\n <gradient android:useLevel=\"true\"\r\n android:startColor=\"#560\" \r\n android:endColor=\"#454455\"\/>\r\n <\/shape>\r\n <\/item>\r\n<\/layer-list>\r\n<\/pre>\n
package example.gb.seekbarexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.widget.SeekBar;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n Button submitButton;\r\n SeekBar customSeekBar;\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n \/\/ initiate views\r\n customSeekBar =(SeekBar)findViewById(R.id.customSeekBar);\r\n \/\/ perform seek bar change listener event used for getting the progress value\r\n customSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {\r\n int progressChangedValue = 0;\r\n\r\n public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {\r\n progressChangedValue = progress;\r\n }\r\n\r\n public void onStartTrackingTouch(SeekBar seekBar) {\r\n \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n public void onStopTrackingTouch(SeekBar seekBar) {\r\n Toast.makeText(MainActivity.this, \"Seek bar progress is :\" + progressChangedValue,\r\n Toast.LENGTH_SHORT).show();\r\n }\r\n });\r\n\r\n }\r\n\r\n \r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"