Layer-List with items having top/bottom properties

Question

I am trying to customize the view of the SeekBar as follows:

<SeekBar
    android:id="@id/seek_bar_player"
    android:layout_width="match_parent"
    android:layout_height="6pt"
    android:paddingLeft="0pt"
    android:paddingRight="0pt"
    android:paddingStart="0pt"
    android:paddingEnd="0pt"
    android:layout_marginBottom="-2pt"
    android:layout_above="@id/player_container"
    android:progressDrawable="@drawable/seekbar_progress"
    android:thumb="@drawable/seekbar_thumb"
    android:padding="0pt"
    />

The content of seekbar_progress.xml is,

<?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:bottom="2pt"
        android:top="2pt">
        <color android:color="@color/seekbarBackground" />
    </item>

    <item
        android:id="@android:id/progress"
        android:bottom="2pt"
        android:top="2pt">
        <clip>
            <color android:color="@color/seekbarProgressBackground" />
        </clip>
    </item>
</layer-list>

and the content of the seekbar_thumb.xml is,

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="2pt"
        android:height="6pt">
        <color android:color="@android:color/holo_red_dark" />
    </item>
</layer-list>

This results in the desired outcome on API 25 virtual device as:

However, its outcome on a Levovo Vibe C with Android 5.1.1 (API Level 22) is weird:

What may be the reason of this? Any suggestion is highly appreciated.

Answer 1

The reason is item android:width and android:height are not available until API23. Keep an eye on Android Studio for hints like this:

Therefore on the older, API22 device, it behaves as though you haven't set them at all.

Here is an alternative for the seekbar_thumb.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@android:color/holo_red_dark"/>
    <size
        android:width="2pt"
        android:height="6pt"/>
</shape>

The thickness differences could be down to the use of pt over dp, see here and the android documentation.

seekbar_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="@color/seekbarBackground"/>
    <!-- secondary progress optional -->
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="#00ffff"
            android:scaleWidth="100%"/>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@color/seekbarProgressBackground"
            android:scaleWidth="100%"/>
    </item>
</layer-list>

Do not specify dimensions at all in that file.

Usage:

<SeekBar
    ...
    android:maxHeight="2pt"
    android:progressDrawable="@drawable/seekbar_progress"
    android:thumb="@drawable/seekbar_thumb"
    />

The maxHeight is restricting the bar's height, but not the thumb.

Again I highly recommend using dp not pt unless you have a good reason.