Am replacing/placing my Fragments in a FrameLayout inside of a DrawerLayout with this code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--drawer items-->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_base"
app:menu="#menu/activity_base_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_base.xml contains a Toolbar and a FAB:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context=".BaseActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/appBar"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
When I run my app, this is the result:
As you can see, the layout for the fragment overlaps the Toolbar.How can I fix this?
I've tried placing both the Toolbar and FrameLayout inside a LinearLayout like this:
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
but then the FrameLayout gets hidden.
Try adding android:layout_marginTop="?attr/actionBarSize" to the FrameLayout you use to put the Fragments in.
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"/>
Worked for me :)
Please do not forget to add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your content layout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I tried all the answers, none worked for me. Because I was hiding the action bar, it was complicated further.
But I finally added android:paddingTop="?attr/actionBarSize" to the FrameLayout and that worked for me. Hope that helps someone.
Use below code
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
layout="#layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
You can also use RelativeLayout instead of LinearLayout with attribute android:weight. It's good for performance
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/app_bar_base"
/>
</RelativeLayout>
Finally I figured out the solution
Suppose you have Two Fragment Class FragmentOne and FragmentTwowhich you are replacing in your main activity and one of them is overlapping the actionbar/toolbar
In your activity_main.xml create a FrameLayout which you will be using to replace as a fragment
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--We will use this framelayout to be replace with fragment so that the above toolbar does not get overlap-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"></FrameLayout>
</LinearLayout>
Now in your MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Set your toolbar in your MainActivity
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FragmentManager fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
if(yourOwnConditionToReplaceFragment()){
FragmentOne fragmentOne=new FragmentOne();
//Notice the id passed in replace function it will make sure that FrameLayout is replaced so fragment will occupy only that portion of screen that is taken by FrameLayout in activity_main.xml
transaction.replace(R.id.fragment_container,fragmentOne);
}else{
FragmentTwo fragmentTwo=new FragmentTwo();
transaction.replace(R.id.fragment_container,fragmentTwo);
}
transaction.commit();
}
FragmentOne And FragmentTwo are classes that are extended Fragment in it. If still there is problem let me know
I replaced CoordinateLayout with LinearLayout in the app_bar layout, it worked for me but still it's not the right way.
This is very straight forward and easy. Just follow what I tried to say below.
You replace any View by using:
**
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
**
//Here, blackFragment is id of FrameLayout View. You replace FrameLayout View with Fragment's Layout. Note: It should be FrameLayout or FrameLayout's derivatives Layout.
My whole code is:
1) SettingsActivity.java
**
public class SettingsActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2);
mToolbar.setTitle("Settings");
//// remove the left margin from the logo
mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab
mToolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(mToolbar);
// Display the fragment as the main content
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
}
}
**
2) activity_fragment.xml
**
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="horizontal">
<!--scroll|snap-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/statusbar"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/blankFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:orientation="horizontal" />
</FrameLayout>
**
You can see my Screen after I replaced FrameLayout's View with Fragment's View
Related
I'm working with an app that has 3 tabs in main activity. The 2nd tab's fragment has a NestedScrollView with header that should be fitted to the system window. The rest of the tab's fragment should be normal with toolbar on them. My attempt to achieve this requirement is setting setFitsSystemWindows(true) if the current tab is 2nd otherwise set it to false. It works on first run (at 1st tab) then go to 2nd tab, but bugs when going back to the 1st tab. Seems setting it to false when going back to 1st tab fits my toolbar to system window. This is the screenshot of the toolbar when going back to 1st tab
below is my MainActivity xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:navigationIcon="#drawable/ic_search"
app:title="Our Menu" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<au.com.appetiser.youfoodz.widgets.bottom_navigation.BottomNavigationLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical"
app:layout_behavior="au.com.appetiser.youfoodz.view.GenericBottomBehavior">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
app:elevation="0dp"/>
</au.com.appetiser.youfoodz.widgets.bottom_navigation.BottomNavigationLayout>
</android.support.design.widget.CoordinatorLayout>
In the code I set the boolean value to setFitsSystemWindows like this when switching Tabs:
#Override
public void onTabTransaction(Fragment currentFragment, int i) {
rootLayout.setFitsSystemWindows(currentFragment instanceof SecondFragment);
}
After weeks of trials and errors I finally solved the issue. It's a dirty workaround but got the thing done. I added a FrameLayout parent at top of my CoordinatorLayout. I set the android:fitsSystemWindows="true" to my CoordinatorLayout and AppBarLayout. And on onTabTransaction I set AppBarLayout's fitsSystemWindows to false instead of rootLayout which my CoordinatorLayout.
xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#android:color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#android:color/transparent"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:navigationIcon="#drawable/ic_search"
app:title="Our Menu"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<au.com.appetiser.youfoodz.widgets.bottom_navigation.BottomNavigationLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical"
app:layout_behavior="au.com.appetiser.youfoodz.view.GenericBottomBehavior">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
app:elevation="0dp"/>
</au.com.appetiser.youfoodz.widgets.bottom_navigation.BottomNavigationLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
java code:
#Override
public void onTabTransaction(Fragment currentFragment, int i) {
appBarLayout.setFitsSystemWindows(currentFragment instanceof SecondFragment);
}
output:
everybody! I have a fragment in FrameLayout container within activity, which has Navigation Drawer. Fragment has TabLayout. And the problem is, as you can see, that
activity's toolbar drops shadow on fragment's TabLayout. I dont want to place TabLayout in activity's AppBar layout because I won't have access to it from fragment and, moreover, I don't need that TabLayout anywhere else.
This is my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/mainNavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
And this is app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/loginToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/mainFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
This is fragment_by_day_schedule.xml
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/byDayTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="?attr/colorPrimary"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="#+id/byDayViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
I also want the Toolbar to hide when I scroll up list in fragment within ViewPager
Do you have any ideas how can I achive that?
Use this. Works on my projects.
ViewCompat.setElevation(mAppBarLayout, 0);
And your second question how to hide your toolbar?
Change your parent layout linearlayout to layout.
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/loginToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/mainFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
After this you have to tell android when toolbar should be hide. You should tell which view can be scroll. You have add this app:layout_behavior="#string/appbar_scrolling_view_behavior" to in your ViewPager.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/byDayTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="?attr/colorPrimary"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="#+id/byDayViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
The AppBarLayout in support library v24.0.0 uses StateListAnimator. Setting appBayLayout.setElevation(0) will have no effect if you use in this new version.
Instead try setting elevation to 0 in the StateListAnimator as follows for Build.VERSION.SDK_INT >= 21:
StateListAnimator stateListAnimator = new StateListAnimator();
stateListAnimator.addState(new int[0], ObjectAnimator.ofFloat(view, "elevation", 0));
appBarLayout.setStateListAnimator(stateListAnimator);
From Support Library v24.0.0 AppBarLayout uses StateListAnimator for set elevation. For get the same behaviour as pre-24.0.0 just set animator as null and call setElevation():
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
appbarLayout.setStateListAnimator(null);
}
ViewCompat.setElevation(appbarLayout, 0);
you need to ensure everything has the same elevation.
Im using MaterialDrawer with a MainDrawerActivity where I replace each fragment inside container FrameLayout based on selected item, but I want to add a FAB (just for this fragment) that interacts with CoordinatorLayout so it can handle cool animations.
MainDrawer layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
android:theme="#style/Toolbar"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
How I replace each fragment:
try {
supportFragmentManager.beginTransaction().replace(R.id.container, FeedFragment()).commit()
} catch (e: IllegalStateException) {
Timber.i(e, "Fragment is still there.")
}
Fragment Layout:
<FrameLayout 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">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/feed_item" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/spacing_medium"
android:layout_marginRight="#dimen/spacing_medium"
android:elevation="#dimen/elevation_little"
app:fabSize="normal"
app:layout_anchor="#+id/container"
app:layout_anchorGravity="bottom|right"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:srcCompat="#drawable/ic_add_white_18dp" />
</FrameLayout>
But as result the FAB button is behind bottom bar:
Im trying setting the coordinator layout attribues (layout_anchor and those) to match the main layout ids but it is not working...
why?
Define the Floating Action Button within the Activity - currently the Fragment's container is considered the parent.
FAB should be a direct child of CoordinatorLayout
I cannot find sensible information on that matter so maybe I am doing it completely wrong?
I am trying to use a Navigation Drawer with a FrameLayout to display fragments.
However, when clicking one of the items on the Drawer, I would like to display a TabLayout with 3 fragments
So what architecture do I need to use?
Should the Activity inflating the drawerlayout host the ViewPager and the FrameLayout?
So clicking on Settings on the drawer for example the FrameLayoutdisplays a settings fragment but when hitting Events, a fragment with 3 Tabs showing different events appear inside the FrameLayout?
Or should I hide the framelayout somehow then and display the ViewPager inside the Activity?
The main activity xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextAppearance="#style/TabCapsFalse"
android:background="#color/teal"
app:tabTextColor="#color/iron"
app:tabSelectedTextColor="#color/tealfifty"
app:tabIndicatorColor="#color/purple600"
app:tabIndicatorHeight="3dp"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/tealfifty"
app:itemBackground="#drawable/drawer_item"
app:itemTextColor="#color/drawer_item"
app:itemIconTint="#color/drawer_item"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/navigation_view_items" />
You want each section in the Drawer to navigate to a new Fragment. Since the TabLayout is only going to be on one of the screens, it will go in one of the Fragments called by your Activity. For example, remove the TabLayout and ViewPager from activity_main.xml, and put them in a new fragment instead. Add that Fragment to content_frame, and you're all set.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/tealfifty"
app:itemBackground="#drawable/drawer_item"
app:itemTextColor="#color/drawer_item"
app:itemIconTint="#color/drawer_item"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/navigation_view_items" />
I ended up having a MainActivity with a DrawerLayout and FrameLayout to display fragments. One of the fragments is a HostFragment for my 3 TabLayout Fragments that I am to display. The ViewPager is in the HostFragment layout as a single element. The setup of ViewPager and TabLayout is done in the HostFragment as well.
This is my DrawerLayout:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
layout="#layout/appbar_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:fitsSystemWindows="true"
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/tealfifty"
app:itemBackground="#drawable/drawer_item"
app:itemTextColor="#color/drawer_item"
app:itemIconTint="#color/drawer_item"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/navigation_view_items" />
</android.support.v4.widget.DrawerLayout>
appbar_content.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:visibility="visible"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/teal"
app:tabGravity="fill"
app:tabIndicatorColor="#color/purple800"
app:tabIndicatorHeight="4dp"
app:itemIconTint="#color/tabicons"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/tealfifty"
app:tabTextAppearance="#style/TabCapsFalse"
app:tabTextColor="#color/iron" />
</android.support.design.widget.AppBarLayout>
<FrameLayout android:id="#+id/content_main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:showIn="#layout/appbar_content"
xmlns:tools="http://schemas.android.com/tools">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/addico"
app:layout_anchor="#id/content_main_frame"
app:layout_anchorGravity="bottom|end" />
One of my main problems was that I was using just a FrameLayout, or just a NestedScrollView. Now that I put the latter inside the FrameLayout and I gave the FrameLayout a scroll_behaviour, I guess the ScrollView inherits it and everything works like a charm! It took me a very long time to come to the conclusion how to set this up!
I have an activity with a coordinatorlayout with a FrameLayout inside it. Inside the Framelayout is a Viewpager and one of the Fragments in the Viewpager contains a Recyclerview. Is it possible to have that RecyclerView affect the topmost CoordinatorLayout?
Thanks.
main.xml (Activity xml layout)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:ads="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
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.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- This is the container to all other fragments. -->
<!-- The only other ones are in the view pager. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="?attr/colorPrimaryDark"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="visible"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- Side Menu -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
root fragment of activity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent">
<!--<android.support.design.widget.AppBarLayout-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_width="match_parent">-->
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabGravity="fill"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_scrollFlags="scroll|enterAlways"
android:visibility="visible"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="?attr/colorPrimaryDark"
android:visibility="visible"/>
<!--</android.support.design.widget.AppBarLayout>-->
</LinearLayout>
Fragment inside Viewpager
You'll need to create an interface object that can communicate between the fragment in the recycler view and the main activity.
Check this video out on how to create such interface in a slightly different use case but I think it might help because it helped me solve slightly similar problem to yours:
https://www.youtube.com/watch?v=MHHXxWbSaho
Cheers!