androidandroid-actionbaroverlappingnavigation-drawer
Navigation Drawer overlaps over ActionBar Navigation Tabs Content
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="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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
Solution
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>