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>
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
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.
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
来源：https://stackoverflow.com/questions/32761319/how-to-create-appbarlayout-which-overlaps-content-of-coordinatorlayout