Seekbar thumb with transparent right and left padding/margin

Question

Summarize the problem:

Hello, I want to create Seekbar like this one in the design:

So the thumb has something like padding/margin at left and right and bars are rounded on both sides.

What I've tried so far:

I've already tried to create thumb picture like this:

Unfortunately, it turned out that I can't use this picture because I need to change this black halo around green point programmatically.

That's why I've built seekbar completely in XML (no pngs images):

Seekbar:

        <SeekBar
            android:id="@+id/player_seekbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            style="@style/SeekBarPlayer"
            local:MvxBind="Max Duration; Progress SliderPosition, Mode=OneWay; SecondaryProgress Downloaded; Visibility(LivePlaybackToVisibility(CurrentTrack))"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/cardView" />

SeekbarBackground:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>
      <corners android:radius="5dp" />
      <solid android:color="#3d4b58" />
    </shape>
  </item>
</layer-list>

SeekbarSecondaryProgress:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
      android:id="@+id/progressshapesecondary" >
    <clip>
      <shape
          android:shape="rectangle" >
        <size android:height="5dp"/>
        <corners
            android:radius="5dp" />
        <solid android:color="#8883e76b"/>
      </shape>
    </clip>
  </item>
</layer-list>

SeekbarProgress:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
      android:id="@+id/progressshape" >
    <clip>
      <shape
          android:shape="rectangle" >
        <size android:height="5dp"/>
        <corners
            android:radius="5dp" />
        <solid android:color="#83e76b"/>
      </shape>
    </clip>
  </item>
</layer-list>

And it provides me a seekbar like this:

Summarazing

How can I achieve the following seekbar design from now on?

Answer 1

Use the below code for masking thumb drawable: masked_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <size android:width="your_thumb_width" android:height="your_thumb_height"/>
        </shape>
    </item>
<!-- These circles are used for cropping. modify according to your requirements. -->
    <item android:width="20dp" android:height="20dp" android:left="-10dp"
        android:gravity="left|center">
        <shape android:shape="oval">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>
    <item android:width="20dp" android:height="20dp" android:right="-10dp"
        android:gravity="right|center">
        <shape android:shape="oval">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>
</layer-list>

In code, get a reference to your drawable from below code:

val doriginal = resources.getDrawable(R.drawable.custom_thumb,resources.newTheme())
val dmask = resources.getDrawable(R.drawable.shape,resources.newTheme())

convert drawable to bitmap:

    val original = drawableToBitmap(doriginal)
    val mask = drawableToBitmap(dmask)

this will set the drawable to seekbar thumb programmatically:

mask?.let {
        val result = Bitmap.createBitmap(mask.width, mask.height, 
        Bitmap.Config.ARGB_8888)
    val mCanvas = Canvas(result)
    val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST_OUT))
    original?.let {
        mCanvas.drawBitmap(original, 0f, 0f, null)
    }
    mCanvas.drawBitmap(mask, 0f, 0f, paint)
    paint.setXfermode(null)
    binding.playerSeekbar.thumb = BitmapDrawable(resources, result)
}

to get bitmap from drawable use following method:

fun drawableToBitmap(drawable: Drawable): Bitmap? {
    if (drawable is BitmapDrawable) {
        return drawable.bitmap
    }
    val bitmap =
        Bitmap.createBitmap(drawable.intrinsicWidth, drawable.intrinsicHeight, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    drawable.setBounds(0, 0, canvas.width, canvas.height)
    drawable.draw(canvas)
    return bitmap
}

Answer 2

The question is 5 years old but in case someone wanting to the same can do it like this :

<!-- THE CODE BELOW IS FOR THE THUMB OF THE SEEKBAR -->

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

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

<!-- THE CODE BELOW IS FOR THE BACKGROUND COLOR TO THUMB -->

    <item android:width="@dimen/_19sdp">
       <shape android:shape="rectangle">
        <solid android:color="#000000" />
       </shape>
    </item>

<!-- THE CODE BELOW IS FOR THE COLOR OF THE THUMB-->

   <item>
       <shape android:shape="oval">
          <size android:height="@dimen/_38sdp" android:width="@dimen/_38sdp"/>
          <solid android:color="#83e76b"  />
       </shape>
   </item>

</layer-list>

Make the colour changes as per your requirement

Answer 3

Use below code for thumb drawable: seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#8883e76b"/>
            <stroke android:color="@color/black" android:width="3dp"/>
            <size android:height="30dp" android:width="30dp"/>
        </shape>
    </item>
</selector>

Use below code for seekbar, just change color what you want:

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="20dp" />
        <solid android:color="@color/fofo_grey" />

    </shape>
</item>

<item android:id="@android:id/progress">

    <clip>
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/signup_green" />
            <stroke
                android:width="6dp"
                android:color="@color/fofo_grey" />
        </shape>
    </clip>
</item>