Seekbar (progressbar) customizing

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

Seekbar (progressbar) customizing

Postby 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
  1.  
  2. <SeekBar android:id="@+id/seek"
  3.  
  4.             android:thumb="@drawable/blue_thumb"
  5.  
  6.             android:progressDrawable="@drawable/blue_bar"
  7.  
  8.             android:layout_width="fill_parent"
  9.  
  10.             android:layout_below="@id/progress"
  11.  
  12.             android:layout_height="10px"
  13.  
  14.             android:paddingLeft="8px"
  15.  
  16.             android:paddingRight="8px"
  17.  
  18.             android:layout_toRightOf="@id/text"/>
  19.  
  20.  
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!
Attachments
seekbar.png
Seekbar with new image and new thumb, unfortunately no progress image!
seekbar.png (26.54 KiB) Viewed 37566 times
daanvk
Freshman
Freshman
 
Posts: 4
Joined: Mon Apr 13, 2009 10:18 am

Top

Postby 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
  1.  
  2. <?xml version="1.0" encoding="UTF-8"?>
  3.  
  4.  
  5.  
  6. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  7.  
  8.  
  9.  
  10.      <item
  11.  
  12.          android:id="@+android:id/background"
  13.  
  14.          android:drawable="@drawable/grey_vol" />
  15.  
  16.         <item
  17.  
  18.          android:id="@+android:id/SecondaryProgress"
  19.  
  20.          android:drawable="@drawable/grey_vol" />
  21.  
  22.      <item
  23.  
  24.         android:id="@+android:id/progress"      
  25.  
  26.          android:drawable="@drawable/blue_vol" />
  27.  
  28. </layer-list>
  29.  
  30.  
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
  1.  
  2.                 <SeekBar android:id="@+id/progress"
  3.  
  4.                 android:thumb="@drawable/blue_thumb"
  5.  
  6.             android:progressDrawable="@drawable/blue_seekbar"
  7.  
  8.             android:layout_width="250px"
  9.  
  10.             android:secondaryProgress="255"
  11.  
  12.             android:layout_height="10px"
  13.  
  14.             android:paddingLeft="8px"
  15.  
  16.             android:paddingRight="8px"
  17.  
  18.                 android:layout_below="@id/rewind"
  19.  
  20.                         android:layout_toRightOf="@id/time"
  21.  
  22.                 />
  23.  
  24.  
Parsed in 0.001 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?
Attachments
seekbar2.PNG
Seekbar with correct images!!!
seekbar2.PNG (415 Bytes) Viewed 37548 times
daanvk
Freshman
Freshman
 
Posts: 4
Joined: Mon Apr 13, 2009 10:18 am

Postby 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.
divestoclimb
Developer
Developer
 
Posts: 33
Joined: Mon May 11, 2009 7:46 pm

SeekBar Background

Postby 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!
MassOrbit
Freshman
Freshman
 
Posts: 2
Joined: Sat Jul 18, 2009 11:26 pm

Postby 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
  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.  
  3.  
  4.  
  5.  
  6.  
  7.     <item android:id="@android:id/background"
  8.  
  9.    android:drawable="@drawable/prog_bg" />
  10.  
  11.  
  12.  
  13.  
  14.  
  15.     <item android:id="@android:id/secondaryProgress">
  16.  
  17.      <clip android:drawable="@drawable/prog_second" />
  18.  
  19.     </item>
  20.  
  21.  
  22.  
  23.  
  24.  
  25.     <item android:id="@android:id/progress">
  26.  
  27.          <clip android:drawable="@drawable/prog" />
  28.  
  29.     </item>
  30.  
  31.  
  32.  
  33.  
  34.  
  35. </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
longhairedsi
Once Poster
Once Poster
 
Posts: 1
Joined: Sun Aug 02, 2009 12:20 am

Postby 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.
MassOrbit
Freshman
Freshman
 
Posts: 2
Joined: Sat Jul 18, 2009 11:26 pm

Top

Postby 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.
burakkilic
Developer
Developer
 
Posts: 37
Joined: Thu Oct 01, 2009 10:24 am

Postby 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?
ameya721
Once Poster
Once Poster
 
Posts: 1
Joined: Thu Dec 17, 2009 6:44 am
Location: pune

Re: Seekbar (progressbar) customizing

Postby nioupy » Sat Jun 12, 2010 4:48 pm

Old post but worth the thanks : thanks daanvk, you made my day :)
nioupy
Developer
Developer
 
Posts: 36
Joined: Sat Apr 03, 2010 1:34 pm

Re: Seekbar (progressbar) customizing

Postby 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
Hareen
Once Poster
Once Poster
 
Posts: 1
Joined: Thu Jan 27, 2011 1:00 pm

Re: Seekbar (progressbar) customizing

Postby nioupy » Fri Jan 28, 2011 6:27 am

I guess a .setValue(0) will do ;)
nioupy
Developer
Developer
 
Posts: 36
Joined: Sat Apr 03, 2010 1:34 pm

Re: Seekbar (progressbar) customizing

Postby 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.
Attachments
seek_bar.jpg
seek_bar.jpg (2.74 KiB) Viewed 28323 times
Zeba Momin
Developer
Developer
 
Posts: 49
Joined: Thu Sep 17, 2009 6:53 am

Re: Seekbar (progressbar) customizing

Postby 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
  1. public BitmapDrawable writeOnDrawable(int drawableId, String text){
  2.  
  3.     Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
  4.  
  5.     Paint paint = new Paint();
  6.     paint.setStyle(Style.FILL);  
  7.     paint.setColor(Color.BLACK);
  8.     paint.setTextSize(20);
  9.  
  10.     Canvas canvas = new Canvas(bm);
  11.     canvas.drawText(text, 0, bm.getHeight()/2, paint);
  12.  
  13.     return new BitmapDrawable(bm);
  14. }
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
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <layer-list
  3.  xmlns:android="http://schemas.android.com/apk/res/android">
  4.    <item
  5.     android:id="@android:id/background">
  6.       <shape>
  7.          <corners
  8.           android:radius="2dip" />
  9.          <solid android:color="#EF333333"/>
  10.       </shape>
  11.    </item>
  12.    <item
  13.     android:id="@android:id/secondaryProgress">
  14.       <clip>
  15.          <shape>
  16.             <corners
  17.              android:radius="2dip" />
  18.             <gradient
  19.              android:startColor="#33ffaa11"
  20.              android:endColor="#33ffdd33"
  21.              android:angle="90" />
  22.          </shape>
  23.       </clip>
  24.    </item>
  25.    <item
  26.     android:id="@android:id/progress">
  27.       <clip>
  28.          <shape>
  29.             <corners
  30.              android:radius="2dip" />
  31.             <gradient
  32.              android:startColor="#ff08384e"
  33.              android:endColor="#ff1172A4"
  34.              android:angle="90" />
  35.          </shape>
  36.       </clip>
  37.    </item>
  38. </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
  1. <SeekBar
  2.            android:id="@+id/seekBar1"
  3.            android:padding="10dp"
  4.            android:thumb="@drawable/line"
  5.            android:layout_width="0dp"
  6.            android:layout_height="wrap_content"
  7.            android:layout_weight="2"
  8.            android:minHeight="50dp"
  9.            android:maxHeight="50dp"
  10.            android:progressDrawable="@drawable/horizbar" />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


Thank you for your help!
flaviocapaccio
Freshman
Freshman
 
Posts: 2
Joined: Mon Dec 12, 2011 4:37 pm

Re: Seekbar (progressbar) customizing

Postby wakawaka » Mon Feb 04, 2013 6:16 am

Thanks for sharing. Nice piece of work.
Android Development Tutorials and Code Snippets: http://forum.gssdaily.com/
wakawaka
Experienced Developer
Experienced Developer
 
Posts: 79
Joined: Tue Jan 11, 2011 1:51 pm

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 3 guests