Android - styling seek bar

Question

I wanted to style a seek bar which looks like the one in the image below     By using default seekbar I will get something like this     So what I need is to only change the color  I need no extra styles  Is there any straight forward approach to do this or should I build my custom drawable    I tried building custom one  but I could not get the exact one as shown above  After using custom drawable  what I get is as shown below     If I need to build the custom one  then please suggest how to reduce the width of the progress line and also the shape   my custom implementation   background fill xml    lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt        lt gradient         android angle  90          android centerColor   FF555555          android endColor   FF555555          android startColor   FF555555    gt        lt corners android radius  1dp    gt        lt stroke         android width  1dp          android color   50999999    gt       lt stroke         android width  1dp          android color   70555555    gt    lt  shape gt    progress fill xml   lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt        lt gradient         android angle  90          android centerColor   FFB80000          android endColor   FFFF4400          android startColor   FF470000    gt        lt corners android radius  1dp    gt        lt stroke         android width  1dp          android color   50999999    gt       lt stroke         android width  1dp          android color   70555555    gt    lt  shape gt    progress xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt        lt item         android id   android id background          android drawable   drawable background fill   gt       lt item android id   android id progress  gt           lt clip android drawable   drawable progress fill    gt       lt  item gt    lt  layer-list gt    thumb xml   lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval   gt        lt gradient         android angle  270          android endColor   E5492A          android startColor   E5492A    gt        lt size         android height  20dp          android width  20dp    gt    lt  shape gt    seekbar    lt SeekBar         android id    id seekBarDistance          android layout width  match parent          android layout height  wrap content          android layout alignParentLeft  true          android layout alignParentTop  true          android layout marginTop  88dp          android progressDrawable   drawable progress          android thumb   drawable thumb   gt       lt  SeekBar gt

User · Answer

My answer is inspired from Andras Bal  zs Lajtha answer  it allow to work without xml file  seekBar getProgressDrawable   setColorFilter Color RED  PorterDuff Mode SRC IN   seekBar getThumb   setColorFilter Color RED  PorterDuff Mode SRC IN

User · Answer

If you look at the Android resources  the seek bar actually use images   You have to make a drawable which is transparent on top and bottom for say 10px and the center 5px line is visible   Refer attached image  You need to convert it into a NinePatch

User · Answer

output   Change Progress Color  int normalColor   ContextCompat getColor context  R color normal color   int selectedColor   ContextCompat getColor context  R color selected color   Drawable normalDrawable   new ColorDrawable normalColor   Drawable selectedDrawable   new ColorDrawable selectedColor   ClipDrawable clipDrawable   new ClipDrawable selectedDrawable  Gravity LEFT  ClipDrawable HORIZONTAL   Drawable   layers    normalDrawable  clipDrawable  clipDrawable   LayerDrawable seekbarDrawable   new LayerDrawable layers   seekBar setProgressDrawable seekbarDrawable    Change Thumb Color  int thumbColor   ContextCompat getColor context  R color thumb color   Drawable unwrappedDrawable   AppCompatResources getDrawable context  R drawable ic seekbar thumb   assert unwrappedDrawable    null  Drawable wrappedDrawable   DrawableCompat wrap unwrappedDrawable   DrawableCompat setTint wrappedDrawable  thumbColor   seekBar setThumb wrappedDrawable

User · Answer

I would extract drawables and xml from Android source code and change its color to red  Here is example how I completed this for mdpi drawables    Custom red scrubber control xml  add to res drawable     lt selector xmlns android  http   schemas android com apk res android  gt        lt item android drawable   drawable red scrubber control disabled holo  android state enabled  false   gt       lt item android drawable   drawable red scrubber control pressed holo  android state pressed  true   gt       lt item android drawable   drawable red scrubber control focused holo  android state selected  true   gt       lt item android drawable   drawable red scrubber control normal holo   gt   lt  selector gt    Custom  red scrubber progress xml   lt layer-list xmlns android  http   schemas android com apk res android   gt        lt item         android id   android id background          android drawable   drawable red scrubber track holo light   gt       lt item android id   android id secondaryProgress  gt           lt scale             android drawable   drawable red scrubber secondary holo              android scaleWidth  100     gt       lt  item gt       lt item android id   android id progress  gt           lt scale             android drawable   drawable red scrubber primary holo              android scaleWidth  100     gt       lt  item gt    lt  layer-list gt    Then copy required drawables from Android source code  I took from this link  It is good to copy these drawables for each hdpi  mdpi  xhdpi  For example I use only mdpi   Then using Photoshop change color from blue to red   red scrubber control disabled holo png    red scrubber control focused holo png    red scrubber control normal holo png    red scrubber control pressed holo png    red scrubber primary holo 9 png    red scrubber secondary holo 9 png    red scrubber track holo light 9 png    Add SeekBar to layout    lt SeekBar     android id    id seekBar1      android layout width  match parent      android layout height  wrap content      android progressDrawable   drawable red scrubber progress      android thumb   drawable red scrubber control    gt    Result

User · Answer

All those answers are deprecated   In 2019 it s easier to style your seekbar to your preferred color by changing your ProgressBar to this    lt SeekBar             android id    id seekBar              android layout width  match parent              android layout height  wrap content              android progressTint   36970f              android thumbTint   36970f                gt    Styling your seekbar color programmatically try the following code          seekBar getProgressDrawable   setColorFilter Color RED  PorterDuff Mode SRC IN           seekBar getThumb   setColorFilter Color RED  PorterDuff Mode SRC IN

User · Answer

Just replace color atributtes with your color  background xml   lt shape xmlns android  http   schemas android com apk res android      android shape  line  gt        lt stroke android width  1dp  android color   D9D9D9   gt       lt corners android radius  1dp    gt    lt  shape gt    progress xml   lt shape xmlns android  http   schemas android com apk res android       android shape  line  gt        lt stroke android width  1dp  android color   2EA5DE   gt       lt corners android radius  1dp    gt    lt  shape gt    style xml   lt layer-list xmlns android  http   schemas android com apk res android   gt        lt item         android id   android id background          android drawable   drawable seekbar background   gt       lt item android id   android id progress  gt           lt clip android drawable   drawable seekbar progress    gt       lt  item gt    lt  layer-list gt    thumb xml   lt shape xmlns android  http   schemas android com apk res android      android shape  oval  gt        lt size android height  30dp  android width  30dp   gt       lt stroke android width  18dp  android color   882EA5DE   gt       lt solid android color   2EA5DE    gt       lt corners android radius  1dp    gt    lt  shape gt

User · Answer

By default  android will match the progress color of your slider to     lt item name  colorAccent  gt     value in your styles xml   Then  to set a custom slider thumb image  just use this code in your SeekBar xml layout s block   android thumb   drawable slider

User · Answer

If you want exactly the same bar but in red  you can add a PorterDuff color filter programatically  You can get each drawable that you want to colorize through the methods of the ProgressBar base class  Then set a color filter for it   mySeekBar getProgressDrawable   setColorFilter new PorterDuffColorFilter srcColor  PorterDuff Mode MULTIPLY      If the wanted color adjustment can t be made through a Porter Duff filter  you can specify your own color filter

User · Answer

LayerDrawable progressDrawable    LayerDrawable  mSeekBar getProgressDrawable        progress bar line  progress  color Drawable processDrawable   progressDrawable findDrawableByLayerId android R id progress       progress bar line  background  color Drawable backgroundDrawable   progressDrawable findDrawableByLayerId android R id background       progress bar line  secondaryProgress  color Drawable secondaryProgressDrawable   progressDrawable findDrawableByLayerId android R id secondaryProgress   processDrawable setColorFilter Color RED  PorterDuff Mode SRC IN       progress bar line all color mSeekBar getProgressDrawable   setColorFilter Color BLUE  PorterDuff Mode SRC IN       progress circle color mSeekBar getThumb   setColorFilter Color GREEN  PorterDuff Mode SRC IN

User · Answer

Just set   android maxHeight  3dp  android minHeight  3dp    That s all

User · Answer

You can also make it this way      lt SeekBar     android id    id redSeekBar      android layout width  match parent      android layout height  wrap content      android progressDrawable   color red      android maxHeight  3dip   gt    Hope it will help

User · Answer

Simple Way to change the seek bar color        lt ProgressBar             android id    id progress              android layout width  wrap content              android layout height  wrap content              android layout gravity  center              android theme   style Progress color   gt    Style   Progress color    lt style name  Progress color  gt       lt item name  colorAccent  gt  color white lt  item gt   lt  -- Whatever color you want-- gt   lt  style gt    java class change ProgressDrawable    seek bar getProgressDrawable   setColorFilter getResources   getColor R color white   PorterDuff Mode MULTIPLY

User · Answer

With the Material Component Library version 1 2 0 you can use the new Slider component     lt com google android material slider Slider        android valueFrom  0         android valueTo  300         android value  200         android theme   style slider red           gt    You can override the default color using something like      lt style name  slider red  gt       lt item name  colorPrimary  gt         lt  item gt     lt  style gt      Otherwise you can use these attribute in the layout to define a color or a color selector       lt com google android material slider Slider        app activeTrackColor   color              app inactiveTrackColor   color              app thumbColor   color                gt    or you can use a custom style     lt style name  customSlider  parent  Widget MaterialComponents Slider  gt       lt item name  activeTrackColor  gt  color      lt  item gt       lt item name  inactiveTrackColor  gt  color      lt  item gt       lt item name  thumbColor  gt  color      lt  item gt     lt  style gt

User · Answer

Android seekbar custom material style  for other seekbar customizations http   www zoftino com android-seekbar-and-custom-seekbar-examples    lt style name  MySeekBar  parent  Widget AppCompat SeekBar  gt       lt item name  android progressBackgroundTint  gt  f4511e lt  item gt       lt item name  android progressTint  gt  388e3c lt  item gt       lt item name  android colorControlActivated  gt  c51162 lt  item gt   lt  style gt

User · Answer

For those who use Data Binding    Add the following static method to any class   BindingAdapter  app thumbTintCompat   public static void setThumbTint SeekBar seekBar   ColorInt int color        seekBar getThumb   setColorFilter color  PorterDuff Mode SRC IN      Add app thumbTintCompat attribute to your SeekBar   lt SeekBar        android id    id seek bar         style   style Widget AppCompat SeekBar         android layout width  wrap content         android layout height  wrap content         app thumbTintCompat     android color white     gt     That s it  Now you can use app thumbTintCompat with any SeekBar  The progress tint can be configured in the same way   Note  this method is also compatble with pre-lollipop devices

User · Answer

For APIs  lt  21  and    21  you can use the answer of  Ahamadullah Saikat or https   www lvguowei me post customize-android-seekbar-color       lt SeekBar     android id    id seekBar      android layout width  match parent      android layout height  wrap content      android maxHeight  3dp      android minHeight  3dp      android progress  50      android progressDrawable   drawable seek bar ruler      android thumb   drawable seek bar slider        gt    drawable seek bar ruler xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android id   android id background  gt           lt shape android shape  rectangle  gt               lt solid                 android color   94A3B3    gt               lt corners android radius  2dp    gt           lt  shape gt       lt  item gt       lt item android id   android id progress  gt           lt clip gt               lt shape android shape  rectangle  gt                   lt solid                     android color   18244D    gt                   lt corners android radius  2dp    gt               lt  shape gt           lt  clip gt       lt  item gt   lt  layer-list gt    drawable seek bar slider xml    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval       gt        lt solid android color   FFFFFF    gt       lt stroke         android width  4dp          android color   18244D            gt       lt size         android width  25dp          android height  25dp            gt   lt  shape gt

User · Answer

lt SeekBar android id    id seekBar1  android layout width  match parent  android layout height  wrap content  android layout gravity  center  android progressTint   color red  android thumbTint   color red    gt    works Like same the answer selected  no need to make any drawable file or else  IN 5 0 only  Regards

User · Answer

Small correction to the answer by  arnav-rao   to make sure that the thumb is colored properly  use    lt style name  MySeekBar  parent  Widget AppCompat SeekBar  gt       lt item name  android progressBackgroundTint  gt  color colorBgTint lt  item gt       lt item name  android progressTint  gt  color colorProgressTint lt  item gt       lt item name  android thumbTint  gt  color colorThumbTint lt  item gt   lt  style gt    here android thumbTint actually colors the  thumb

User · Answer

I wanted to create a style for the seekbar and then add the style to a theme so that I could have it applied to an entire theme while still allowing a substyle to override it  Here is what I did    lt  -- Blue App Theme -- gt       lt style name  AppTheme Blue  parent  BaseTheme Blue  gt                   lt item name  android seekBarStyle  gt  style SeekbarStyle Blue lt  item gt           lt item name  seekBarStyle  gt  style SeekbarStyle Blue lt  item gt   lt  --This is essential for some devices  e g  Samsung-- gt   lt  style gt    lt  -- Slider Styles -- gt   lt style name  SeekbarStyle Blue  parent  Widget AppCompat SeekBar  gt           lt item name  android progressBackgroundTint  gt  color material blue a700 pct 30 lt  item gt           lt item name  android thumbTint  gt  color material blue a700 lt  item gt           lt item name  android thumbTintMode  gt src in lt  item gt           lt item name  android progressTint  gt  color material blue a700 lt  item gt   lt  style gt    lt style name  SeekbarStyle Green  parent  Widget AppCompat SeekBar  gt           lt item name  android progressBackgroundTint  gt  color material green a700 pct 30 lt  item gt           lt item name  android thumbTint  gt  color material green a700 lt  item gt           lt item name  android thumbTintMode  gt src in lt  item gt           lt item name  android progressTint  gt  color material green a700 lt  item gt   lt  style gt    The above sets the Theme seekbar style to blue for all devices 21  including Samsung  which need the seekBarStyle applied in addition to android seekBarStyle  not sure why but I saw this issue firsthand   If you want all seekbars to keep the theme style and only apply the green seekbar style to a few widgets then add the following to the widget you want    lt SeekBar             android layout width  match parent              android layout height  wrap content              android theme   style AppTheme Green   gt

User · Answer

As mention one above   andrew    creating custom SeekBar is super Easy with this site - http   android-holo-colors com   Just enable SeekBar there  choose color  and receive all resources and copy to project  Then apply them in xml  for example     android thumb   drawable apptheme scrubber control selector holo light    android progressDrawable   drawable apptheme scrubber progress horizontal holo light

User · Answer

I change the background fill xml   lt  xml version  1 0  encoding  UTF-8   gt     lt shape xmlns android  http   schemas android com apk res android  android shape  line   gt   lt size android height  1dp    gt   lt gradient     android angle  0      android centerColor   616161      android endColor   616161      android startColor   616161    gt   lt corners android radius  0dp    gt   lt stroke     android width  1dp      android color   616161    gt   lt stroke     android width  1dp      android color   616161    gt   lt  shape gt    and the progress fill xml    lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  line   gt   lt size android height  1dp    gt   lt gradient     android angle  0      android centerColor   fafafa      android endColor   fafafa      android startColor   fafafa    gt   lt corners android radius  1dp    gt   lt stroke     android width  1dp      android color   cccccc    gt   lt stroke     android width  1dp      android color   cccccc    gt    lt  shape gt    to make the background  amp  progress 1dp height

User · Answer

check this tutorial very good   https   www lvguowei me post customize-android-seekbar-color   simple     lt SeekBar                 android id    id seekBar                  android layout width  match parent                  android layout height  wrap content                  android max  100                  android maxHeight  3dp                  android minHeight  3dp                  android progressDrawable   drawable seekbar style                  android thumbTint   color positive color   gt    then a style file    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item android id   android id background  gt           lt shape android shape  rectangle   gt               lt solid                 android color   color positive color    gt           lt  shape gt       lt  item gt       lt item android id   android id progress  gt           lt clip gt               lt shape android shape  rectangle   gt                   lt solid                     android color   color positive color    gt               lt  shape gt           lt  clip gt       lt  item gt   lt  layer-list gt

User · Answer

If you are using default SeekBar provided by android Sdk then their is a  simple way to change the color of that   just go to color xml inside  res values colors xml and change the colorAccent    lt resources gt       lt color name  colorPrimary  gt  212121 lt  color gt       lt color name  colorPrimaryDark  gt  1e1d1d lt  color gt        lt  -- change below line -- gt       lt color name  colorAccent  gt  FF4081 lt  color gt   lt  resources gt

User · Answer

Google have made this easier in SDK 21   Now we have attributes for specifying the thumb tint colors   android thumbTint android thumbTintMode android progressTint   http   developer android com reference android widget AbsSeekBar html attr android thumbTint http   developer android com reference android widget AbsSeekBar html attr android thumbTintMode

[android] Android - styling seek bar

Examples related to android

Examples related to android-seekbar

Examples related to custom-selectors

Examples related to android-slider