I'm facing a strange behavior when using CollapsingToolbarLayout, Toolbar and an ImageView embedded.
Here is my code :
<android.support.design.widget.AppBarLayout
android:id="#+id/bla"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/md_white_1000"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:id="#+id/fragment_kids_profile_pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And the Glide builder:
Glide.with(getActivity())
.load(file)
.fitCenter()
.into(profilePicture);
Before setting the image via Glide, the Toolbar behavior works exact as it should, in my case "pinned". After setting the image, the Toolbar layout goes missing and the image takes place (after scrolling up).
Some pics to clarify:
Before setting the picture:
Any help would be appreciated !
That happens because CollapsingToolbarLayout extends FrameLayout.
In FrameLayout the last view in the view hierarchy is the one on the top (if you haven't changed it in code), so it's normal that your ImageView covers the Toolbar. To solve this "issue" you have just to change the order:
<android.support.design.widget.AppBarLayout
android:id="#+id/bla"
android:layout_height="256dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/fragment_kids_profile_pic"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:background="#color/md_white_1000"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Before you set the image via Glide the ImageView's background was transparent, this is why you could see the Toolbar.
Related
I'm facing a problem which i tried really hard, but couldn't find a proper solution using view pager.
I have an activity with CollapsingToolbarLayout, TabLayout and ViewPager that loads 3 fragments, as image below:
My problem is with the height of the fragments, the image itself shows what's happening.
What can i do to vertically center the content of the fragments?
Below is my layout file:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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="306dp" android:minHeight="306dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_header_no_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey_300"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
android:src="#drawable/ic_photo_camera"
android:tint="#color/primary_text_color"
app:layout_collapseMode="parallax" />
<ImageView
android:id="#+id/iv_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<ImageView
android:id="#+id/iv_header_overlay"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#drawable/toolbar_gradient"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/background"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#color/primary_text_color"
app:tabSelectedTextColor="#color/primary_text_color"
app:tabTextColor="#color/secondary_text_color" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
PS's:
- I'm using the latest support library, today is 25.1.0
- All fragments height are wrap_content
Thanks in advance
Unfortunately there is no good way to center the content because of the layout behavior attribute you added to the view pager.
Essentially the content is already centered because as you scroll down, the toolbar collapses which moves the fragment into a "centered" position.
You could either put the content at the top of the fragment so it appears centered initially or take some form of programmatic approach that calculates the initial centered position based on the height of the screen.
Moreover, view pagers do not support a height of wrap content out of the box for fragments. This may be another source of the issue you're encountering.
So i have run into a problem which i cant find the solution of.I have made a small clip of the problem.
Video
What i want is that as soon as i scroll the collapsingToolbarLayout the color should start changing to the toolbar color as it happens in facebook app. As you can see it starts after when it cover 3/4 height of the collapsingToolbarLayout.
XML:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="280dp"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="56dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="true">
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:transitionName="image"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="280dp"
android:background="#200000" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
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>
Appreciate any help. thank you.
CollapsingToolbarLayout has an attribute called app:scrimVisibleHeightTrigger
Specifies the amount of visible height in pixels used to define when to trigger a scrim visibility change.
Since your app bar has a height of 280dp, setting app:scrimVisibleHeightTrigger="240dp" should work.
I can't remember if that's from the top or from the bottom, so if that makes it change really late, try app:scrimVisibleHeightTrigger="20dp". Anyhow, you should be able to tweak that value to get the look you want.
I have a layout with Toolbar and TablLayout with some nice collapsing effect seen below with the help of a CollapsingToolbarLayout:
The first picture is OK. This is the behavior I want.
But the collapsed state have the toolbar in wrong place:
As you can see the Toolbar is below its default place regardless I set it's gravity to top.
Here is the full layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
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="215dp"
app:expandedTitleMarginBottom="56dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/big_header"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
style="#style/CustomTabLayout"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
I would like to place the toolbar to its place, next to the "back" button in the non-collapsed state. Please help if you can.
This is a known problem which I too have faced. You need to "hack it" a bit.
If you don't need your title to animate from big to small, just put collapsingToolbar.titleEnabled = false, and use your Toolbar title instead.
If you want your title to animate from big to small in the Collapsing Toolbar, you can hack it like this:
Add an appBarLayout OffsetChanged listener and put in it this code:
if (Math.Abs(e.verticalOffset) >= appBarLayout.totalScrollRange - 35) //Play with the number, and you should probably use dp instead of a hardcoded pixel number.
{
collapsingToolbar.titleEnabled = false;
SupportActionBar.title = "YourTitle";
}
else
{
collapsingToolbar.titleEnabled = true;
SupportActionBar.title = "";
}
It flips between the two titles...
I found a simpler solution without any hacking and in pure xml:
use expandedTitleMarginBottom in CollapsingToolbarLayout to avoid expanded title overlapping TabLayout
set layout_height to TabLayout as constant value
add layout_marginBottom to Toolbar with same value as TabLayout layout_height
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="215dp"
app:expandedTitleMarginBottom="78dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/big_header"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I am trying to get a fading effect on the ImageView when collapsing the AppbarLayout but the image still remains. I have read other solutions but its not working for me. I cant seem to find what is wrong with the code.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayoutProfile"
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="com.bolt.citywatch.ui.fragment.ProfileFragment">
<android.support.design.widget.AppBarLayout
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:layout_width="match_parent"
android:layout_height="220dp"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_image"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center"
android:src="#drawable/ic_email_white"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.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>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
If everything is working fine for you but you just need the image to fade as the AppBarLayout collapses, you can set up an addOnOffsetChangedListener that will detect how much the app bar has closed. So, when the app bar is 100% open, the alpha value of the image will be set to 255 (opaque) assuming that we are using setImageAlpha() of ImageView and transparent (zero) when the app bar is completely closed. (See here).
Here is the code snippet to make this happen. I place it in onCreate() of the activity:
final ImageView profileImage = findViewById(R.id.profile_image);
final AppBarLayout appBarLayout = findViewById(R.id.appBar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
float range = (float) -appBarLayout.getTotalScrollRange();
profileImage.setImageAlpha((int) (255 * (1.0f - (float) verticalOffset / range)));
}
});
Here is an example of the results:
If this is not exactly what you are looking for, you can also consider contentScrim, scrimAnimationDuration and scrimVisibleHeightTrigger of CollapsingToolbarLayout.
For anyone stumbling upon this as I did and isn't satisfied with the accepted answer, as the image is supposed to fade out on its own without tinkering the code, make sure your Toolbar is the last child of your CollapsingToolbarLayout, and not your ImageView... found the answer on here. Fixed it for me.
I can't find your problem exactly. But here is my working code.
Try this:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/ivParallax"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/my_image"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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/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"
app:srcCompat="#android:drawable/ic_dialog_email" />
ImageView (or whatever content) will only fade if you have give a contentScrim property like this:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/toolbarColor"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Whatever you want to fade content goes here. -->
</FrameLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
app:title="Your investments" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
Note that app:contentScrim="#color/toolbarColor" is important.
I'm trying to utilize the CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and a parallax'ed ImageView. It looks like the ripple effect of the toolbar menu items is cropped. The following image displays the ripple effect of the back button in expanded and in partially collapsed mode. In complete collapsed mode the ripple effect is not shown at all. I think this is caused by the parallax'ed ImageView that is positioned there.
Layout:
<?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.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="224dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:weightSum="1.0">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="56dp"
android:layout_weight="1.0"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="48dp"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.4"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:tabGravity="fill"
app:tabMode="fixed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The ImageView displays a 9-patch'ed Image. Is there something wrong with the layout or is it a bug/inability in the design support library to draw the ripple ontop of the ImageView?
I think your solution is here.
You can try to add this line:
<item name="actionBarItemBackground">?attr/selectableItemBackground</item>
in the theme/style of your Toolbar.
If it doesn't work, add this in your Toolbar attributes:
android:background="#android:color/transparent"