Seekbar on top of view

问题

I am trying to implement a seekbar on top of a view like in Google Play Music app. I couldn't find answer for this anywhere.I tried negative marginBottom but the thumb was getting cut off. I found a similar post on SO SeekBar at the top of the layout in Android but with no answer so had to post this. Please help. Reference image from Google play music below.

 <FrameLayout
    android:id="@+id/rl_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ViewPager
        android:id="@+id/album_art_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


       <SeekBar
        android:id="@+id/songProgressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="-5dp"
        android:layout_marginLeft="-5dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="-5dp"
        android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_dark"
        android:thumb= "@drawable/seekbar_thumb"
        />

    <!--<View
    <!--    android:layout_width="match_parent"
     <!--   android:layout_height="1dp"
    <!--    android:layout_gravity="bottom"
    <!--    android:background="@android:color/transparent"
     <!--   />   // Commenting this as this is not bottom view in my case

</FrameLayout>

Bottom View :

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

    android:layout_below="@+id/rl_pager">

    <ImageButton
        android:id="@+id/btnPlay"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:layout_marginBottom="10dp"
        android:background="@null"
        android:contentDescription="@string/play"
        android:src="@drawable/play"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />


    <ImageButton
        android:id="@+id/btnNext"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:background="@null"
        android:contentDescription="@string/next"
        android:src="@drawable/ic_skip_white"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:layout_alignTop="@+id/btnPlay"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="60dp"
        android:layout_marginEnd="60dp" />


    <ImageButton
        android:id="@+id/btnPrevious"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:background="@null"
        android:contentDescription="@string/next"
        android:src="@drawable/ic_prev_white"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:layout_alignTop="@+id/btnNext"
         android:layout_marginLeft="60dp"
        android:layout_marginStart="60dp" />


</RelativeLayout>

回答1:

I've quickly knocked up a layout to give you an idea how to do it. I've used a simple View with a background colour at the top and at the bottom of the layout so you can clearly see it works, and the SeekBar overlaps them both. You can then replace the View at the top with your ViewPager and the one at the bottom with whatever you want at the bottom of the screen. Note that the layout_height on the inner FrameLayout is double the negative layout_marginBottom. These values don't matter too much as long as they are big enough to fit your contents and the negative margin is half your layout_height (e.g. you could just as well set layout_height="50dp" and layout_marginBottom="-25dp". on theFrameLayout` and it will still look right, although you don't want them much bigger than necessary as that would create unnecessary overdrawing of the overlapping views).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MyActivity">

    <View
        android:id="@+id/album_art_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottomView"
        android:background="#f00"/>

    <View
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="#00f"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_above="@id/bottomView"
        android:layout_alignBottom="@id/album_art_viewpager"
        android:layout_marginBottom="-20dp">

        <SeekBar
            android:id="@+id/songProgressBar1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            />
    </FrameLayout>

</RelativeLayout>

Here's a screenshot to show you how it looks:

来源：https://stackoverflow.com/questions/31658702/seekbar-on-top-of-view