Custom SeekBar for lower versions

Custom SeekBar with the holo theme for lower versions of android

Hello Coders,

                    Today I am sharing the tutorial for custom seek bar (see snapshot) for lower versions(>2.2) with some small steps .

• Firstly copy the below images into your drawable folder:

            save these images and rename it with the following name:

          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

              red_scrubber_track_holo_light.9

• Now make an xml file in drawable folder named: red_scrubber_control.xml and then copy the below code in that layout:

<?xml version="1.0" encoding="utf-8"?>

<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>

• Again make another xml file in drawable folder named: red_scrubber_progress.xml

<?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/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>

• Next step is in the "layout" folder in activity_main.xml, use seek bar like this:

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:background="@android:color/black" >

    <SeekBar

        android:id="@+id/seekBar1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

     android:layout_centerVertical="true"

        android:layout_margin="10dp"

        android:progressDrawable="@drawable/red_scrubber_progress"

    android:thumb="@drawable/red_scrubber_control"

        android:layout_marginBottom="18dp" />

</RelativeLayout>

• Now run the project to see the seek bar with holo theme.