Пользовательский Seekbar с верхним значением

Question

Я пытаюсь сделать Seekbar для моего приложения в качестве значения расстояния. Мне понравилось, что это выглядит примерно так (изображение взято с - ссылка ):

Может кто-нибудь показатьпростой пример того, как сделать что-то подобное?

Я знаю, что могу использовать «уже сделанные» Seekbars от Github, но я пытаюсь понять концепцию, чтобы я мог дальше ее проектировать.

Спасибо

Answer 1

С библиотекой компонентов материалов версии 1.2.0 , предоставленной Google, вы можете использовать компонент Slider.

Просто добавьтев вашем макете:

<LinearLayout
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:clipToPadding="false"
    ...>


    <com.google.android.material.slider.Slider
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:value="74"
        android:valueFrom="0"
        android:valueTo="100"
        .../>

</LinearLayout>

Вы можете настроить цвета, используя следующие атрибуты:

<com.google.android.material.slider.Slider
    app:activeTrackColor="@color/primaryDarkColor"
    app:inactiveTrackColor="@color/primaryLightColor"
    app:thumbColor="@color/primaryDarkColor"
    .../>

или вы можете переопределить цвета по умолчанию, используя пользовательский стиль с атрибутом materialThemeOverlay:

    <com.google.android.material.slider.Slider
        style="@style/Custom_Slider_Style"

с помощью:

  <style name="Custom_Slider_Style" parent="Widget.MaterialComponents.Slider">
    <item name="materialThemeOverlay">@style/slider_overlay</item>
  </style>

  <style name="slider_overlay">
    <item name="colorPrimary">@color/...</item>
    <item name="colorOnPrimary">@color/...</item>
  </style>

или использовать атрибут 1030 * в макете:

<com.google.android.material.slider.Slider
    android:theme="@style/slider_overlay"
    ../>

Пример: