How to create AppBarLayout which overlaps content of CoordinatorLayout

Question

When using a CoordinatorLayout with AppBarLayout on some activities I need the content to be under the AppBarLayout, i.e. the Toolbar is using some transparent color and overlays the content. By default CoordinatorLayout + AppBarLayout arrange things so that toolbar and scrolling content are next to eachother, without any overlapping.

Android developer guides have the documentation on this here and it looks like this (but those flags do not seem to work with Toolbar and appcompat - I tried):

So I need something that looks like on image above, but with all the scrolling goodies provided by CoordinatorLayout + AppBarLayout. And there's no need to use CollapsingToolbarLayout - just this simple one.

Any hints on how to achieve this? Here's my activity layout.

<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>

Sobersided

inthecheesefactory.com/blog/… – Trappings

@JudeFernandes this describes a setup with CollapsingToolbarLayout which is backed up by a certain image. I described another situation - I need the activity content to be under transparent toolbar. And I do not need CollapsingToolbarLayout as I mentioned above. – Sobersided

Does your AppBar still need to hide/show when scrolling for content or can it remain static? Is it only the Activity background that needs to be below the Toolbar, or also the activity content? – Unlade

Answer 1

I tried this solution, it works.

transparency : added background to AppBarLayout, and placed scrolling view 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 positioning : extended AppBarLayout.ScrollingViewBehavior by new AppbBarTransparentScrollingViewBehavior overriding onDependentViewChanged() and modifying 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's behavior : set behavior on scrolling view

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

result : with an ImageView inside a NestedScrollView as scrolling view

Marsala

the only answer on the whole stackoverflow and more that works as of crappy 'com.android.support:appcompat-v7:23.1.1'. GG man, thanks a million! – Granivorous

Great answer. Don't forget to add a constructor with the context and the attributeSet params (simly call super() in it) when defining your custom behavior otherwise you'll get some problems when inflating the layout. – Pepito

Answer 2

If you remove the line

app:layout_behavior="@string/appbar_scrolling_view_behavior"

from the FrameLayout, the content will be overlapped by the Toolbar. Hope that helps.

EDIT: Oh you mention that you need the scrolling goodies, so this isn't really a solution.

Potts

Answer 3

Here i tried to give Main Background image to windowBackground and ToolBar/ActionBar Background as a Transparent. Below Style i have specified in manifest. Window background changes can be done as per required. Style in 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>

Layout with AppBar with semi transparent 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

As per our discussion on comment CollapsingToolbarLayout with 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"
    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>

Style Given to 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>

ScrollingActivity

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. Avoided Ambeding images i've given url

Before updated Ans https://i.sstatic.net/5cVOw.jpg
HomeFragment From Updated Ans > https://i.sstatic.net/UF8LW.jpg
Home2 From updated Ans https://i.sstatic.net/cD480.jpg

Blowfish

can we do same thing in fragment without creating new toolbar in fragment layout? – Cincture

@Cincture here i have used fragment & ToolBar normally in activity . so can you please explain more so that i can try ? – Blowfish

thanks for your effort. Do you think it is possible to add collapsible image only in this fragment. (assuming I have more than 1 fragment in app) And all other fragment will have normal activity toolbar without collapsible view. – Cincture

@Cincture yes it is also possible .. actu in question CollapsingToolbarLayout was not there so i didnt take in my xml. It is possible. – Blowfish

@Cincture will try if got time :) – Blowfish

thanks for your effort. I will try this..but for your effort I am awarding 50+ to you. I will update you once I try this. – Cincture

Let us continue this discussion in chat. – Cincture

@Cincture you can try it.. It will work as per your question you asked and also in comment what extra things you asked. Not an issue lttr you can gve bounty if it works... :) – Blowfish

@Cincture have you got the solution from this answer ? – Blowfish

Answer 4

For Anybody who is working on a layout that is using a NavigationDrawer one solution to this is to change that ToolBar/AppBar dynamically when you are rendering that fragment for example. Lets say you are starting from Home.java and want to go to Chats.Java which is a fragment from there and you want to change that toolbar you can do this:

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){

            case R.id.nav_chat:

                toolbar.inflateMenu(R.menu.My_Other_Menu);
                toolbar.setTitle("My New Title");
               
                getSupportActionBar().setDisplayHomeAsUpEnabled(true);
                getSupportActionBar().setDisplayShowHomeEnabled(true);

                getSupportActionBar().setDisplayHomeAsUpEnabled(true);
                getSupportActionBar().setDisplayShowHomeEnabled(true);

                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new PaymentFragment()).commit();
                break;
    }

}

Please not that we have changed the title and also changed the title, menu and also changed the default NavigationIcon to be a back button. However we will also have to change that back button to go back when it is clicked. This solution is pushes the contents of that Chats.java to be below the ToolBar instead of being covered by it.

Cns