Friday 22 January 2016

Dynamically Update Color of SeekBar

Hola Androidians!!

Have you ever wanted to design a seek bar which could update its color dynamically when you drag it??

Well I had done this some time back hope this helps :

In your layout.xml file declare the seekbar as below :

 <SeekBar  
         android:id="@+id/settings_seekbar_usage_stogare"  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content"  
         android:progressDrawable="@drawable/seek_bar_bg"  
         android:thumb="@drawable/settings_seekbar_circle"  
         android:thumbOffset="20dp"  
         android:secondaryProgress="0" />  

seek_bar_bg.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
   <item android:id="@android:id/background">  
     <shape android:shape="rectangle" >  
       <corners android:radius="5dp" />  
       <gradient  
         android:angle="270"  
         android:endColor="#FFFFFF"  
         android:startColor="#FFFFFF" />  
     </shape>  
   </item>  
   <item android:id="@+id/progressshape">  
     <clip>  
       <shape android:shape="rectangle" >  
         <corners android:radius="5dp" />  
         <gradient  
           android:angle="270"  
           android:endColor="#00ff00"  
           android:startColor="#00ff00" />  
       </shape>  
     </clip>  
   </item>  
 </layer-list>  

Progress Drawable : seek_bar_bg.png    ---->     


Finally, In your Fragment / Activity use the below code in onProgressChanged event of seekbar :

 @Override  
      public void onProgressChanged(SeekBar seekBar, int progress,  
                boolean fromUser) {  
           if(progress > 0)  
                seekbarProgressColor = progress / seekbarProgressValue;  
           System.out.println(seekbarProgressColor);  
           if(seekbarProgressColor <= 50){  
          setProgressBarColor(mSeekBarStorageLimit, Color.rgb( 255 - (255/100 * (100 - (int)(seekbarProgressColor* 2))), 255, 0));  
         }else{  
              setProgressBarColor(mSeekBarStorageLimit, Color.rgb( 255, 255 - (255/100 * (int)((seekbarProgressColor - 50)*2)), 0));  
         }  
      }  
 //Function responsible to change the color of seekbar  
 public void setProgressBarColor(SeekBar seakBar, int newColor){  
          LayerDrawable ld = (LayerDrawable) seakBar.getProgressDrawable();  
          ClipDrawable d1 = (ClipDrawable) ld.findDrawableByLayerId(R.id.progressshape);  
          d1.setColorFilter(newColor, PorterDuff.Mode.SRC_IN);  
        }  

DONE!! Enjoy :-)

No comments:

Post a Comment