Custom Seekbar with on top value

Question

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

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

Etherize

Check this github.com/warkiz/IndicatorSeekBar – Urbannai

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. – Etherize

check here – Noelyn

Answer 1

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>

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:

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>

Armipotent

I'm using the material library version 1.3.0-alpha01 but instead of this bubble, I'm seeing a tooltip on top. How to show this exact bubble? – Kinata

@FahadSaleem The tooltip was changed in the library. You can in any case change the shape with the labelStyle attribute. Check the updated answer. – Armipotent

what a comprehensive answer! better than the docs! Congrats. – Dachi

@GabrieleMariotti is there any way to always show the tooltip even if the slider is not in focus? – Teishateixeira

@ParagPawar Not yet. github.com/material-components/material-components-android/… – Armipotent