How to create AppBarLayout which overlaps content

问题:

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>

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

回答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.

回答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 http://i.stack.imgur.com/5cVOw.jpg
HomeFragment From Updated Ans > http://i.stack.imgur.com/UF8LW.jpg
Home2 From updated Ans http://i.stack.imgur.com/cD480.jpg