back button not showing up in CollapsingToolbarLayout - android

Hi I am doing a simple app to try out material design. Unfortunately, following the incredible tutorial here and trying out the samples here (These are incredible sources for FYI in material design) I am struggling to make my app toolbar to work perfectly as it should. For instance, the back button right next to the title on collapse in not showing up. BUT I can simply click that area where it should be and it responded.
So therefore the button is there but it is not showing up and I cannot figure out why. Also, as the toolbar collapsed, the toolbar doesn't change its color to primary color I set. contentScrim doesn't seem to react on collapse mode but I will post another question for this.
Here is what it currently looks like:
Now on collapse, the title is noticeably far to the right. The button is there, I can click it, it returns to my app's homescreen but the back icon is not there.
Here is the layout file for the activity:
<?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"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".HomeScreenActivity"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_note"
android:layout_width="match_parent"
android:layout_height="168dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_note"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<ImageView
android:src="#drawable/backgroud_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar_note"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_send_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I am using API 22 build 23.0.2 all of my support libraries are at 23.1.0

I found the answer, it seems the tutorial doesn't work for my case since probably they do a different method on how to load the image backdrop. I simply put mine into the drawable-xxxhdpi folder and load it via android:src attribute I am not very sure if this makes difference at all. I peeked at the sample project and they defer the loading/caching of images at runtime in onCreateView() using Glide. I did otherwise. I guess this is the convention on huge file size for material backgrounds?
It appears to me it involves how the actual layout is positioned. I positioned the ImageView below the toolbar. So the imageview gets rendered first, I believe. The ImageView is always there even though the Toolbar entered. This must be the reason why the contentScrim looked like it failed to recognize that it is already on Toolbar mode. The ImageView is blocking the entire Toolbar!
So I placed the ImageView below the Toolbar. This time, Toolbar gets to show up first and then the image. It worked!
Here is my new 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".HomeScreenActivity"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_note"
android:layout_width="match_parent"
android:layout_height="168dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:src="#drawable/backgroud_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_note"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
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="fill_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar_note"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_send_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I am thinking maybe if I could delay the loading of image a bit (like deferring the image loading at onCreateView()) making way for the toolbar to show up first, maybe it won't matter how I positioned my elements inside the CollapsingToolbarLayout. But this is just my rough guess. I can always be wrong.

Just use app:layout_collapseMode="pin"inside Toolbar! It's work fine) Thanks

I have changed a version in build.gradle from
compile 'com.android.support:design:22.2.0'
to
compile 'com.android.support:design:24.2.1'
and added this to class:
Toolbar toolbar = (Toolbar) findViewById(R.id.mainToolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Now back button is working!

Related

CollapsingToolbarLayout inside Viewpager: toolbar acting strange

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

How to make CollapsingToolbar with "wrap_content" height?

I want to make search toolbar which appears on swipe down and collapses on swipe up, regardless of scroll level. I encountered a problem when I wanted to set height of this toolbar exactly as search area. On swipe down it's fine. but on swipe up search icon is still visible.
If I change AppBarLayout android:layout_height="wrap_content" to 100dp, for example, it becomes possible to hide toolbar, to but it looks bad and may cause problems on different resolutions. Example of what I want to achieve is search in Play Market app, how it's done there?
<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"
tools:context="test.proekt101_test.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_height="wrap_content">
<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|enterAlways|snap"
>
<SearchView
android:id="#+id/searchView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
>
</SearchView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Try adding android:fitsSystemWindows="true" to SearchView as well.
android:fitsSystemWindows="true" is supposed to be on CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout and the ImageView inside it.
From here. Worked for me.
android:fitsSystemWindows=“true”
was responsible for this. A useful article I've found — https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec#.psylrqm0y

CoordinatorLayout / CollapsingToolbarLayout spacing issues

I'm having some issues implementing a CollapsingToolbarLayout in my app in conjunction with a recyclerview. So I have it all setup and working (compared to a few different sources - including the CheeseSquare setup) - but I'm having some issues with spacing near the bottom of the layout (1st photo & 3rd photo) I was hoping someone might be able to help with.
Images found here:
http://imgur.com/a/w3lb8
It seems a few others have had this problem, and their answers did not solve mine - completely atleast:
CoordinatorLayout leaves empty space at the bottom after scrolling
Whitespace below CoordinatorLayout in DrawerLayout
I tried adding the android:layout_gravity="fill_vertical" to the NestedScrollView / Recyclerview as suggested, and while that seems to (mostly) fix it, it now hides about 1 & 1/3 of the lowest views (looking at the views through the hierarchy viewer - Photo 4). I'm sure there's a solution to this, but I haven't been able to figure it out yet. Any assistance would be much appreciated.
Activity Layout file:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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="240dp"
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:expandedTitleTextAppearance="#style/GasMonitorTheme.ActionBar.TitleTextAppearance"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:transitionName="car_image"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_actionbar"
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:layout_gravity="fill_vertical"
android:id="#+id/fragment_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_side_padding"
android:clickable="true"
android:src="#drawable/ic_add"
android:tint="#color/white"
app:layout_anchor="#id/coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
I've gone through and simplified my activity to match that of the CheeseSquare app (trying to find why only mine is doing this), aside from my adapter pulling from a List. I've tested this and seen the same issue on API 22 & 23.

Android Collapsing Toolbar not using inertia like Google Play App does

I'm using the Android Design Support Library to create an Activity with a Collapsible Toolbar with a nice fading effect, just like Google Play or Whatsapp's Contact profile. I will put the activity layout at the end but bear in mind this is just the default Collapsible Activity layout to which I added an ImageView to the AppBarLayout to create the Toolbar <-> Image fade effect.
My problem with this implementation presents itself as 2 symptoms I will describe:
The activity content is long, when I want to scroll up quickly with a fast swipe the scroll will stop before expanding the Toolbar. I want it to continue, when I'm at the bottom of my NestedScrollView and I do a quick finger swipe to go all the way to the top of my activity I want this scroll to go and expand the Toolbar, this is the way the Google Play app behaves or Whatsapp's profile does.
Similarly when the Toolbar is expanded there is no inertia to the scroll, a quick swipe down will scroll a tiny bit, again this is not how Google Play or Whatsapp profile behaves. Once the Toolbar is collapsed the scroll behaves as it always has in ScrollViews, ListViews, etc. A quick swipe will allow you to go the bottom or top (unless there is a lot of content).
Is the behaviour I describe supported by the Design Support Library?
activity.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/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="#dimen/app_bar_height_custom"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:src="#drawable/cuthbert"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:minHeight="100dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways"
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"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
content_scrolling.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_scrolling"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScrollingActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text"/>
</android.support.v4.widget.NestedScrollView>
Try to add these lines in :
<android.support.design.widget.CollapsingToolbarLayout
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
Update support libraries to 26.0.0 ( especially design support library ). They finally fixed this issue after years of complaining.

Animating logo along with collapsing toolbar within 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>
...

Categories

Resources