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.

OK, well it's not the issue, but you should usually be using `dp`. You should look into the differences. — weston, Feb 01 '17 at 23:50

score 1 · Accepted Answer · edited May 23 '17 at 10:29

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.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 01 '17 at 23:49

weston

51,132
20
132
192

This explains why the thumb is almost invisible, thank you. But why is the progressDrawable so thick? Is there a similar issue for top, bottom etc? And also, how can I set the size of the thumb? – ram Feb 01 '17 at 23:54
I've added the way I would be doing this. – weston Feb 01 '17 at 23:55
Will this also solve the thickness of progress area? – ram Feb 01 '17 at 23:57
I would put the thickness down to the difference between `pt` and `dp`. Try replacing all with `dp` values. – weston Feb 01 '17 at 23:58
Your shape suggestion made the thumb visible, thanks. But, the `top` and `bottom` properties in the `seekbar_progress.xml` seems to be ignored on API 22, i.e. its height is same as the height of the thumb, and thus it is thick. Do you have a suggestion for that? – ram Feb 02 '17 at 09:57
You can use shapes in an item http://stackoverflow.com/questions/14436641/understanding-androids-layer-list – weston Feb 02 '17 at 11:45
I tried a shape with `` but it did not work. – ram Feb 02 '17 at 12:15
I tried a shape with `` too, it did not work either. – ram Feb 02 '17 at 12:18
Do you know you can click the upvote as well as accept (above the zero)? – weston Feb 02 '17 at 15:02
could you have a look at [this](http://stackoverflow.com/questions/42044781/customizing-seekbar-stye-transparency-and-size-issue)? – ram Feb 04 '17 at 19:43

Layer-List with items having top/bottom properties

1 Answers1

Linked