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>
Related
My app has a fragment with tablayout and it shows a shadow with elevation:
<android.support.design.widget.TabLayout
android:id="#+id/my_music_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_bg"
android:elevation="4dp"
app:tabSelectedTextColor="?attr/color_tab_text_selected"
app:tabTextColor="?attr/color_tab_text"
app:tabIndicatorColor="?attr/color_tab_text_selected"
app:tabIndicatorHeight="4dp" />
But when I switch to another fragment that doesn't have a TabLayout, the shadow doesn't appear:
<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/AppTheme.AppBarOverlay"
app:expanded="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:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false" >
<include
layout="#layout/imageview_appbar"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
What am I doing wrong?
I got it to work by adding the following codes to my MainActivity class:
AppBarLayout layout = (AppBarLayout) findViewById(R.id.appbar);
layout.setStateListAnimator(null);
ViewCompat.setElevation(layout, 8);
Appbarlayout doesn't display shadow if it contains a scrollable collapsing toolbar, it is hardcoded to act so, probably because of performance concerns.
Try workarounds such as adding a plain view to bottom of appbar and setting its background to a shadow drawable ( manually coded gray gradient )
i am using collapsing toolbar with toolbar only here my purpose
is to use default parallex feature for toolbar,but the problem i am facing that back arrow and title in expanded form overlapping each other i tried to set expandedtitlegravity to bottom didn't work either
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/SavedCollapsedAppBar"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/SavedExpandedAppBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:fontFamily="sans-serif-medium"
android:theme="#style/SavedToolbarColoredBackArrow"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"
app:titleTextAppearance="#style/SavedCollapsedAppBar"
app:titleTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
It's seems like, the problem is with the Toolbar.
set app:contentInsetStart in Toolbar i.e.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="72dp"
It may solve the problem.
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 use CollapsingToolbarLayout in my app but when it was collapsed, there is a marginLeft and marginRight in toolbar like picture below.
When I set the toolbar background not transparent ,such as red,it look as normal.
So how should I remove the margin？
I want it be this below but background to be transparent
my xml code is
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="center_horizontal"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="center_horizontal"
app:statusBarScrim="#color/transparent"
app:contentScrim="#color/transparent"
app:expandedTitleTextAppearance="#style/CollapsingToolbarLayoutExpandedText"
app:collapsedTitleTextAppearance="#style/CollapsingToolbarLayoutCollapsedText"
app:expandedTitleMarginTop="0dp"
app:expandedTitleMarginBottom="20dp">
<View
android:id="#+id/venueImage"
android:layout_width="match_parent"
android:layout_height="100dp"
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"
android:background="#color/transparent"
android:layout_marginTop="#dimen/status_bar_height"
app:layout_collapseMode="pin"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Adding app:elevation="0dp" to the AppBarLayout widget fixed this for me.
Also in my layout I have AppBarLayout nested inside CoordinatorLayout whereas your's is the reverse.
You can also set android:stateListAnimator null in your AppBarLayout; something like
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"> // This works
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.