18

At a high level, I have done several types of progress bar styles, but they are all ugly when I have attempted to make them skinny.

I am looking for a jump start tutorial or layout that will give a bar that looks similar to below image

enter image description here

Any ideas? I will be glad to publish the results when/if I get them working.

Dharmendra
  • 33,296
  • 22
  • 86
  • 129
Du3
  • 1,424
  • 6
  • 18
  • 36
  • Did you try setting progress drawable and thumb? – Ron Aug 14 '11 at 15:03
  • Well, yes. That's what has to be done no matter what. I am more so looking for examples or work or tutorials on how to make a skinny progress bar. – Du3 Aug 14 '11 at 16:33
  • You will find a very good tutorial [here](http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/) – Ron Aug 14 '11 at 17:36
  • Thanks for the suggestion. I have used the tutorial before. I am specifically looking for one that uses a skinny seekbar like the image posted. Thanks again. – Du3 Aug 14 '11 at 17:45
  • I dont see any big difference. Should suffice ur needs. Just a matter of modifying the xml n drawables. – Ron Aug 14 '11 at 18:01
  • Did you make your asset into a 9-patch? The view system will automatically handle resizing. That's how buttons, etc. are done, and we have excellent results 9-patching borders and the like. – escape-llc Oct 19 '11 at 11:10
  • I tried making 9 patch images, but failed miserably. I got it to work with a small thumb, rather than a nice oversized one. I would like to revisit this in the future though. Thanks for the suggestion. – Du3 Oct 21 '11 at 13:39

1 Answers1

33

There is a property android:maxHeight which does exactly what you need. You should set the android:thumb drawable bigger than the maxHeight to achieve the slick seekbar effect.

For example:

  <SeekBar
      android:id="@+id/whiteBalanceSeek"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="3dp"
      android:max="200"
      android:maxHeight="3dp"
      android:paddingLeft="10dp"
      android:paddingRight="10dp"
      android:progress="100"
      android:progressDrawable="@drawable/slider_progress"
      android:thumb="@drawable/thumb_img" />

The slider_progress drawable was taken from here and the thumb_img is a bare PNG with a red circle.

Here is what I got:

Slick sliders

Community
  • 1
  • 1
Sergii Rudchenko
  • 5,170
  • 2
  • 28
  • 24
  • 1
    can you share slider_progress and thumb_img, i think the key is the progressDrawable and thumb – pengwang Nov 15 '11 at 08:52
  • the progressDrawable is nothing special. I have reused the XML from here: http://stackoverflow.com/questions/2020882/how-to-change-progress-bars-progress-color-in-android And the thumb image is a bare red circle PNG – Sergii Rudchenko Nov 20 '11 at 21:21
  • I have a doubt... Isn't `maxHeight` supposed to be the height of the whole `SeekBar` and hence cut off even the thumb in case it exceeds it? Why does it only work for the progressBar? – Veneet Reddy Aug 01 '17 at 13:06
  • @VeneetReddy That is because `maxHeight` belongs to the SeekBar's superclass: ProgressBar, hence meaning the height of the line, excluding the thumb. https://developer.android.com/reference/android/widget/ProgressBar.html#attr_android:maxHeight – Sergii Rudchenko Aug 01 '17 at 13:22