I am trying to create a CollapsingToolbarLayout and below it a listview, when the listview is scrolled the Toolbar should collapse, but its not working when scrolled the Toolbar is not collapsing.
Used this tutorial: http://android-developers.blogspot.in/2015_05_01_archive.html
Note: The FrameLayout contains the listview
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scrollbars="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbara"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
The framelayout code:
<RelativeLayout 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"
tools:context="ranjithnair02.com.supporttest.BlankFragment">
<ListView
android:id="#+id/rcyv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:src="#android:drawable/ic_search_category_default"
app:borderWidth="0dp"
app:elevation="5dp"
app:rippleColor="#color/wallet_highlighted_text_holo_light" />
</RelativeLayout>
You should use RecyclerView instead of ListView
Note:
don't forget to update RecyclerView in Gradle file.
compile 'com.android.support:recyclerview-v7:22.2.0'
I did an example by using RecyclerView instead. The source code could be found here:
https://github.com/jiahaoliuliu/MaterialDesignSample/tree/collapsingToolbars
There are a couple of things that you should take into account and the post does not says.
Use CoordinatorLayout as the main layout
Use a theme without ActionBar and set the toolbar as actionBar instead. You can do it by creating a special theme for the activity like this:
<!-- Indigo without actionbar when toolbar is used -->
<style name="IndigoWithoutActionBar" parent="Indigo">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
And in the AndroidManifest.xml file, do the follow:
<activity
android:name=".CollapsingToolbarActivity"
android:label="#string/app_name"
android:theme="#style/IndigoWithoutActionBar"
>
</activity>
Once this is done, set it on the Java code:
// Actionbar
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Here is a functional xml code that I use.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/simpleRecyclerView"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
If this is not enough for you, you can follow the code of Chris Banes here:
https://github.com/chrisbanes/cheesesquare
For my case : I dint give height to my Toolbar .
It was wrap_content. If thats the case then try to fix the height of the Toolbar using :-
android:layout_height="?attr/actionBarSize"
You need to add two things to the list view and it will work
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
My working XML code is
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/black"
tools:context="com.example.pr20020897.samplapp.DisplayAllDataActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/db"
android:contentDescription="image" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:navigationIcon="#drawable/ic_arrow_back"
app:contentInsetStart="72dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ListView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/listView"
android:nestedScrollingEnabled="true"
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#FF0000"
android:background="#color/black"
android:dividerHeight="1dp">
</ListView>
</android.support.design.widget.CoordinatorLayout>
Hopefully help someone.
The problem is the RelativeLayout. Try replacing the FrameLayout with the ListView and then the FloatingButton. All wrapped in a CoordinatorLayout of course.
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
Related
Following is xml for my Main activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/bottom_nav_view_color"
app:itemIconTint="#color/bottom_nav_view_icon_tint_selector"
app:itemTextColor="#color/bottom_nav_view_text_color"
app:menu="#menu/navigation" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
app:srcCompat="#drawable/ic_assist_icon" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navi_view_layout" />
Following is xml code for Home 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:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="245dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/card_dark_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imgAirportBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="2dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:title="#string/empty"
app:contentInsetStartWithNavigation="0dp"
app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
app:layout_collapseMode="pin"
app:logo="#drawable/toolbar_logo"
app:navigationIcon="?attr/homeAsUpIndicator"
app:theme="#style/TransperantToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Following is xml code for Detail 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:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="245dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/card_dark_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imgStoreBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="2dp"
app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:theme="#style/TransperantToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Now when I am calling Detail Fragement from Home Fragment my toolbar overlaps with status bar. If I call Detail fragment from any other fragment it is looking fine. Also toolbar in Home fragment does not overlap with status bar although xml for Home fragment and Detail fragment is nearly the same.
Picture one shows when detail fragment is opened normally
Picture two when detail fragment is opened from home page
Latest update:
This solution is helping me https://medium.com/google-developers/windows-insets-fragment-transitions-9024b239a436 but there are lots of changes involved any other short way to do it?
The symptoms you mention are very similar to the ones, mentioned in this question. To recap from the answer that I have provided there, the issue is, that window insets are being dispatched the first time fragment is being shown, but they are not being next time you are making a fragment transaction.
You have to manually ask for the window insets to be dispatched in order to receive correct system bar paddings:
private void replaceFragment() {
getSupportFragmentManager().beginTransaction()
.replace(R.id.content, new DetailFragment())
// NOTE, we are performing `commitNow()` instead of ordinary `commit()`,
// Because we want this commit to happen sychronously/immediately
.commitNow();
// Ask the framework to dispatch window insets once more to the root of your view hierarchy
ViewCompat.requestApplyInsets(findViewById(R.id.root));
}
Design XML like this,
<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:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/home_bg"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/gray">
<ImageView
android:id="#+id/imgStoreBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:theme="#style/AppTheme"
app:title="#string/app_name">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_45sdp"
android:gravity="center"
android:singleLine="true"
android:textColor="#color/black"
android:textSize="14dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In your JAVA file,
onCreate :
Window window = getWindow();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
I think you should add this in you detail fragment (just give it a try):
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:title="#string/empty"
app:logo="#drawable/customimage"
and make one image as transparent add it as customimage for detail, this would be probably a trick.
Thank you.
I'm trying to make a collapsible toolbar in android. I want the image to collapse when the user scrolls.
XML:
<?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/lib/com.mridulahuja.kudamm" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.mridulahuja.kudamm.activities.ProductInfoActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin"
android:minHeight="20dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:src="#drawable/splash_background"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:minHeight="100dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
JAVA:
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Title");
It shows me this on android studio:
But when I run it, it just shows me this:
I've even tried to use android.support.v4.widget.NestedScrollView instead of ScrollView but it didn't work either.
Any idea what I'm doing wrong ???
Change the height of NestedScrollView to Wrap_content instead of match_parent, it is occupyig entire screen. Hope that works for you.
Im trying to create an AppBarLayout using the CollapsingToolBar which contains a Toolbar and a TabLayout and im also using the app:behavior_overlapTop attribute on my RelativeLayout which includes a ViewPager. The problem is that when the CollapsingToolBar is expanded my TabLayout disappears behind the ViewPager as the TabLayout is given a layout_gravity = bottom and due to the fact that i have used app:behavior_overlapTop on my RelativeLayout which includes the ViewPager. How can i fix this ? Thanx in advance.
( This is my first question here, sorry if have missed anything, i would have included images for better understanding of the problem but i dont have enough repo )
Here is my XML file
`
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/AppTheme"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/beats"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:minHeight="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/AppTheme"
app:layout_collapseMode="pin"
app:titleMarginBottom="60dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIndicatorColor="#FFFFFF"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="center"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
`
Below is the code I am using to have a collapsing toolbar. It works. But at the same time I am trying to have toolbar elevation which is not working in pre lollipop devices, so I am trying to do that by applying a view with a shadow drawable. It works, but in this case, has an unintended effect as the shadow is visible all the time (see below)
I want the shadow to be visible only when only the toolbar is visible
Any advise?
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/ExpToolbarTitleStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/backdropimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img"/>
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/profPic"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:scaleType="fitCenter"
android:src="#drawable/imgprf"
app:riv_border_color="#color/icons"
app:riv_border_width="2dip"
app:riv_corner_radius="30dip"
app:riv_mutate_background="true"
app:riv_oval="true"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<View
android:id="#+id/toolbar_shadow"
style="#style/ElevationFix"
app:layout_scrollFlags="exitUntilCollapsed"
android:layout_width="match_parent"
android:layout_height="6dp"/>
<android.support.v4.view.ViewPager .........
.........
.........
</android.support.design.widget.CoordinatorLayout>
This is a bug, you can find here is Assigend as Small-Priority to Chris Banes (Android Developer).
https://code.google.com/p/android/issues/detail?id=182083
I suggest you to add the custom shadow view as foreground in your fragment container.
i did same thing in my code like:
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
**android:foreground="#drawable/header_shadow"**>
You can do one more thing put
<item name="header_shadow" type="drawable">#null</item>
attibute in value-21 style.xml and before api 21 add it into your styles.xml like this..
<item name="header_shadow" type="drawable">#drawable/bottom_shadow</item>
I have implemented CollapsibleToolbarLayout as below.
<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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="40dp"
app:expandedTitleMarginStart="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgPoster"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:background="#drawable/place_holder_land" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/detailsGradient" />
<ImageView
android:id="#+id/play"
android:layout_width="wrap_content"
android:visibility="invisible"
app:layout_collapseMode="parallax"
android:layout_gravity="center"
android:src="#drawable/ic_play_movie"
android:layout_height="wrap_content" />
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...LinearLayout omitted...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_file_download"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
I add the image view in a framelayout in the toolbar so that i can have a overlay on the image and a gradient to make the toolbar text visible on some images
But this color line is coming just below the image (see screenshot) on adding the framelayout. If I remove the line
android:fitsSystemWindows="true"
from appbarlayout then the the color line disapperas but toolbar also scrolls away from the view...
Also to show the back button on the toolbar I have added the below code in OnCreate still it does not show
toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.anim_toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.Title = content.Title;
toolbar.SetNavigationIcon(Resource.Drawable.ic_action);
collapsingToolbar = FindViewById<CollapsingToolbarLayout>(Resource.Id.collapsing_toolbar);
collapsingToolbar.SetTitle(content.Title);
Thanks...
OK got it now had to remove
android:fitsSystemWindows="true"
from
<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">
everything good now
Thanks
Consider adding a fixed width to your app bar layout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">