2

I'm trying to make some Seekbar for my app as a distance value. I had liked it to looks something like this (image was taken from - link):

enter image description here

Can someone please show a simple example of how to make something like this?

I know that I can use "already made" Seekbars from Github but I'm trying to understand the concept so I can further design it.

Thank you

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Ben
  • 1,737
  • 2
  • 30
  • 61
  • Check this https://github.com/warkiz/IndicatorSeekBar – AskNilesh Oct 18 '19 at 08:18
  • I will be honest and say that all of them contain Apache 2.0 license and im not completely understand If I can use them in an app that will be distributed and selled so im trying to understand by myself. Unless you know to say that Apache 2.0 can be added as it to app without restrictions of selling app. – Ben Oct 18 '19 at 08:30
  • check [here](https://snowdream.github.io/awesome-android/Widget.html#SeekBar) – RonTLV Oct 18 '19 at 08:41

1 Answers1

11

With the Material Components Library version 1.2.0 provided by Google you can use the Slider component.

Just add in your layout:

<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"
        app:labelBehavior="withinBounds"
        android:value="7"
        android:valueFrom="0"
        android:valueTo="10"
        .../>

</LinearLayout>

enter image description here

You can customize the colors using these attrs:

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

or you can override the default colors using a custom style with the materialThemeOverlay attribute:

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

with:

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

or use the android:theme attr in the layout:

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

Example:

enter image description here enter image description here

If you want to customize the tooltip shape you can use the labelStyle attribute:

    <com.google.android.material.slider.Slider
        app:labelStyle="@style/tooltip"

with:

<style name="tooltip" parent="Widget.MaterialComponents.Tooltip">
    <item name="shapeAppearanceOverlay">@style/tooltipShOverylay</item>
    <item name="backgroundTint">@color/....</item>
</style>

<style name="tooltipShOverylay">
    <item name="cornerSize">50%</item>
</style>

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841