Develop Reference

Hide android toolbar on scroll of CoordinatorLayout but keep TabLayout fixed

I have the following layout file
activity_main.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbar_icon_image_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:paddingBottom="7dp"
android:paddingLeft="5dp"
android:paddingTop="7dp"
android:scaleType="centerInside"
android:src="#drawable/toolbar_icon"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/main_grid_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/content_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/sliding_tabs"/>
<com.ili.view.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="275dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice"
android:descendantFocusability="beforeDescendants"/>
</android.support.v4.widget.DrawerLayout
</android.support.design.widget.CoordinatorLayout>
Expected behavior:
I would like the latter to show when I open the app, and the toolbar to hide upon scrolling.
But with my activity_main.xml I am getting the following behavior:
And after scrolling down, the toolbar hides(as expected) and the SlidingTabLayout shows.
But I would like my tab layout to remain fixed below the view pager.
Now I know that this may be because I'm setting the behavior of the whole drawer layout to app:layout_behavior="#string/appbar_scrolling_view_behavior", so I tried to separate the SlidingTabLayout and put it outside the drawer layout and it worked as expected, except that the SlidingTabLayout stayed over the last row of the list in my ViewPager, since in CoordinatorLayout I cannot tell DrawerLayout to remain on top of my SlidingTabLayout.
So anyone knows how I can make the toolbar hide upon scrolling but with my SlidingTabLayout to remain fixed and not hide the last row of the list?

Where do I put my own xml code in activity_main using Androids default tab application

This is the activity_main.xml layout for Androids default tab application:
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|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.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!-- When I add my own view here and use match_parent, it fills ENTIRE screen, even over the Toolbar. The ViewPager right above does not do this. Why? -->
</android.support.design.widget.CoordinatorLayout>
I am trying to add my own buttons/textviews/etc to my activity_main.xml but I do not know where to add them. The android.support.v4.view.ViewPager uses match_parent although it does not fit the whole screen, it expands across the entire screen besides the Toolbar area at the top. However, whenever I add my own view underneath the android.support.v4.view.ViewPager, lets say RelativeView and set it to match_parent, it expands OVER the Toolbar. This led me to believe that I should put my contents inside the ViewPager tags but that does not work either.
Where should I put my views so that they are not overlapping the Toolbar?

You can wrap your ViewPager in an RelativeLayout and you can add the view child also.
Here is the code snippet which may help you-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button"
android:background="#color/colorNeutral"
android:layout_above="#+id/button2" />
<Button
android:layout_marginBottom="56dp"
android:layout_alignParentBottom="true"
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable too" />
</RelativeLayout>

Fragment's layout being covered up by activity's toolbar/tablayout

I have a single activity app with a nav drawer to navigate between a few fragments. The activity also has a toolbar and a tab layout, and I have it so that the tabs stay hidden through visibility-gone until the fragment with a view pager is switched to. The problem is that the contents of the tabbed fragment are hidden underneath the toolbar and the tab display. Any ideas?
Main Activity Layout:
<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/main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:visibility="visible">
<include
android:id="#+id/my_toolbar"
layout="#layout/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="true"
app:layout_scrollFlags="enterAlways">
</include>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/colorPrimary"
android:id="#+id/TabsDisplay"
app:tabMode="scrollable"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="gone"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"/>
</FrameLayout>
<!--The drawer stuff is below -->
<android.support.design.widget.NavigationView
android:id="#+id/main_navDrawer"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_drawer_header"
app:itemIconTint="#color/colorAccent"
app:itemTextColor="#color/colorSecondary_text"
app:menu="#menu/menu_nav_drawer"/>
Toolbar Layout: ( I just had this seperate through different attempts at it, and never merged it back in.)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="enterAlways"/>
I have a basic layout as an 'intro page' that just displays a textview right now that is put into the container on startup, that is replaced by the other fragments through the nav drawer. One of them has a viewpager, that enables the tablayout to appear, the tabs display and load with text and fragments properly, but they are being covered up by the toolbar/tab bar. I have tried having the tablayout directly into the fragment, but then it never displayed at all, and am having trouble finding the correct way to do this.
Tabbed/Viewpager Fragment:
<?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="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/tabTestVP"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Use a relative layout and give the following attribute to the FrameLayout:
android:layout_below="#+id/toolbar"
Make sure to add the ID to the toolbar first

U can use a RelativeLayout in place of the first FrameLayout in your hierarchy and align the Fragment container below the AppBarLayout. "android:layout_below="#id/appBarLayout"

Toolbar expanding on clicking EditText view

I have implemented material navigation drawer and toolbar in MainActivity. For implementing the navigation drawer and to ensure it shows up behind the status bar I have used following code for toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:fitsSystemWindows="true"
android:theme="#style/ToolbarTheme">
</android.support.v7.widget.Toolbar>
and included this in activity_main.xml as follows:
<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/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
........
in styles.xml I am using following attribute,
<item name="android:windowTranslucentStatus">true</item>
With this everything is working just fine and I get the following result,
The problem occurs when i click on the edit text view (00.00). The moment that edit text view or any edit text view in the page is clicked, the toolbar just expands. See image below:
Now, I was able to rectify the issue by placing android:fitsSystemWindows="true" in activity_main.xml as follows:
<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/navigation_drawer"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
........
My question is, though this solution works but I am not sure as to why do I have to use the same attribute twice in layout file? And what made the toolbar expand? Also, is this the right approach to tackle this issue?
Edit - Removing android:fitsSystemWindows="true" from toolbar.xml and placing it in drawer layout results in the main activity yielding correct results but other activities have a white bar. See image below.

I had the same problem that you and I will tell you what I did for fix it
1) Defining the toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolBarDetalleContacto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:theme="#style/Theme.GpsFriends.Material">
</android.support.v7.widget.Toolbar>
The trick is to use this attribute in your activity xml inside a <android.support.v4.widget.DrawerLayout> parent component and set here the property android:fitsSystemWindows="true" (also in your toolbar.xml). If you dont use DrawerLayout the permanent grey color in your colorPrimaryDark attribute wont be change, will be always grey and just grey.
2) Defining your activity xml:
<android.support.v4.widget.DrawerLayout 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"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="com.wherefriend.activities.agregaramigos.AgregarAmigosActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar_main_gps_friends"
layout="#layout/toolbar_gps_friends"
></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/bBuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="buscarAmigos"
android:text="Buscar" />
<EditText
android:id="#+id/etfragmentCorreo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/bBuscar"
android:ems="10"
android:inputType="textEmailAddress" />
</RelativeLayout>
<ListView
android:id="#+id/listaResultado"
android:divider="#drawable/horizontal_linear_layout_divider"
android:dividerHeight="0dp"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
As you can see, I defined first child activity xml UI as DrawerLayout but just below I use <LinearLayout> to include my whole User interface View compontents. At first my Toolbar and then the rests of the components.
The result is like that, testing in a real Nexus 4 - LG API versión 22:

Fragment content is overlaying Toolbar

I recently started messing around with the new components of AppCompat 21 and implementing Material Design. Currently, I have an ActionBarActivity with a Toolbar and am trying to have it host a fragment containing a RecyclerView of TextView items (just to test out Recycler). I have items being displayed, but the text in each view is cut off and the entire Recycler is covering the Toolbar like so:
As you can see, there are three TextViews. Their text is cut off halfway and it's overlaying the Toolbar (no Title I know). The TextView item layouts are contained within a RecyclerView layout, which is the layout of the Fragment. The parent Activity has a FrameLayout -> Toolbar, FrameLayout. I am inserting the Fragment into the Activity's sub FrameLayout. Here's the XML:
Each view in the Recycler:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textview"
android:layout_width="match_parent"
android:layout_height="48dp"
android:fontFamily="sans-serif"
android:paddingTop="16dp"
android:paddingBottom="20dp"
android:textSize="16sp"/>
The Recycler layout, which is the layout of the Fragment:
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/recycler_tasks"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stuff.MainActivity$TaskFragment">
</android.support.v7.widget.RecyclerView>
And the parent Activity's layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
I know it must be something simple but I've been stumped on it for a while, trying various things to no avail.

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>

Use RelativeLayout instead of FrameLayout as top parent. Then just add dependencies like layout_above for the Toolbar or layout_below for the fragment container.