How To Create Appbarlayout Which Overlaps Content Of Coordinatorlayout

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 t

Solution 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

@OverridepublicbooleanonDependentViewChanged(CoordinatorLayout parent, View child,
        View dependency) {
    updateOffset(parent, child, dependency);
    returnfalse;
}

privatebooleanupdateOffset(CoordinatorLayout parent, View child,
        View dependency) {
    final CoordinatorLayout.Behaviorbehavior= ((CoordinatorLayout.LayoutParams) dependency
            .getLayoutParams()).getBehavior();
    if (behavior instanceof Behavior) {
        // Offset the child so that it is below the app-bar (with any// overlap)finalintoffset=0;   // CHANGED TO 0
        setTopAndBottomOffset(offset);
        returntrue;
    }
    returnfalse;
}

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

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

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

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

Layout with AppBar with semi transparent background

<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid: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.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_scrollFlags="scroll|enterAlways" /></android.support.design.widget.AppBarLayout><FrameLayoutandroid:id="@+id/frgmentcontainer"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/appbar"></FrameLayout></RelativeLayout><android.support.design.widget.FloatingActionButtonandroid: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.CoordinatorLayoutxmlns: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.AppBarLayoutandroid: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.CollapsingToolbarLayoutandroid: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.Toolbarandroid: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><includelayout="@layout/content_scrolling" /><android.support.design.widget.FloatingActionButtonandroid: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.NestedScrollViewxmlns: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"><FrameLayoutandroid: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.

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

ScrollingActivity

publicclassScrollingActivityextendsAppCompatActivity {

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        Toolbartoolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButtonfab= (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(newView.OnClickListener() {
            @OverridepublicvoidonClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        getSupportFragmentManager().beginTransaction().
                replace(R.id.framcontainer, newHomeFragment(), "Home").commit();
    }

}

Home2

publicclassHome2extendsFragment {
    @Nullable@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        returninflater.inflate(R.layout.home_2, container, false);
    }
}

HomeFragment

publicclassHomeFragmentextendsFragment {
    @Nullable@OverridepublicViewonCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.homefragment, container, false);
    }

    @OverridepublicvoidonViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        view.findViewById(R.id.txt).setOnClickListener(newView.OnClickListener() {
            @OverridepublicvoidonClick(View v) {
                getActivity().getSupportFragmentManager().beginTransaction()
                        .replace(R.id.framcontainer, newHome2(), "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