I use ImageView inside CollapsingToolbarLayout and need to have control,over ImageView,hide it at the end of collapsing of CollapsingToolbarLayout and do some over ImageView,Please any ideas could help me.
There are such options
app:layout_scrollFlags="scroll|exitUntilCollapsed"
but not any options like "exitEndCollapsed".
I spent nearly two days trying to get exactly this working. I've read a lot of guides and others. now I finally resolved that! Those are steps I did:
First of all you need to move your ImageView in front of your Toolbar (still inside of CollapsingToolbarLayout. Next, you have to add app:contentScrim="?attr/colorPrimary" into tour CollapsingToolbarLayout (It does that nice scrim effect at the end of scrolling.
At the end, you have to add android:background="#android:color/transparent" into your Toolbar.
And that's all... This way it worked for me. Hope it will help you.
Here is part of my activity_main.xml:
<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/sceneRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="168dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingBottom="16dp"
android:paddingStart="16dp"
android:text="AppBar Title"
android:textSize="25dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
In your image view just add ,
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0"
Related
While I am trying to do Collapsing Toolbar Layout I got the error on contentScrim not found.
This 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:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_70"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I have seen all the tutorial on GitHub and other sites. and used but I could not get the solution. Any easy way to the parallax sticky header for the fragment. and right now I am following the code of https://android.jlelse.eu/parallax-scrolling-header-tabs-android-tutorial-2cc6e40aa257 and see the documentation of android developer about the CollapsingToolbarLayout.
I don't know why exactly you would be getting that error, but this might be a good start.
https://stackoverflow.com/a/31180719/7900721
Otherwise I found this really good tutorial on mastering the coordinator layout which has a github repo with a bunch of great examples with the collapsing toolbar layout that helped me when I developed one.
http://saulmm.github.io/mastering-coordinator
Try adding this to your app build.gradle:
dependencies {
...
implementation 'com.google.android.material:material:1.1.0'
...
}
I am having issues with implementing CollapsingToolbarLayout. I have this problem:
Yes, I've got to place the view in the layout, but it collapses below the original toolbar (or ActionBar for that matter) as shown in the image below. I have no idea how to fix this.
Thanks for any help. I am using Android Studio 2.1.1.
Here is my layout file:
<?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"
tools:context=".ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/app_bar_layout"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/featuredImage"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:contentDescription="#string/article_image"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
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>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/article_container" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/ic_share_variant" />
</android.support.design.widget.CoordinatorLayout>
I found out where I went wrong. I had left out the theme statement in the manifest. All I had to do was add the line android:theme="AppTheme.NoActionBar" to my activity in the manifest.
However, this brought up two new issues:
The new ToolBar scrolls out of view (does not stick to the top.)
The back button that should lead me to my previous activity is gone. However, I'll ask this as a separate question if I do not get the solutions from researching.
I would like to achieve something similar to the following in my app, but I want the whole red area (where it says "Guardians Of The Gala..." in the screenshots below) to be a custom view. (Some elements would fade out as the toolbar is collapsed.)
``
`
I've been trying for hours and hours to get it to work, but to no avail.
Obviously, just putting it into <Toolbar> doesn't work, since it doesn't know that it's supposed to animate it:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar>
<include layout="#layout/link_view_title_bar"/>
I've tried doing most of the answers from here and here but nothing actually worked.
How could I do this, preferably using mostly XML and the Android Design Support library. Any help would be appreaciated.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppBarLayout"
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/homeCollapseToolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
//This can be changed to ImageView
<com.daimajia.slider.library.SliderLayout
android:id="#+id/homeSliderLayout"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="350dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/homeToolbar"
android:title=""
android:layout_width="match_parent"
android:layout_height="115dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" >
<ImageView
android:src="#drawable/ic_logo"
android:paddingLeft="10dp"
android:layout_gravity="center|top"
android:layout_width="wrap_content"
android:layout_height="35dp" />
</android.support.v7.widget.Toolbar>
//Instead of the TabLayout, put your Red Layout
<android.support.design.widget.TabLayout
android:id="#+id/homeTabLayout"
android:layout_marginBottom="15dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabGravity="center"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/homeViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I want to implement a collapsing toolbar like google Play Store. I have achieved functionality somewhat but that is only working for portrait Screen. Here is a sample of screenshot of what i was able to do.
Now what i want to do is when i change my device orientation to LandScape mode it should look Exactly Like This.
So what my main question is how to handle these orientation changes. Is there any official android component available that can do this kind of thing or I will have to Z-index my Layouts to achieve this kind of Layout behavior. Please note that I want the layout to be exactly like this with Margins on Both Sides and Z-indexing on top of picture also the scrolling behavior needs to be exactly like Google Play Store.
I am attaching my sample xml that I have written so far.
<?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/app_bar_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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.group3amd.materializeyourapp.widgets.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<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>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:cardElevation="#dimen/spacing_medium"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_large"
android:layout_marginRight="#dimen/spacing_large"
android:layout_marginTop="#dimen/spacing_large"
android:textAppearance="#style/TextAppearance.AppCompat.Headline" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_large"
android:text="#string/lorem_ipsum"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FabStyle"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
In this pretty similar issue: collapsing toolbar layout like google play store, you would find an answer as below:
View inside CollapsingToolbarLayout no need to set
app:layout_scrollFlags. No effect. Base on my code, change
app:layout_scrollFlags in CollapsingToolbarLayout to
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" and
set minHeight for it.
As your toolbar is "pin", so enterAlwaysCollapsed will call it when
you scroll down.
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="#color/mainBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
In the comment to that post, you would find also a hint:
add app:contentScrim="?attr/colorPrimary" to your
collapsingtoolbarlayout. It is no need two toolbars to implement this
effect
EDIT: Here you would find an interview with a guy responsible for Google Play Store, he's talking about how he build design in Play Store App:
[UDACITY] Interview with Kirill Grouchnikov, part 1
[UDACITY] Interview with Kirill Grouchnikov, part 2
Hope it help
I have looked long and hard for a working answer to this problem and it seems either I'm working around a bug in the Design library, or there isn't an answer to what I want to do.
I have a CollapsingToolbar with Parallax Image and a ViewPager below. The ViewPager will only act on horizontal scrolls, while the dark box at the bottom is a TextView which will do vertical scrolls and collapse the Toolbar.
My solution now isn't great for several reasons - Here's a VIDEO to show why.
On API22 (and presumably 21), my TitleBar has a shadow under it, which breaks the continuity with the TabLayout below.
My ViewPager can only page horizontally. It needs to also accept vertical input and collapse the Toolbar.
I have a TextView which pages vertically, collapsing the ToolBar. So it does work, just not as an all-in-one solution with the ViewPager only.
Why the ViewPager can't take care of Horizontal and Vertical scrolling is beyond me. Maybe the functionality doesn't exist in the Design Library yet and there is no workaround. I have tried everything, looked everywhere. This is the best I can do:
<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"
tools:context=".MainActivity"
android:id="#+id/main_content"
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/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/md_white_1000"
android:scaleType="fitCenter"
android:src="#drawable/backdrop"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
style="#style/CustomTabs"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/viewpager_padding_default"/>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/drawer_padding_default"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:padding="#dimen/drawer_padding_default"
android:textColor="#color/textColorPrimary"
android:background="#drawable/myrect" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_action"
android:src="#mipmap/ic_action_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/drawer_padding_default"
android:scaleType="center"
app:borderWidth="0dp"
app:layout_anchor="#id/main_content"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
1)create a separate layout for the viewPager fragments,use NestedScrollView
as a your root,and add app:layout_behavior="#string/appbar_scrolling_view_behavior",to it.
2)add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the viewPager