Align seekbar with labels in Android

Question

I would like to align a row of labels with steps of a SeekBar. I'm doing this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/labelsll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:text="XS"
            android:textColor="@color/primary"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="S"
            android:textColor="@color/primary"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="M"
            android:textColor="@color/primary"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="L"
            android:textColor="@color/primary"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="right"
            android:text="XL"
            android:textColor="@color/primary"/>
    </LinearLayout>

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="4"/>
</LinearLayout>

The left and right padding are needed because the slider dosen't exactly start on right and left

This is the result:

But as you move the stepper a couple of labels ends up disaligned with it. Any way to accomplish this?

Answer 1

Take a look at this library. It has a very comprehensive and flexible solution out of the box:

https://github.com/woxingxiao/BubbleSeekBar