Question

i’d like to use a seekbar to show the current value and adjust the desired value. I managed to change the desired value via thumb (Progress) and the current value with the bar (SecondaryProgress). There is only one little bug/problem:

When SecondaryProgress becomes lower than Progress, the bar shows the same value as Progress, even the value of SecondaryProgress really becomes lower or even 0 (checked that in debugger).

What it should look like:

SecondaryProgress < Progress   <-- doesnt work, shows: 
(====   O    )                               (=======O    )

SecondaryProgress == Progress   <-- works
(=======O    )

SecondaryProgress > Progress   <-- works
(=======O==  )

Is there a setting that enables me to adjust that? Or do I have to customize the seekbar? And if so, where should i start? For me this doesnt look like a thing i can do in Layout…

Thanks for your help

Answer 1

Might be a bit late, but the best solution I found to that problem is to customize the seekBar, and to use a secondary progress drawable that would use only a part of the height of the seekBar.

Let’s say, for instance, that we want to use the bottom of the draw for the secondary progress, and keep 10dip at the top of it for progress. We could use the code below as progress drawable for our seekBar :

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@android:id/background">
    <shape>
       <corners android:radius="5dip" />
       <gradient
        android:startColor="#ffffffff"
        android:centerColor="#ffdddddd"
        android:centerY="0.50"
        android:endColor="#ffffffff"
        android:angle="270" />
    </shape>
  </item>
  <item android:id="@android:id/progress">
    <clip>
       <shape>
        <corners android:radius="5dip" />
        <gradient
             android:startColor="#ff0088eb"
             android:endColor="#ff0068e7"
             android:angle="90" />
       </shape>
    </clip>
  </item>
 <item android:id="@android:id/secondaryProgress">
    <clip>
        <inset
            android:insetTop="10dp">
            <shape>
            <corners android:bottomLeftRadius="5dip"
                android:bottomRightRadius="5dip" />
            <gradient
                 android:startColor="#ff00c8fb"
                 android:endColor="#ff00a8f7"
                 android:angle="90" />
           </shape>
       </inset>
    </clip>
  </item>
</layer-list>

The main tip is to put the secondary progress drawable after progress drawable in the layer list, so that it is drawn above it, and is always visible, and to use an inset so that it doesn’t take the whole SeekBar height.

In your example, you could get a result like this :

SecondaryProgress < Progress
(====—O    )

SecondaryProgress == Progress
(=======O    )

SecondaryProgress > Progress
(=======O–    )