Personalizar SeekBar

Utilizar los componentes básicos de Android está muy bien y están para eso, para facilitarnos la vida. Pero a veces esto no basta y queremos darle ese toque particular a nuestra app y además algo muy importante: que se vea igual en todas las versiones de Android. Para esto lo mejor es aprender a personalizar los componentes básicos y así no llevarnos sorpresas cuando vemos nuestra app en otros dispositivos.

Es decir, queremos pasar de esto (Seekbar en Android 2.3.3):

A esto (parecido al Seekbar de Android 4.2.2):

Para ello sobreescribimos los drawables correspondientes a la barra de progreso y al thumb.

En la carpeta drawable/ creamos un archivo progress_drawable.xml y copiamos el siguiente código:

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

    <item android:id="@android:id/background">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >
            <corners android:radius="10dip" />

            <gradient
                android:angle="270"
                android:endColor="#585858"
                android:startColor="#ffffffff" />

            <stroke
                android:width="18dp"
                android:color="#00000000" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle" >
                <corners android:radius="10dip" />

                <solid android:color="#585858" />

                <stroke
                    android:width="18dp"
                    android:color="#00000000" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle" >
                <corners android:radius="10dip" />

                <solid android:color="#6ad6f9" />

                <stroke
                    android:width="18dp"
                    android:color="#00000000" />
            </shape>
        </clip>
    </item>

</layer-list>

Para el thumb, en la carpeta drawable/ creamos el archivo thumb_drawable.xml y copiamos el siguiente código:

< ?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval" >

 <gradient
     android:type="radial"
     android:gradientRadius="7"
     android:endColor="#776ad6f9"
     android:startColor="#6ad6f9"/>

 <size
  android:height="20dp"
  android:width="20dp" />
 
</shape>

Por último, el Seekbar en el layout quedaría así:

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="0"
        android:progressDrawable="@drawable/progress_drawable1"
        android:thumb="@drawable/thumb_drawable" />