How to create an AppBarLayout that overlaps the contents of CoordinatorLayout

Question

When using CoordinatorLayout with AppBarLayout for some actions I need content under AppBarLayout, i.e. the toolbar uses a transparent color and overlay the content. By default, CoordinatorLayout + AppBarLayout arrange things so that the toolbar and scrollable content are next to each other, without any coincidence.

The Android developer guides have documentation on this here , and it looks like this (but these flags don't seem to work with Toolbar and appcompat - I tried):

So I need something similar to the image above, but with all the scrollable goodies provided by CoordinatorLayout + AppBarLayout . And there is no need to use CollapsingToolbarLayout - just this simple one.

Any hints on how to achieve this? Here is my mock activity.

 <android.support.design.widget.CoordinatorLayout android:id="@+id/top_content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:background="@android:color/transparent" android:layout_width="match_parent" android:layout_height="wrap_content" > <include layout="@layout/main_toolbar"/> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <!-- to be filled by content fragment --> </FrameLayout> <android.support.design.widget.FloatingActionButton style="@style/FabStyle" android:id="@+id/fab_button" android:src="@drawable/bt_filters" /> </android.support.design.widget.CoordinatorLayout> 

Answer 1

I tried this solution, it works.

transparency : added background to AppBarLayout and placed scroll in layout before AppBarLayout

 <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#00000000" > 

content placement : advanced AppBarLayout.ScrollingViewBehavior with the new AppbBarTransparentScrollingViewBehavior overrides onDependentViewChanged() and changes updateOffset() to offset = 0

 @Override public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) { updateOffset(parent, child, dependency); return false; } private boolean updateOffset(CoordinatorLayout parent, View child, View dependency) { final CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) dependency .getLayoutParams()).getBehavior(); if (behavior instanceof Behavior) { // Offset the child so that it is below the app-bar (with any // overlap) final int offset = 0; // CHANGED TO 0 setTopAndBottomOffset(offset); return true; } return false; } 

New Content Behavior : Set Scrolling Behavior

 <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" layout_behavior="AppbBarTransparentScrollingViewBehavior" /> 

result : using ImageView inside NestedScrollView as scroll

Answer 2

If you delete the line

 app:layout_behavior="@string/appbar_scrolling_view_behavior" 

from FrameLayout , the content will overlap using the Toolbar . Hope this helps.

EDIT: Oh, you say you need scroll goodies, so this is not a solution.

Answer 3

Here I tried to give the main background image windowBackground and ToolBar / ActionBar Background as transparent. Below is the style I specified in the manifest. Background background changes can be made as needed. Style at Menifest

 <style name="AppThemeSliderToolbar" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/t_img</item> <item name="colorPrimary">#ff5b45</item> <item name="colorPrimaryDark">#FF5722</item> </style> 

Appbar layout with translucent background

  <RelativeLayout 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:background="#50000000" > <!--Change Opacity background as per required ..android:background="#50000000"--> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" /> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/frgmentcontainer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/appbar"></FrameLayout> </RelativeLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_marginBottom="20dp" android:layout_marginRight="20dp" android:src="@android:drawable/ic_dialog_email" app:fabSize="normal" /> </android.support.design.widget.CoordinatorLayout> 

UPDATE

According to our discussion of the CollapsingToolbarLayout comment with a snippet.

 <?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=".ScrollingActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:fitsSystemWindows="true" android:layout_height="@dimen/app_bar_height" android:background="#00FFFFFF" android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout> 

content_scrolling.xml

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView 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" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_scrolling" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ScrollingActivity"> <FrameLayout android:id="@+id/framcontainer" android:layout_width="match_parent" android:layout_height="match_parent"></FrameLayout> </android.support.v4.widget.NestedScrollView> 

The style specified for Activity in Manifest.

  <style name="AppThemeSliderToolbar" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/t_img</item> <item name="android:windowContentOverlay">@null</item> <item name="windowActionBarOverlay">true</item> <item name="colorPrimary">@android:color/transparent</item> </style> 

Scrolling activity

 public class ScrollingActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scrolling); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); getSupportFragmentManager().beginTransaction(). replace(R.id.framcontainer, new HomeFragment(), "Home").commit(); } } 

Home2

 public class Home2 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.home_2, container, false); } } 

Homefragment

 public class HomeFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.homefragment, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); view.findViewById(R.id.txt).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { getActivity().getSupportFragmentManager().beginTransaction() .replace(R.id.framcontainer, new Home2(), "Home2").addToBackStack("Home2").commit(); } }); } } 

Screenshot url. Avoid the ambeding images i gave url

Before updating Ans http://i.stack.imgur.com/5cVOw.jpg
HomeFragment from Updated Ans> http://i.stack.imgur.com/UF8LW.jpg
Home2 From the Updated Ans http://i.stack.imgur.com/cD480.jpg