Ползунок Seekbar с прозрачным правым и левым отступом / полем

Question

Подведите итог проблемы:

Здравствуйте, я хочу создать Seekbar как этот в дизайне:

ИтакУ большого пальца есть что-то вроде отступа / поля слева и справа, а столбцы закруглены с обеих сторон.

То, что я пробовал до сих пор:

Я уже пытался создать картинку большого пальца, подобную этой:

К сожалению, оказалось, что я не могу использовать эту картинку, потому что мне нужно программно изменить этот черный ореол вокруг зеленой точки.

Вот почему я полностью построил панель поиска в XML (без изображений pngs):

Панель поиска:

        <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>

И это дает мнеподобная строка поиска:

Подводя итог

Как теперь можно получить следующий дизайн панели поиска?

Answer 1

Используйте приведенный ниже код для рисования большим пальцем: 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>

Используйте приведенный ниже код для seekbar, просто измените цвет на ваш:

<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>