Seekbar (progressbar) customizing

daanvk · by **daanvk** » Sun May 03, 2009 9:17 pm

Dear all,

I am rather new to Android development (currently busy on my second app) so I hope I'm not asking a stupid question, however I've spent the last 2 hours looking for a solution for the following:

I would like to customize a Seekbar so it isn't the ugly orange color and has a nice looking thumb image.
So far I managed to replace the thumb and the progress image which is already 80%. However, I now have a seekbar that does not change color if any progress is made :cry:

How do I set the image for the progressed part of the seekbar?

Code I have so far:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<SeekBar android:id="@+id/seek"
 
            android:thumb="@drawable/blue_thumb"
 
            android:progressDrawable="@drawable/blue_bar"
 
            android:layout_width="fill_parent"
 
            android:layout_below="@id/progress"
 
            android:layout_height="10px" 
 
            android:paddingLeft="8px" 
 
            android:paddingRight="8px"
 
            android:layout_toRightOf="@id/text"/>
 
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

I've attached an image of my work so far.

Many thanks in advance for your replies!

daanvk · by **daanvk** » Mon May 04, 2009 10:19 pm

With the help of zhobbs on the freenode android-dev irc channel I managed to get the direction I needed.
In order to have a seekbar (or progressbar) that has 2 images you will have to create a layer drawable.
This is done in an seperate XML document that has to be saved to the res\drawable directory.
Mine contains the following:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="UTF-8"?>
 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item 
 
          android:id="@+android:id/background" 
 
          android:drawable="@drawable/grey_vol" />
 
        <item 
 
          android:id="@+android:id/SecondaryProgress" 
 
          android:drawable="@drawable/grey_vol" />
 
     <item
 
        android:id="@+android:id/progress"       
 
          android:drawable="@drawable/blue_vol" />
 
</layer-list>
 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

In your main.xml just add the seekbar and set the drawable to the filename of your layer drawable xml filename:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
                <SeekBar android:id="@+id/progress"
 
                android:thumb="@drawable/blue_thumb"
 
            android:progressDrawable="@drawable/blue_seekbar"
 
            android:layout_width="250px"
 
            android:secondaryProgress="255" 
 
            android:layout_height="10px" 
 
            android:paddingLeft="8px" 
 
            android:paddingRight="8px"
 
                android:layout_below="@id/rewind"
 
                        android:layout_toRightOf="@id/time"
 
                />
 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

See the attached image for the result!

Next step will be adding nine patch images to my seekbar, does anyone have a good tutorial?

divestoclimb · by **divestoclimb** » Tue May 12, 2009 6:26 pm

I want to do the same thing for one of my apps! It's nice to know someone else figured it out. Thanks for the update.

MassOrbit · by **MassOrbit** » Tue Jul 28, 2009 11:25 pm

Hey Everyone:

I'm working on customizing (skinning) the SeekBar as well. Hopefully this topic is still alive.

I have no problem replacing the thumb image, but I am running into problems replacing the background.

The android:Background only sets what is behind the orange/gray bar.

I've tried setting android:progressDrawable to a PNG image and to a XML Layer-list but either I get no result or I am getting a NULL error in the Eclipse Android Menu designer.

Are there any guidelines on customizing this? Ie: 9.PNG? Is there a complete example anywhere? Can anyone point me to some documentation that may help?

Thanks!

longhairedsi · by **longhairedsi** » Sun Aug 02, 2009 12:28 am

Hi,

to use a 9 patch you need to have an XML Layer-list as follows

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
 
    <item android:id="@android:id/background"
 
    android:drawable="@drawable/prog_bg" /> 
 
    <item android:id="@android:id/secondaryProgress"> 
 
     <clip android:drawable="@drawable/prog_second" /> 
 
    </item> 
 
    <item android:id="@android:id/progress"> 
 
         <clip android:drawable="@drawable/prog" /> 
 
    </item> 
 
</layer-list> 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

the main point of interest is the <clip /> section where you specify the drawable. The 9patch Drawable needs to be in a clip element but I'm not 100% sure why. Anyone any ideas?

Cheers
Si

MassOrbit · by **MassOrbit** » Mon Aug 03, 2009 8:38 pm

Thanks Longhairedsi!

I actually ended up using a clear (#00000000) Color Resource for android:progressDrawable. That way I could just set android:Background to anything I wanted, and still have it work correctly in the XML View Designer in Eclipse.

burakkilic · by **burakkilic** » Sun Dec 13, 2009 3:25 pm

I need that the progress of SeekBar increments 10 by 10. How can I achive this? Example is int the Layar application. I need the same range selector.

ameya721 · by **ameya721** » Thu Feb 18, 2010 7:12 am

i actually used that <clip> to set the drawables for the seekbar as :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+android:id/background" android:drawable="@drawable/progbar2" />

<item android:id="@+android:id/SecondaryProgress">
<clip android:drawable="@drawable/progbar3" />
</item>
<item android:id="@+android:id/progress">
<clip android:drawable="@drawable/progbar1"/>
</item>

</layer-list>

bt while setting the progress using the fns incrementProgressBy() and incrementSecondaryProgressBy()
i get weired behavior...as the secondary progress gets incremented...the progresss also gets upto tht mark...i.e...it also gets drawn (on secondary progress)... can u help?

nioupy · by **nioupy** » Sat Jun 12, 2010 4:48 pm

Old post but worth the thanks : thanks daanvk, you made my day

Hareen · by **Hareen** » Thu Jan 27, 2011 1:03 pm

Hello All, can anyone plz tell me how to set a seekbar to its initial position. i mean on click of a reset button, it should return to its initial value.... Plz help.... T
hanks in advance,
Hareen

nioupy · by **nioupy** » Fri Jan 28, 2011 6:27 am

I guess a .setValue(0) will do

Zeba Momin · by **Zeba Momin** » Tue Apr 26, 2011 8:36 am

Thanks for such a useful post.... I have been successfully able to implement my custom seekbar. But now my requirements have changed and I need to implement my seekbar without using any images (drawables).
To do so I have used a <layer-list> and have been able to set primary and secondary progress backgrounds to my seekbar using color codes only.
But the problem lies in setting the thumb for the seekbar. I have attached an image to depict the requirement for the seekbar thumb.
I have created a custom view class, which draws a circle on the canvas, but now I can't understand how do I set this custom view as thumb to the seekbar.
Please help.
Thank you.

flaviocapaccio · by **flaviocapaccio** » Tue Jan 29, 2013 5:42 pm

Hi thanks for this post. I'm trying to do something similar and I'm trying to write text inside of a seekbar showing its actual progress.
Could anyone help me?

I'm trying to use this function that works for writing text on thumb:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

public BitmapDrawable writeOnDrawable(int drawableId, String text){
 
    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
 
    Paint paint = new Paint(); 
    paint.setStyle(Style.FILL);  
    paint.setColor(Color.BLACK); 
    paint.setTextSize(20); 
 
    Canvas canvas = new Canvas(bm);
    canvas.drawText(text, 0, bm.getHeight()/2, paint);
 
    return new BitmapDrawable(bm);
}
Parsed in 0.000 seconds,  using GeSHi 1.0.8.4

But it doesn't work when I pass as drawable id the id of this file that represent my Seekbar

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?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>
         <corners
           android:radius="2dip" />
         <solid android:color="#EF333333"/>
      </shape>
   </item>
   <item
     android:id="@android:id/secondaryProgress">
      <clip>
         <shape>
            <corners
              android:radius="2dip" />
            <gradient
              android:startColor="#33ffaa11"
              android:endColor="#33ffdd33"
              android:angle="90" />
         </shape>
      </clip>
   </item>
   <item
     android:id="@android:id/progress">
      <clip>
         <shape>
            <corners
              android:radius="2dip" />
            <gradient
              android:startColor="#ff08384e"
              android:endColor="#ff1172A4"
              android:angle="90" />
         </shape>
      </clip>
   </item>
</layer-list>
Parsed in 0.005 seconds,  using GeSHi 1.0.8.4

or when I pass the xml definition of my Seekbar:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<SeekBar
            android:id="@+id/seekBar1"
            android:padding="10dp"
            android:thumb="@drawable/line"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:minHeight="50dp"
            android:maxHeight="50dp"
            android:progressDrawable="@drawable/horizbar" />
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

Thank you for your help!

wakawaka · by **wakawaka** » Mon Feb 04, 2013 6:16 am

Thanks for sharing. Nice piece of work.

Seekbar (progressbar) customizing

Seekbar (progressbar) customizing

SeekBar Background

Re: Seekbar (progressbar) customizing

Re: Seekbar (progressbar) customizing

Re: Seekbar (progressbar) customizing

Re: Seekbar (progressbar) customizing

Re: Seekbar (progressbar) customizing

Re: Seekbar (progressbar) customizing

Who is online