Align Android seekbar with thumb

Question

I'm trying to align the seekbar to the top of a view, but i can't center it with the thumb. Is there some kind of "alignCenter" with the RelativeLayout children.

Here's a sample of my xml code :

<RelativeLayout
    android:id="@+id/rl_fragment_audio_player"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/black_transparent"
    android:padding="5dp"
    android:visibility="gone" >

    <TextView
        android:id="@+id/tv_fragment_audio_begin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/tv_fragment_audio_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textColor="@color/white" />

    <Button
        android:id="@+id/btn_fragment_audio_play"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        android:background="@drawable/btn_play"
        android:visibility="gone" />
</RelativeLayout>

<SeekBar
    android:id="@+id/sb_fragment_audio"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:layout_above="@id/rl_fragment_audio_player" />

For example, Google Play Music does it.

Answer 1

As you said the height of your seekbar might vary, unless you specify it different. Here is how you can make sure it fits all, always.

android:layout_above="@id/rl_fragment_audio_player"

is setting your seekbar bottom above rl_fragment_audio_player top. There is no direct method to specify centerAlignWith but I would remove the space it occupies within it's parent. To know the height of the seekbar you must wait until the global layout has changed. This code should be placed inside your onCreateView

sb = (SeekBar) rootView.findViewById(R.id.sb_fragment_audio);
    sb.getViewTreeObserver().addOnGlobalLayoutListener(
            new ViewTreeObserver.OnGlobalLayoutListener(){

                @Override
                public void onGlobalLayout() {

                    sb.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) sb.getLayoutParams();
                    params.setMargins(0, - sb.getHeight() / 2, 0, - sb.getHeight() / 2);
                    sb.setLayoutParams(params);
                    // I suggest you set the seekbar visible after this so that it won't jump
                }

            });

The last view in the xml will be in the front. Therefore make sure your seekbar is added after the the other views. Like this

<RelativeLayout
    android:id="@+id/rl_fragment_audio_player"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    // your bottom panel

</RelativeLayout>

<View
    android:id="@+id/image_above"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/rl_fragment_audio_player" />

<SeekBar
    android:id="@+id/sb_fragment_audio"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/image_above" />

Answer 2

Have you tried adding a negative margin to the seekbar?

<SeekBar
    android:id="@+id/sb_fragment_audio"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:layout_marginBottom="-15dp"
    android:layout_above="@id/rl_fragment_audio_player" />