Making A Custom Skinny ProgressBar / Seekbar

Question

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

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

Answer 1

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: