Bugged title
Hey, as you can see in this picture, I am trying to use the CollpasingToolbarLayout but the title is not being drawn correctly. In the expanded state I set the title to fade out like this:
val collapsingToolbarLayout = layout.findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar)
collapsingToolbarLayout.setExpandedTitleColor(android.R.color.transparent)
so the expanded state isn't really important. My xml looks 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"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:expanded="false"
>
<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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<CalendarView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="35dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:title="Title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</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">
<include layout="#layout/main_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>>
</android.support.design.widget.CoordinatorLayout>
Whan can I try? I am thinking this is a bug but I wouldn't know. Thanks
android:fitsSystemWindows="true" typically adds the appropriate padding in some cases to make sure that views are not layered under the status bar/nav bar. In your case, I think that is the cause of pushing your text downwards.
You may need to play around with this, but try removing it for your AppBarLayout and its children and perhaps try some different combinations.
It may also help to show us the view boundaries so we can see where the views actually are. This can be done either in the Android Studio preview or via developer options
Related
I have a viewpager with fragments, each fragment should include a Collapsing toolbar + image header.
The layout is fine but i have this strange behaviour of the toolbar, which sometimes ignores the top margin and ends under the system bar. This happens:
on the first Tab
after scrolling to tab 3 or more, to any "first
previus tab"
it only happens on 1 tab at a time (as far i can see)
Also on the first tab the menu is not inflated, despite OnCreateOptionsMenu being run and not throwing any error.
I reviewed the code several times and made lots of adjustments but, for the sake of me, i cannot find what i am doing wrong!
Adding screenshots and some code. Here is a Github repository if you want to run it and see this in action. Thanks for any help!
and this happens when scrolling left:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
fragment_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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.manzo.tabbednavigation.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:title="Title"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_scroll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:src="#drawable/bg"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorAccentWarning"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I didn't found a solution so i ended up using a workaround.
I removed fitsSystemWindows="true" from the toolbar and added a marginTop of 24dp, which is System bar height as per material guidelines, I also included an height of 25dp for previous sdks.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="#dimen/status_bar_height"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
I am open to any suggestion for a "real" solution
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've been looking everywhere for this w/ no luck. The Android Support Design library seems to be designed for doing parallax only on an image, but I want a header that's more like a framelayout or linearlayout with a bunch of elements including an image w/ overlaid text and gradients on top of it. I.e., a more complicated header that shrinks w/ text that parallaxes into the status bar title w/ a different font size.
Does anyone know how to do this? I tried nesting a NestedScrollLayout but that's not what I want to do either :-(
You can use the CollapsingToolbarLayout
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
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="10dp"
android:background="#color/nav_view_header"
app:expandedTitleMarginEnd="64dp">
<RelativeLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ic_vp_placeholder_largo"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" >
<!-- Your progress bar, rating stars, text, a gradient, etc. -->
</RelativeLayout>
<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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/nestedScroll"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I want to implement collapsible toolbar with a logo in the following manner:
Flexible Space with overlapping content, like shown here (have this already);
Parallaxed pattern in this space that gets scrimmed with solid color (have this too)
A horizontally-centered logo, which must appear right above the content but float upwards as toolbar collapses:
In action it should be something like Pesto's leaves here (not necessarily resizable, but that would be a plus):
Here's my layout:
<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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
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:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
<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.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivityFragment"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<!-- card content -->
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The problem is, wherever I try to place the logo picture, either it doesn't move like I need it too, or everything breaks. It feels like a custom Behavior might be required. Unfortunately neither of the tutorials I found on the new Design library explain how to extend it — only how to use provided stuff. There's no source code of it released, the decompiled code has no comments and is extremely tangled, and the fact that I'm not yet very comfortable with Android's layouting internals makes it even worse.
Please help?
Okay, I sorta did it!
My solution is horrible, so I'll still be expecting for better ones :)
I went on and created a custom view CollapsingLogoToolbarLayout, which is a subclass of CollapsingToolbarLayout. The latter class is where title transition is taken care of — so in my subclass I placed the logic that changed properties of the logo view, namely its translationY based on "expanded-ness" fraction. Gist with code is here. Now after I found suitable offset parameters, my layout looks like this:
...
<com.actinarium.random.common.CollapsingLogoToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:logoViewId="#+id/collapsing_logo"
app:collapsedViewOffset="0dp"
app:expandedViewOffset="-56dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
<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.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/collapsing_logo"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/random_logo"/>
</FrameLayout>
</com.actinarium.random.common.CollapsingLogoToolbarLayout>
...
The behavior of CollapsibleToolbarLayout with regards to the RecyclerView seems broken. When setting a value for
app:layout_scrollFlags
If you do not use "scroll|enterAlways", the Collabsible layout will never expand. It will always contract, but when you pull down, it does not expand anymore, so it just gets locked to the top.
If you use "scroll|enterAlways", it works as expected, meaning it instantly expands the header to its full height whenever you scroll down.
Without knowing anymore, it seems as if the Collapsible layout cannot properly determine when the RecyclerView is at the top of the list, as that is the criteria for when it should expand to full height in the other cases.
Here is the layout that I am testing with. The java code isn't really important, it is just populating the recyclerview with dummy data and using a LinearLayoutManager.
<?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.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
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:toolbarId="#id/toolbar_id"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_id"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Try with scroll|enterAlways|enterAlwaysCollapsed. This way the toolbar should always enter in the collapsed mode, and then expand when you reach the top of the sibling view.
If you want to show a list with RecyclerView under the AppBarLayout you should place the RecyclerView XML under
<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.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
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:toolbarId="#id/toolbar_id"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_id"
android:layout_width="match_parent"
android:layout_height="?android: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/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>