Coordinator: Layout + ActionBar + Snippets

Question

I have a problem when I try to place fragments using CoordinatorLayout + AppBarLayout .

I try to load various fragments into my RelativeLayout content, which is below the ActionBar with the app:layout_behavior="@string/appbar_scrolling_view_behavior" attribute app:layout_behavior="@string/appbar_scrolling_view_behavior" , but when I load a fragment with two buttons at the bottom of the screen, they are loaded from the screen.

The content in which the fragments are loaded comes out of the screen, and the content always comes out of the bottom.

This code of my main_activity.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:id="@+id/coordinator" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".views.activities.HomeActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_height="wrap_content" android:layout_width="match_parent" 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" app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar --> </android.support.design.widget.AppBarLayout> <!-- Fragment are loaded here --> <RelativeLayout android:id="@+id/containerLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > </RelativeLayout> </android.support.design.widget.CoordinatorLayout> 

This is a screenshot with off-screen content.

This is a screenshot of a fragment where I have a problem:

This is a screenshot with a fragment loaded into the emulator. You can see how the bottom buttons are not displayed. They are hidden in the navigation bar:

How can I prevent this problem?

EDIT

 <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/coordinator" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".views.activities.HomeActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_height="wrap_content" android:layout_width="match_parent" 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" app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar --> </android.support.design.widget.AppBarLayout> <!-- Main content --> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <FrameLayout android:id="@+id/containerLayout" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> </RelativeLayout> </android.support.design.widget.CoordinatorLayout> 

EDIT 2: I tried putting the ToolBar in a RelativeLayout, but it works partially. Now animation on actionBar does not work when scrolling in recyclerView

 <?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/coordinator" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".views.activities.HomeActivity"> <!-- Main content --> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_height="wrap_content" android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay" android:layout_alignParentTop="true"> <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" app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar --> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/containerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/appBarLayout"> </FrameLayout> </RelativeLayout> </android.support.design.widget.CoordinatorLayout> 

Answer 1

I finally realized that what happens with the CoordinatorLayout is that the view under the AppBarLayout is sized for height, as if the Toolbar had already been scrolled out of the way. Then, when the toolbar is in its normal position, the view simply pushes down. It does not change as CoordinatorLayout scrolls everything.

This means that any views attached to the bottom of this view will scroll sideways and will not be visible or partially visible.

So how do you fix this? You need to do two things:

• Bring AppBarLayout and Toolbar to your fragment. A snippet can set up ActionBar support on the Toolbar and do everything that would normally be done in this activity. So now your activity layout might be as simple as this:

   <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/containerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".views.activities.HomeActivity"/> 

• Attach the buttons to the bottom of the CoordinatorLayout . CoordinatorLayout is a subclass of FrameLayout , so you can have layout_gravity="bottom" in the child view. So, now your XML fragment may look like this:

   <?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/coordinator" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".views.activities.HomeActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_height="wrap_content" android:layout_width="match_parent" 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" app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar --> </android.support.design.widget.AppBarLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <!-- rest of your fragment layout goes here it needs to have a scrolling component --> <!-- you *might* need a spacer in order to see the bottom of your view over the top of the buttons --> <Space android:layout_width="match_parent" android:layout_height="48dp" /> <!-- or you could put a bottom margin on your layout --> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="48dp" android:layout_gravity="bottom"> <!-- your buttons go here --> </LinearLayout> </android.support.design.widget.CoordinatorLayout>