Overlap ViewPager tabs with a RelativeLayout

Question

I have an Activity which contains a ViewPager with two tabs. When the user presses a button, I want an opaque RelativeLayout overlay to appear where the user can then select different options.

The problem is that the overlay does not overlap the ViewPager's tabs and instead stops short.

My XML:

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

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

        <LinearLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:background="@color/light_gray" >

            <TextView
                 ..../>

        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/footer"/>

    </RelativeLayout>

    <Button
        .../>

    <RelativeLayout
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/orange"
        android:visibility="gone"
        android:alpha="0.9">
    </RelativeLayout>

</RelativeLayout>

What it kind of looks like currently:

What I want it to look like:

Answer 1

AFAIK the tabs belong to the ActionBar and you can't overlay just the tabs. But if you use the Support Library v7 you can define your Toolbar (new name for ActionBar) in your layout file. You can also define a TabLayout (container for the tabs) in your xml. To do so you have to use Google's new Design Support Library.

Just import these libraries by adding

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'

to your gradle file. Now you can use

    <android.support.v7.widget.Toolbar />
    <android.support.design.widget.TabLayout />

in your layout file. Be sure to update your theme to something like

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

so that there will be no default ActionBar and inherit from AppCompatActivity instead of Activity , FragmentActivity or something else. To get your Toolbar acting like the ActionBar load the Toolbar by its ID and use setSupportActionBar(toolbar) . To get the ViewPager and TabLayout working together just setup your ViewPager as usually and then invoke setupWithViewPager(viewPager) on the TabLayout object.

Your resulting xml should look like this:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

        <android.support.design.widget.TabLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent" />

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

    </RelativeLayout>

</LinearLayout>