Android - Styling Seek Bar

Android - styling seek bar

I would extract drawables and xml from Android source code and change its color to red.
Here is example how I completed this for mdpi drawables:

Custom red_scrubber_control.xml (add to res/drawable):

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
    <item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
    <item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
    <item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>

Custom: red_scrubber_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/red_scrubber_track_holo_light"/>
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/red_scrubber_secondary_holo"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/red_scrubber_primary_holo"
            android:scaleWidth="100%" />
    </item>

</layer-list>

Then copy required drawables from Android source code, I took from this link

It is good to copy these drawables for each hdpi, mdpi, xhdpi. For example I use only mdpi:

Then using Photoshop change color from blue to red:

red_scrubber_control_disabled_holo.png:

red_scrubber_control_focused_holo.png:

red_scrubber_control_normal_holo.png:

red_scrubber_control_pressed_holo.png:

red_scrubber_primary_holo.9.png:

red_scrubber_secondary_holo.9.png:

red_scrubber_track_holo_light.9.png:

Add SeekBar to layout:

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/red_scrubber_progress"
    android:thumb="@drawable/red_scrubber_control" />

Result:

Custom seekbar (thumb size, color and background)

• First at all, use android:splitTrack="false" for the transparency problem of your thumb.

• For the seekbar.png, you have to use a 9 patch. It would be good for the rounded border and the shadow of your image.

how to change SeekBar color in android? (Programmatically)

To change the color of the Seekbar thumb, create a new style in style.xml

<style name="SeekBarColor"
  parent="Widget.AppCompat.SeekBar"> 
  <item name="colorAccent">@color/your_color</item> 
</style>

Finally in the layout:

<SeekBar
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:theme="@style/SeekBarColor" />

To change the Seekbar progress color, use this in Java Class.

seekBar.getProgressDrawable().setColorFilter("yourcolor", PorterDuff.Mode.MULTIPLY);

Both these will work for API>16.

Edit

To change SeekBar thumb color by Java code.

 seekBar.getProgressDrawable().setColorFilter(getResources().getCo‌​lor(R.color.your_color‌​), PorterDuff.Mode.SRC_ATOP);

Custom layout or design for seekbar

This may help custom seekbar, you can change what you want (thumb, track and progress, and more usefull stuff) but only programmatically. I've contributed to this lib, the only catch is that this seekbar it's a range seekbar, but you can fork this repo and add the feature to enable range or not and remove one of the thumbs.

The quickest way to achieve that is to comment line 498 from RangeSeekBar.java (but you'll only affect the "visibility" the thumb still reacts to drag, you have to code a bit more ^^)

// draw minimum thumb
drawThumb(normalizedToScreen(mNormalizedMinValue), Thumb.MIN.equals(mPressedThumb), canvas);

and then inside your Activity you'll be using the maxValue:

mSeekBar.setOnRangeSeekBarChangeListener(new RangeSeekBar.OnRangeSeekBarChangeListener<Integer>() {
    @Override
    public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {
        ...
        }
    });

Here's an example on how to customize your seekBar:

mSeekBar.setNotifyWhileDragging(true);
mSeekBar.setThumbImage(BitmapFactory.decodeResource(getResources(), R.drawable.seek_thumb_normal));
mSeekBar.setProgressBackgroundColor(0xFF, 0xDD, 0xDD, 0xDD);
mSeekBar.setProgressLineColor(0xFF, 0xE8, 0x4E, 0x44);
mSeekBar.setMaxHeight(Utils.convertDpToPx(getActivity(), 2));

Or you use Android layout configurations:

<SeekBar
          ...
          android:progressDrawable="@drawable/seekbar_default_progress"
          android:thumb="@drawable/seek_thumb"/>

<item android:id="@android:id/progress">
    <clip android:drawable="@color/some_color"/>
</item>

How to customize the look of a SeekBar in Android?

I'm not sure about Seekbars, but Progressbars can be customized by using a custom style (defined in your styles.xml) like so:

<style name="MyCustomProgressStyle">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@drawable/custom_progress_drawable</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    <item name="android:minHeight">10dip</item>
    <item name="android:maxHeight">10dip</item>
</style>

Then you can set up a custom drawable based on the android system's progress_horizontal.xml (it's in the frameworks/base/core/res/drawable folder of an AOSP checkout). Here's an example from an open-source project.

Android: SeekBar with custom drawable

I can not explain why this is an issue when drawing strokes, I think it has something to do with the strokes width, but I did not yet find the source to verify.

Fixing the Overlay

To remove the issue at hand, you can just set an inset on your left side. A value of 1dp or 2dp both work and the seekbar will be drawn properly.

Note: Using this approach there should be no risk that the background could be too short and not visible with low progress values, since the thumb would overlay and hide it in any case.

<?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/seekbar_background"
        android:left="2dp"><!-- or 1dp -->
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress"/>
    </item>
</layer-list>

Custom SeekBar which changes both Progress Color and Background Color while buffering

Add another layer to your layer-list drawable with the id android:id/secondaryProgress

Refer to this answer: https://stackoverflow.com/a/2021119/2951003

---

Related Topics