Navigation Drawer overlaps over ActionBar Navigation Tabs Content

Question

ScreenShot

As it is visible in the above image , when the Navigation Drawers slides open , the content present in the Tab overlaps over it

Code
Fragment2.java -- The Fragment that is shown in the Tab

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment2 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment2, null);
        v.setTag("artist");
        return v;
    }
} 

fragment2.xml -- The XML inflated by the above Fragment

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="There"
        android:layout_marginTop="100dp"
        android:layout_gravity="center_horizontal"
    />

    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ToggleButton" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

MainActivity.java --Containing the ActionBar and the Navigation Drawer (This code is from the Google's ActionBar Guide )

import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.OnQueryTextListener;
import android.support.v7.widget.ShareActionProvider;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.inputmethod.InputMethodManager;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity implements OnQueryTextListener {

    private ActionBar actionBar;
    private ActionBarDrawerToggle mDrawerToggle;
    private ShareActionProvider mShareActionProvider;


    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tab(); // Code related to the Tabs
    }

 void tab(){
       actionBar = getSupportActionBar();
      actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        Tab tabA = actionBar.newTab();
        tabA.setText("Articles");
     tabA.setTabListener(new TabListener(
             this, "artist", Fragment1.class));
        actionBar.addTab(tabA);

        Tab tabB = actionBar.newTab();
        tabB.setText("Videos");
        tabB.setTabListener(new TabListener(
                this, "album", Fragment2.class));
        actionBar.addTab(tabB);



         String[] mPlanetTitles;
         DrawerLayout mDrawerLayout;
          ListView mDrawerList;
     mPlanetTitles = getResources().getStringArray(R.array.action_list);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        // Set the adapter for the list view
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        // Set the list's click listener

        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.abc_ic_ab_back_holo_dark,  /* nav drawer icon to replace 'Up' caret */
                R.string.abc_action_bar_home_description,  /* "open drawer" description */
                R.string.abc_activity_chooser_view_see_all  /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getSupportActionBar().setTitle("Later");
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle("Menu");
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  }
 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //respond to menu item selection

         if (mDrawerToggle.onOptionsItemSelected(item)) {
              return true;
            }

     switch (item.getItemId()) {
    case R.id.show: finish(); 
    return true;
    case R.id.close:  finish();
    return true;

    case R.id.remove: finish();
        return true;
    case R.id.update: finish();
}
     return true;
     }

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);

        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
        searchView.setOnQueryTextListener(this);
        MenuItem shareItem = menu.findItem(R.id.action_share);
        mShareActionProvider = (ShareActionProvider)
                MenuItemCompat.getActionProvider(shareItem);
        mShareActionProvider.setShareIntent(getDefaultIntent());
        return true;
    }

 private Intent getDefaultIntent() {
        Intent intent = new Intent(Intent.ACTION_SEND);
        intent.setType("*/*");
        return intent;
    }
@Override
public boolean onQueryTextChange(String arg0) {
    // TODO Auto-generated method stub
    return false;
}
@Override
public boolean onQueryTextSubmit(String arg0) {
    // TODO Auto-generated method stub
    Toast.makeText(this, "You searched for : " +arg0, Toast.LENGTH_LONG).show();
    InputMethodManager imm = (InputMethodManager) getSystemService(Activity.INPUT_METHOD_SERVICE);
    imm.toggleSoftInput(InputMethodManager.HIDE_IMPLICIT_ONLY, 0);
    return false;
}


public static class TabListener<T extends Fragment> implements ActionBar.TabListener {
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mTag;
    private final Class<T> mClass;

    public TabListener(Activity activity, String tag, Class<T> clz) {
        mActivity = activity;
        mTag = tag;
        mClass = clz;
    }


    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // Check if the fragment is already initialized
        if (mFragment == null) {
            // If not, instantiate and add it to the activity
            mFragment = Fragment.instantiate(mActivity, mClass.getName());
            ft.add(android.R.id.content, mFragment, mTag);
        } else {
            // If it exists, simply attach it in order to show it
            ft.attach(mFragment);
        }
    }

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if (mFragment != null) {
            // Detach the fragment, because another one is being attached
            ft.detach(mFragment);
        }
    }

    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // User selected the already selected tab. Usually do nothing.

    }
} 
} 

activity_main.xml -- The XML containing the DrawerLayout

<android.support.v4.widget.DrawerLayout
    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    android:id=&quot;@+id/drawer_layout&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;>

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
          >
    </ListView>  

 <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"

        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"

        android:background="#111"/>
 </android.support.v4.widget.DrawerLayout>

Is this a problem with my code, have I missed or overlooked something? Any feedback would be of great help

Answer 1

It's little bit workaround, but since ActionBar Tabs was deprecated in 21 API, you can use tabs in layout (like TabHost). In this case drawer would be shown above tabs.

Code:

    TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
    tabHost.setup();

    TabHost.TabSpec tabSpec;
    tabSpec = tabHost.newTabSpec("1");
    tabSpec.setIndicator("Tab");
    tabSpec.setContent(R.id.list_fragment);
    tabHost.addTab(tabSpec);

    tabHost.setOnTabChangedListener(listener);

And add it on layout:

<TabHost
    a:id="@android:id/tabhost"
    a:layout_width="match_parent"
    a:layout_height="match_parent">
    <LinearLayout
        a:layout_width="match_parent"
        a:layout_height="match_parent"
        a:orientation="vertical">
        <TabWidget
            a:id="@android:id/tabs"
            a:layout_width="match_parent"
            a:layout_height="wrap_content">
        </TabWidget>
        <FrameLayout
            a:id="@android:id/tabcontent"
            a:layout_width="match_parent">

            </FrameLayout>
    </LinearLayout>
</TabHost>

Answer 2

I think you would be better off using a library like ViewPagerIndicator. The ActionBar is recognized as decor and is shown over top of the window, and the DrawerLayout is drawn as an object in the window.

Not sure if they're going to fix it in a future revision, but ViewPagerIndicator is pretty easy to set up and customize anyway.