Customize seeekbar endpoints

Question

I want to update seekbar UI such that there will be a vertical lines at both the endpoints of seekbar. I tried this by setting a custom drawable image (horizontal line with vertical lines at endpoints)in android:progressDrawable attribute but with that seekbar is not visible(only thumb is visible). I also tried creating custom views at left and right of seekbar but with that vertical lines doesn't remain at exact position in different device. Also as seekbar has default left and right padding i need to give margins to show vertical lines exactly at seekbar endpoints which can be different for different device.

What is an ideal approach to achive this requirement?

<SeekBar 
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="@dimen/dp1" 
android:paddingLeft="0px" 
android:paddingRight="0px" 
android:progressDrawable="@color/white"/>

<View
android:layout_width="@dimen/dp1"
android:layout_height="@dimen/dp10"
android:layout_alignLeft="@+id/seekBar"
android:layout_alignTop="@+id/seekBar"
android:layout_marginLeft="@dimen/dp16"
android:bawrckground="@color/white"
android:id="@+id/view" />
<View
android:layout_width="@dimen/dp1"
android:layout_height="@dimen/dp10"
android:layout_alignRight="@+id/seekBar"
android:layout_alignTop="@+id/seekBar"
android:layout_marginRight="@dimen/dp16"
android:background="@color/white”/>

Answer 1

I guess you have already answered your question. As you said the difference is only because of left and right padding then you can achieve this by simply changing margins of the views as follows. Suppose this is your XML:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/view1"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/seekBar"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/seekBar"
        android:background="@android:color/black" />

    <View
        android:id="@+id/view2"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/seekBar"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/seekBar"
        android:background="@android:color/black" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:maxHeight="1dp"
        android:progressDrawable="@android:color/black" />
</RelativeLayout>

Then just add following lines to your java file:

SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
((ViewGroup.MarginLayoutParams) findViewById(R.id.view1).getLayoutParams()).leftMargin = seekBar.getPaddingLeft();
((ViewGroup.MarginLayoutParams) findViewById(R.id.view2).getLayoutParams()).rightMargin = seekBar.getPaddingRight();

This is definitely not the best solution but yes it's pretty simple.

Here are few pictures of what it looks like