Unwanted padding in Android SeekBar

Question

I am having trouble with Android seekbar there seems to be a default padding for the seekbar view and I cant seem to remove it, I tried setting padding to "0dp" and tried setting margin to "-10dp" to see if it removes some of the space and tried setting background to null incase there is a background taking space but nothing seems to happen, the SeekBar tag is :

<SeekBar
    android:paddingLeft="0px"
    android:paddingRight="0px"
    android:background="@null"
    android:id="@+id/musicSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

EDIT : Ok so after some testing and trying out a few stuff I have learned this :

1. The padding is due to the thumb drawable size
2. Setting android:thumb="@null" will remove bottom and top padding
3. The right and left padding stays even if I remove the thumb but can be removed by setting a negative margin on both sides equal to the default thumb drawable width divided by 2 so if its 32dp that would be 16dp on each side

Now I need to know if there is a cleaner way of removing the padding and is the thumb size the same on all devices ? Any help is welcome.

Answer 1

For removing the padding from Seekbar you have to do it at runtime :

findViewById(R.id.seekBar).setPadding(0,0,0,0);

======================= OR ======================

Bitmap thumbImage = BitmapFactory.decodeResource(getResources(), R.drawable.thumb);
int paddingDp = (int)(0.5f * (thumbImage.getWidth()));
findViewById(R.id.seekBar).setPadding(paddingDp,0,paddingDp,0);

You not need to set the android:thumb="@null"

Answer 2

I realize this is 3 years late, but for anyone like myself still not able to find this solution, here it is. The problem is that the thumb drawable adds top/bottom padding (try setting the thumb drawable to @null and watch the padding disappear). The solution is to offset everything by half the size of the thumb drawable. To ensure that layouts remain consistent across devices, we'll create a custom thumb drawable so that we control the size.

Step 1: Create a custom thumb drawable.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <size android:height="10dp" android:width="10dp" />
            <solid android:color="@color/mediaThumbColor" />
        </shape>
    </item>
</layer-list>

Step 2: Set up the SeekBar.

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:thumb="@drawable/media_seekbar_thumb"
    android:paddingStart="0dp"
    android:paddingEnd="0dp"
    android:splitTrack="false"
    android:thumbOffset="5dp"
    android:elevation="4dp"
    />

• Set the thumb drawable to the one we just created.
• Set splitTrack=false to fix a problem where the custom thumb drawable gets padded away from the bar with empty space.
• Set the start/end padding to 0 to ensure it is the full parent width (SeekBar has 16dp padding by default).
• Set the thumb offset to half of whatever size you made the custom thumb drawable (in our case this was 10dp, so the thumb offset is 5dp).
• Give the seekbar some elevation to ensure that it displays above background content (explanation below).

Step 3: Set up the mediabar layout.

Here's the key to lining everything up correctly. The media bar will consist of a top-level parent layout which contains (1) the SeekBar, and (2) an inner-parent which contains everything else (play/pause, back/forward, track times, etc). The top level parent needs to have a transparent background and have height wrap_content. The inner-parent needs to have whatever background color you want your media bar to be, and a height of whatever height you want your media bar to be.

Set the inner-parent to be top-aligned with the top-level parent, with a top margin of half the height of the custom thumb drawable, in our case 5dp. This offsets everything in the media bar such that the SeekBar appears to sit right on top of it.

Here's an example using ConstraintLayout.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/media_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    >

    <SeekBar
        android:id="@+id/media_bar_seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:thumb="@drawable/media_seekbar_thumb"
        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        android:splitTrack="false"
        android:thumbOffset="5dp"
        android:elevation="4dp"
        />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/media_bar_content"
        android:layout_width="match_parent"
        android:layout_height="@dimen/media_bar_height"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="5dp"
        android:background="@color/mediaBarColor"
        >

        <!-- All mediabar content goes here -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>