android - Overlap ViewPager tabs with a RelativeLayout -

i have activity contains viewpager 2 tabs. when user presses button, want opaque relativelayout overlay appear user can select different options.

the problem overlay not overlap viewpager's tabs , 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 kind of looks currently:

what want like:

afaik tabs belong actionbar , can't overlay tabs. if use support library v7 can define toolbar (new name actionbar) in layout file. can define tablayout (container tabs) in xml. have use google's new design support library.

just import these libraries adding

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

to gradle file. can use

    <android.support.v7.widget.toolbar />     <android.support.design.widget.tablayout /> 

in layout file. sure update theme like

    <style name="appbasetheme" parent="theme.appcompat.light.noactionbar"> 

so there no default actionbar , inherit appcompatactivityinstead of activity, fragmentactivity or else. toolbar acting actionbar load toolbar id , use setsupportactionbar(toolbar). viewpager , tablayout working setup viewpager , invoke setupwithviewpager(viewpager) on tablayout object.

your resulting xml should 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>