Perform a custom ProgressBar / Android SeekBar [Tutorial Android ] ^^

In this article, we will do two things at once, we will learn how to modify the SeekBar (comparable to UISlider in iPhone for those who know) that can be useful as a timeline audio / video, and Horizontal ProgressBar ( and only horizontally, there is indeed ProgressBar called "indeterminate" that may have to compare what is called a loader or loading icon), which can be used to observe the progress of a download by instance.
These two are very similar widget and for good reason: they use the same design (not my taste).

Figure 1 - ProsgressBar / SeekBar origins and final results

Figure 2 - ProgressBar type "loader"

Storming the ProgressBar styles (horizontal!)

A ProgressBar default is an image loading type, we can find the image files in the SDK under the "spinner" (example: spinner_black_48.png). For a Horizontal ProgressBar (which we abbreviate by PBH for the rest of our article), simply add a style specific to the ProgressBar we stated in our XML file Activity:

        android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 style="?android:attr/progressBarStyleHorizontal"
 android:progress="50"
 android:max="100"
 android:secondaryProgress="80"/>

It should be noted here several attributes for our PBH:

• Max: Sets the total value of the increase in our bar, I always have a 100 percent concept in our calculations, which simplify.
• Progress: simply indicates the level of progression
• secondProgress: Displays a second level of progression, which may be useful in listening to streaming music for example, or the progress shows the progress of reading and secondProgress shows the download progress.
• Style: the style of our bar, it is called here the attribute style (a style attribute is actually a reference / pointer style) of the PBH native Android.

Back to basics ...

It is here that we intervene, we will extend the style of PBH (as if we extend a Java class) and applying it to our progressBar. Documentation styles on Android is very low, it only shows the available styles without really tell us what they are and how they are constructed, we will have a look in the source document for us.
As specifies the file themes.xml sources:

 name = "progressBarStyleHorizontal" > @ android: style / Widget.ProgressBar.Horizontal </ item >

The style attribute refers to progressBarStyleHorizontal Widget.ProgressBar.Horizontal style, where you will find the specifications in the styles.xml file:

We will not focus here "inderterminateOnly" and "indeterminateDrawable" For PBH does not indicate the evolution of the bar (but you can also change the image if you like  )

To change the style, nothing could be easier!

It will create a file styles.xml in our project, and insert our new style stating that it is an extension of Widget.ProgressBar.Horizontal:

Lack of imagination, I called this new style CustomProgressBarHorizontal. You will notice that I changed the minimum height (minHeight) to be able to have a bar thinner, and I changed the image that is used as progressDrawable (making an xml file, which defines the background images of progress and our secondaryProgress bar).

And then PAF! Eclipse (sorry for those who use another IDE) is not happy and tells us that the drawable custom_progress_bar_horizontal does not exist, which is quite logical, since it has not yet created.

Once again, we'll help sources to understand how the ProgressBar class uses the xml file, it suffices here to search in our SDK files:%% ANDROID_SDK_PATH / platforms / android-n / data / res / drawable / (where n is the version of the API)

Progress_horizontal file is an XML file containing drawable, handy classes to make designs more or less basic (gradient, angle, circle, etc ...) using the XML, I suggest you go for a ride of the drawable documentation to familiarize you.

In this file, it contains a layer-list, which is actually an array of other drawable. These drawables are drawn one above the other in the order in which they are written to the file: so for our PBH, we must therefore draw the background, the progress secondaryProgress and finally:

  xmlns:android="http://schemas.android.com/apk/res/android">
   android:id="@android:id/background">
 
     android:radius="5dip" />
    
  android:startColor="#ff9d9e9d"
  android:centerColor="#ff5a5d5a"
  android:centerY="0.75"
  android:endColor="#ff747674"
  android:angle="270" />
 

android:id="@android:id/secondaryProgress"> android:radius="5dip" /> android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270" /> android:id="@android:id/progress"> android:radius="5dip" /> android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" /> android:id="@android:id/secondaryProgress"> android:radius="5dip" /> android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270" /> android:id="@android:id/progress"> android:radius="5dip" /> android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" />

When we look closer, we see that these drawables are simple rectangles (shapes) with rounded corners and gradient.

To change our PBH, we'll keep it simple here and modify gradients (simplify and change colors), it may seem a bit simple, but it is enough to change our PBH for it to match the theme of your application and it is identical in all terminals.

This gives us the following codes with a blue theme to our PBH:

 xmlns:android="http://schemas.android.com/apk/res/android">
   android:id="@android:id/background">
 
     android:radius="5dip" />
    
  android:startColor="#ffffffff"
  android:centerColor="#ffdddddd"
  android:centerY="0.50"
  android:endColor="#ffffffff"
  android:angle="270" />
 

android:id="@android:id/secondaryProgress"> android:radius="5dip" /> android:startColor="#770e75af" android:endColor="#771997e1" android:angle="90" /> android:id="@android:id/progress"> android:radius="5dip" /> android:startColor="#ff0e75af" android:endColor="#ff1997e1" android:angle="90" /> It will have a white background with a light fade to gray in the center. We leave the rounded corners (border-radius) to 5dip, which we will effect a semicircle on the ends of our PBH if he sets a layout_height to wrap_content (and yes, do not forget we put the minHeight our style 10dip ). By applying our style to PBH, we will have the following report:

Figure 3 - Custom Horizontal ProgressBar

Note: This does not cost you anything to keep the same ID for your drawables (android.R.id.progress for example), they are used in the classroom ProgressBar.java sources, it will save you a few problems .

Customization of the SeekBar

When you look at the visual of a SeekBar, it is nothing other than a small progressBar Horizontal with "coach" plus: at Google, they called thumb (English translation of "thumb").

Everyone is free to appreciate or not the design of this thumb, personally, it is still not my case.

I will of course not me spread here about changing the progress bar, just take the first part of this article, but I will just point out that if you look once more sources, progressDrawable the seekBar uses the same file as the PBH:

We will consider here the items "thumb" and "thumbOffset" (offset thumb).
Customisation of thumb will be the same as that of the PBH, we will extend the SeekBar widget style, changing the of thumb drawable.

Note: It is also possible to change the thumb and thumbOffSet directly in the attributes of a SeekBar in his statement in the layout of our Activity, but I think the cleaner is to do it in the style of extension, more If you have several SeekBar, you will not have the attributes each time, this is the style which you have applied will.

In our new style SeekBar, so we change our thumb:

  name = "android: thumb" > @ drawable / seek_bar_thumb </ item >

And, as in the source file will be an XML file including a another drawable (stateListDrawable) defines several other drawables depending on the state of the widget, states that rely mostly shares the user: focus, pressed, selected, etc ...:

  xmlns:android="http://schemas.android.com/apk/res/android">
     android:state_pressed="true"
          android:drawable="@drawable/custom_thumb_state_pressed" />
     android:state_focused="true"
          android:drawable="@drawable/custom_thumb_state_selected" />
     android:state_selected="true"
          android:drawable="@drawable/custom_thumb_state_selected" />
     android:drawable="@drawable/custom_thumb_state_default" />
 

 

These four items whose names speak for themselves, in our case other XML files, including forms (shape), as has been the experience in the first part of this article (see documentation drawable ) .

Here is an example which describes the "normal" (default) our thumb (the other two are almost identical, just the colors defined are changed):

 xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 
  android:width="35dip"
  android:height="35dip" />
 
  android:width="1dip"
  android:color="#ffffffff" />
 
  android:startColor="#ffcdcdcd"
  android:endColor="#fff8f8f8"
  android:angle="270"
  android:type="linear" />

A single disk of radius 35dip with a border and a gradient:

Figure 5 - SeekBar thumb with default

Figure 4 - seekBar state focused

Figure 7 - seekBar pressed state

Figure 6 - seekbar normal

When you slide the switch at the bottom right, we see that the image is cut, something that happen on the left side, and this is where the thumbOffSet .

What ThumbOffSet choose?

The style of the SeekBar android, we have seen earlier in this article, defines a default thumbOffSet 8DIP why 8DIP? There has to look at the image files used for the thumb base!

To do this, on your computer, look closer

%% ANDROID_SDK_PATH / platforms/android-7/data/res/drawable-mdpi/seek_thumb_normal.jpg

(For a terminal with an average density, a dip is equal to one pixel, that is why I have chosen the folder drawable-MDPI more information on density screen here ).

We see that the image has a width of 32 pixels, and it has two vacuum zones 8 pixels on each side of thumb that is designed, which accounts for 8 thumbOffset in default style of seekBar.

Note : nothing prevents you from actually creating your thumb with image files, including using Photoshop or Gimp, I have chosen here to create using android drawable and their xml.

As our thumb are drawable in xml, they will not empty margins, so we will put our thumbOffset 0dip to our style:

And inserted in the layout of our Activity:

 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:progress="50"
 android:max="100"
 style="@style/CustomSeekBar"
 android:secondaryProgress="80"
 android:layout_margin="5dip" />

There has to admire the final result of our article! 

You can find the sources of the project here .

I wanted to thank Alex (Sakaroz said) who wrote this tutorial very interesting Android. I invite you to go for a ride on his blog: http://blog.sakaroz.com/ and pro website: http://www.sakaroz.com/