I am using the new navigation drawer available from the support library. When using the drawer along with tabs, the drawer menu is getting displayed below the tabs as shown below. How can i make sure the drawer menu is shown on the tabs. (It should display the drawer menu as if there are no tabs)
Drawer menu without tabs
Drawer menu with tabs
I got the same issue and the answer I got from Roman Nurik (Android team) is that the Navigation Drawer should not be used with the Action Bar tabs.
The discussion can be found here: https://plus.google.com/u/1/116515063230772720916/posts/8dWEkFcbTFX
Create a separate fragment say TabsFragment and add the fragment inside the fragment container in your main activity.
The tabs can be added inside the tabs fragment with the following code.
private FragmentTabHost mTabHost;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mTabHost = new FragmentTabHost(getActivity());
mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.fragment1);
mTabHost.addTab(mTabHost.newTabSpec("TabA").setIndicator("TabA"),
TabA.class, null);
mTabHost.addTab(mTabHost.newTabSpec("TabB").setIndicator("TabB"),
TabB.class, null);
return mTabHost;
}
Here, TabA and TabB are separate fragments for the tabs. You can implement your functionality of the respective tabs in respective fragments. Reference : http://developer.android.com/reference/android/support/v4/app/FragmentTabHost.html
Here is the solution I am using looks like(works perfectly): I am using frame layout to be able swap fragments and the tabbed layout is the tabs on the base fragment.
activity_main.xml
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
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">
<!--<include-->
<!--android:id="@+id/toolbar"-->
<!--layout="@layout/toolbar"/>-->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
scrol
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</FrameLayout>
<ListView
android:id="@+id/navList"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#ffeeeeee"/>
</android.support.v4.widget.DrawerLayout>
You can hide View responsible for rendering tabs manualy:
public static void setActionBarNavigationVisibility(Activity activity, boolean visible) {
// --- If the Tabs are BELOW ActionBar (narrow screens) ---
int actionViewResId = Resources.getSystem().getIdentifier("action_bar_container", "id", "android"); // @see http://stackoverflow.com/questions/20023483/how-to-get-actionbar-view
View actionBarContainer = activity.findViewById(actionViewResId); // returns instance of com.android.internal.widget.ActionBarContainer (inaccessible)
try {
Field mTabContainerField = actionBarContainer.getClass().getDeclaredField("mTabContainer");
if (mTabContainerField != null) {
mTabContainerField.setAccessible(true);
View mmTabContainer = (View) mTabContainerField.get(actionBarContainer);
if (mmTabContainer != null)
mmTabContainer.setVisibility(visible ? View.VISIBLE : View.GONE); // use GONE, so the mTabContainer below ActionBar does not take space in layout
}
} catch (Exception e) {
// TODO handle exception
}
}
Just call this method from your implementation of ActionBarDrawerToggle like this:
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
if (slideOffset == 0) { // 0 = drawer is closed
setActionBarNavigationVisibility(activity, true); //show Tabs when Drawer is closed
}
}
public void onDrawerStateChanged(int newState) {
super.onDrawerStateChanged(newState);
//hides Tabs right after Drawer starts opening
if (DrawerLayout.STATE_DRAGGING == newState || DrawerLayout.STATE_SETTLING == newState) {
setActionBarNavigationVisibility(activity, false);
}
}
This solution will work just fine, if you are using ActionBar.Tabs on narrow screen (Tabs are shown automatically BELOW ActionBar). But if you want to handle all other navigation scenarios (NavigationMode: List, CustomNavigationView, or Tabs are showing directly in ActionBar), the first method needs to handle all these possibilities:
public static void setActionBarNavigationVisibility(Activity activity, boolean visible) {
try {
/* 1. --- If the navigation items are showing in ActionBar directly. We have 3 options Spinner, Tabs, and CustomNav ---
(When Tabs are showing BELOW ActionBar, is handled at the end) */
int actionViewResId = Resources.getSystem().getIdentifier("action_bar", "id", "android"); // @see http://stackoverflow.com/questions/20023483/how-to-get-actionbar-view
View actionBarView = activity.findViewById(actionViewResId); // returns instance of com.android.internal.widget.ActionBarView (inaccessible)
if (actionBarView != null) {
int visibility = visible ? View.VISIBLE : View.INVISIBLE; // not GONE, so it still takes space in ActionBar layout
// handle tabs navigation
Field mTabScrollViewField = actionBarView.getClass().getDeclaredField("mTabScrollView");
if (mTabScrollViewField != null) {
mTabScrollViewField.setAccessible(true);
View mTabScrollView = (View) mTabScrollViewField.get(actionBarView); // instance of com.android.internal.widget.ScrollingTabContainerView (inaccessible)
if (mTabScrollView != null)
mTabScrollView.setVisibility(visibility);
}
// handle Spinner navigation
Field mSpinnerField = actionBarView.getClass().getDeclaredField("mSpinner"); // resp. mListNavLayout
if (mSpinnerField != null) {
mSpinnerField.setAccessible(true);
View mSpinner = (View) mSpinnerField.get(actionBarView); // instance of android.widget.Spinner
if (mSpinner != null)
mSpinner.setVisibility(visibility);
}
// handle Custom navigation
Field mCustomNavViewField = actionBarView.getClass().getDeclaredField("mCustomNavView"); // resp. mListNavLayout
if (mCustomNavViewField != null) {
mCustomNavViewField.setAccessible(true);
View mCustomNavView = (View) mCustomNavViewField.get(actionBarView);
if (mCustomNavView != null)
mCustomNavView.setVisibility(visibility);
}
}
// 2. --- If the Tabs are BELOW ActionBar (narrow screens) ---
ViewParent actionBarContainer = actionBarView.getParent(); // parent of ActionBarView is com.android.internal.widget.ActionBarContainer (inaccessible)
Field mTabContainerField = actionBarContainer.getClass().getDeclaredField("mTabContainer");
if (mTabContainerField != null) {
mTabContainerField.setAccessible(true);
View mmTabContainer = (View) mTabContainerField.get(actionBarContainer);
if (mmTabContainer != null)
mmTabContainer.setVisibility(visible ? View.VISIBLE : View.GONE); // now use GONE, so the mTabContainer below Actionbar does not take space in layout
}
} catch (Exception ex) {
// TODO Handle exception...
}
}
WordPress Android version have an implementation of the problem you stated.
They developed a mimic version of TabView called "HorizontalTabView". Why they make this is exactly same as what you (also me) need.
WordPress github: https://github.com/WordPress/WordPress
Related source:
Hope this tip helps.
I believe it's too late since question was asked but still. If you are already using navigation drawer and want navigation tabs, include the two files in your project folder:
1) SlidingTabLayout.java http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html
2) SlidingTabStrip.java http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabStrip.html
In the navigation drawer fragment, include the following:
private SlidingTabLayout mSlidingTabLayout;
private SamplePagerAdapter_tasks mPagerAdapter;
private ViewPager mViewPager;
public void onViewCreated(View view, Bundle savedInstanceState) {
// BEGIN_INCLUDE (setup_viewpager)
// Get the ViewPager and set it's PagerAdapter so that it can display items
//fragment manager of a fragment,Return a private FragmentManager for placing and managing Fragments inside of this Fragment.
mPagerAdapter = new SamplePagerAdapter_tasks(getChildFragmentManager(),Titles of Tabs(array of string),Numboftabs (integer));
mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
mViewPager.setAdapter(mPagerAdapter);
// Give the SlidingTabLayout the ViewPager, this must be done AFTER the ViewPager has had
// it's PagerAdapter set.
mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setDistributeEvenly(true); // this helps to all the tabs on screen to take equal spaces (eg. if 3 tabs each would take one-third of the total space on the screen)
mSlidingTabLayout.setViewPager(mViewPager);
// END_INCLUDE (setup_slidingtablayout)
}
Hope it helps!!
In my AppCompatActivity I add this:
DrawerLayout drawerLayoutMenu =(DrawerLayout) findViewById(R.id.drawer_layout_menu);
RelativeLayout mDrawerPane =(RelativeLayout) findViewById(R.id.drawerPane);
And I call this on the toolbar menu icon
if (drawerLayoutMenu.isDrawerOpen(mDrawerPane)) {
drawerLayoutMenu.closeDrawer(mDrawerPane);
} else {
drawerLayoutMenu.openDrawer(mDrawerPane);
}
xml file
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout_menu"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</FrameLayout>
<!--for menu-->
<RelativeLayout
android:id="@+id/drawerPane"
android:layout_width="270dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#fff"
android:layout_gravity="left|start">
<!--you can add a ListView-->
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Actionbar Navigaton Drawer and SwipeTabs cant be used simultaneously. You should implement Navigation Drawer using Actionbar and swipetabs by simple Tabhosts. You can use Tabhost for tabs and use fragments for inside view of each Tab. Fragments should be used via viewpager to provide scrolling/swiping effect. Connect tabs and viewpager with eachother through their methods
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabHost
android:id="@+id/tabHost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TabWidget>
</HorizontalScrollView>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_home"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>
</TabHost>
