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>
...
Related
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
I'm willing to create a custom toolbar for the main menu of an app I'm working on, like this:
https://i.stack.imgur.com/GJdjn.png.
It contains a background image and another centered image as thumbnail. It does not collapse and stays static until an item is selected inside one of the tabs.
I'm using Android Studio in the developing process, which can be a little rough to deal with layout, but I believe there's a solution that uses the material design features, but I couldn't find anything about that (besides the toolbar with a background image).
Thanks in advance.
You can customize the Toolbar widget to your needs. Use something like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" >
//...your code here
</RelativeLayout>
</android.support.v7.widget.Toolbar>
And then add this toolbar to the top of your UI.
Based on the example you used, it looks like they are using a CollapsingToolbarLayout with the collapsing effect turned off. The layout may look something like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_width="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/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:layout_scrollFlags="enterAlways">
<FrameLayout
android:id="#+id/header_frame"
android:layout_width="match_parent"
android:layout_height="#dimen/height_header"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
<ImageView
android:id="#+id/square_image"
android:layout_width="#dimen/size_square_image"
android:layout_height="#dimen/size_square_image"
android:layout_gravity="center|bottom"
android:scaleType="centerCrop"/>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
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 want to make collasping toolbar, in which is my custom Layout . On the image below is presented use of new released design.support lib. On the img.1, the element (ImageView) is disappearing. In my project I want to disappear a Layout.
Because inside Layout will be ViewPager it can not be resized like the image, it should dissolve in Toolbar background - should become transparent.
img. 1
Additionaly I want to open/hide ToolbarLayout by moving ToolbarFooter - belt to move - bright blue Layout. So expand/collapse are not like in img.1 Instead it should works like status bar that shifts up and down by blick on ToolbarFooter.
img.2
The think is I read about it a lot (collapsing with button , layout inside) of but I've found any clue or implementation. I don't know how to approach to this topic.
I suppose that my ViewPager and RelativeLayout(or whatever) should be outside of the toolbar. And they should just take a place of toolbar view like this:
<android.support.v4.widget.DrawerLayout
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">
<RelativeLayout
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:clipChildren="false">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_max_height"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/AppBarTheme">
<Button
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="left|top"
android:gravity="center_vertical|left"
android:text="ToolbarTitle"
android:background="?android:attr/selectableItemBackground"
android:textAllCaps="false"/>
</android.support.v7.widget.Toolbar>
<net.android.app.views.ViewPagerToolbar
android:id="#+id/calendar_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="?attr/actionBarSize"/>
<RelativeLayout
android:id="#+id/toolbar_footer"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:layout_alignParentTop="false"
android:layout_alignBottom="#+id/app_bar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:text="#string/belt_to_move"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/belt_to_move"/>
</RelativeLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar">
<android.support.v4.view.ViewPager
android:id="#+id/vp_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
Now can anyone tell me what component should I use?
Support library offers CoordinateLayout, CollapsedToolbar, Appbar.
By standard approach can be use RelativeLayout or FrameLayout which overlap view. So guys what you recommend me, how from which side should I eat this cake?
UPDATED:
Finally I've found the solution. It isn't CollapsingToolbar but ViewDragHelper.
The solution I followed: Blog, GitHub project, YouTube explanation,
You need attach a viewPager above toolbar.
Example for ImageView :
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<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:elevation="2dp"
app:collapsedTitleTextAppearance="?attr/autoCompleteTextViewStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
// put here your content
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:elevation="2dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
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