I use app support and CoordinatorLayout. I was able to implement CollapsingToolbarLayout with ImageView and Toolbar that hide when scrolling. I am struggled with tabs - TabLayout is not collapsed, which is good. The problem is that it does not look nice - I want it to use bottom part of the picture as background.
I moved TabLayout within CollapsingToolbarLayout and then it uses the picture as background but there are two problems - tabs are located at top of the screen and they are hidden when scrolling.
I want to achieve the effect that it will sit at bottom of picture
and it will stay at top of the screen when other parts are scrolled away
Layout:
<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.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp"
>
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/digit1_hill"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.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.TabLayout
android:id="#+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
You need to tell your Toolbar to app:layout_scrollFlags="scroll|enterAlways" and your CollapsingToolbarLayout to app:layout_scrollFlags="scroll|exitUntilCollapsed" while your TabLayout should have android:layout_gravity="bottom"
Try this:
<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.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<!-- Fit the system windows for your CollapsingToolbarLayout
also set your height to wrap_content and give image a height-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="244dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/digit1_hill"
app:layout_collapseMode="parallax"/>
<!-- Tell your toolbar to scroll|enterAlways -->
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
<!-- add layout_gravity="bottom" -->
<android.support.design.widget.TabLayout
android:id="#+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Update
Additionally, you should switch your theme or add a new theme:
<style name="NewAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Include all items from original theming -->
</style>
and to hide the title create a style:
<style name="Invisible" parent="AppTheme">
<item name="android:textColor">#android:color/transparent</item>
</style>
and then set this as your collapsedTitleTextAppearance:
app:collapsedTitleTextAppearance="#style/Invisible"
Related
I tried to find someone with the same question but didn't really know what to search for. If someone else finds a simliar question, just let me know!
I've implemented the toolbar from the design library as follows:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/mainTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
and the toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
The AppBarLayout is a direct child to the CoordinatorLayout. Below the AppBar I have a RecyclerView that correctly lets the AppBar collapse when scrolling up.
However I'm able to press directly on the AppBar and then move my finger up and that way the toolbar collapses even though my RecyclerView is completely empty. I can expand it again by scrolling down on the toolbar again. This behavior doesn't happen when scrolling where the RecyclerView is.
I hope my problem is understandable. I'm using version 25.1 of the support library.
Thanks!
Edit: I tried the solutions below. Didn't change anything. Down below I added a video to show what my issue is. So it's really about the situation when the screen is not full (so no elements from the RecyclerView goes off the screen): If that's the case I don't want the Toolbar to hide at all. In other words: Only hide the toolbar if any elements from RecyclerView go off the screen.
https://drive.google.com/file/d/0Bzrw-IuZ9USuMURVVkRfb3dkRTQ/view?usp=sharing
If any more code is needed from my side just let know.
Try this
The entire project is at this location:
https://github.com/slidenerd/Android-Design-Support-Library-Demo
The below code works for me(This Git project belongs to slidenered. Thanx to him):
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="slidenerd.vivz.navigationviewdemo.FourthActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</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"
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_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_add_black"
app:borderWidth="0dp"
app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer" />
if u want to fixed the toolbar when appbar is scrolled
try this:
<android.support.design.widget.CoordinatorLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
put your toolbar under a CollapsingToolbarLayout and app:titleEnabled="false"
By setting it to false, you'll get the desired behaviour. The title stays fixed at the top of the screen.
you can do it programetically also:
CollapsingToolbarLayout.setTitleEnabled(false);
im trying to make a transparent toolbar inside a AppBarLayout so the navigation drawer icon and Title appear like this
Toolbar i wish to make like
this is what i achieved but i would like to remove the borders around the tool bar. i tried removing the elevation and sitting the windowContentOverlay with #null but was not successful
my current achieved toolbar
Try following
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
</style>
Try my below 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"
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/_400sdp"
android:background="#color/colorPrimary"
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:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/iv_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_400sdp"
android:background="#drawable/gradient_bg" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_140sdp"
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_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/_20sdp"
android:clickable="true"
android:src="#drawable/ic_attach_money"
app:backgroundTint="#color/kleen_green"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/bottom_sheet_behavior"
app:layout_collapseMode="pin" />
<!--app:layout_behavior="#string/bottom_sheet_behavior"-->
</android.support.design.widget.CoordinatorLayout>
I'm using a collapsing toolbar layout in an activity which should have to items always shown in the overflow menu. the issue is that as you can see below (on the top right corner) both items has a background of the collapsed toolbar instead of being on top of the cover image directly like the back arrow.
All used drawables are vector drawables without background.
Activity XML Layout:
<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=".ui.activities.WorkDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/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"
android:theme="#style/ToolbarTheme"
app:collapsedTitleGravity="start"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/expandedToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/toolbar_cover_container"
android:layout_width="match_parent"
android:layout_height="480dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/toolbar_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/down_dark_gradient" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:textAlignment="gravity"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_work" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/share_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_share_black"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view" />
Expanded Layout
Collapsed layout
Removing the theme from toolbar
android:theme="#style/ToolbarTheme" didn't solve the issue, applying a theme that overrides the parent with a transparent background did.
<item name="android:background">#color/transparent</item>
I'm trying to work with different AppBarLayouts in one Activity.
When a Fragment is loaded, it can call a "ToolbarManager", that handles the replacing of the currently active Toolbar (namely an AppBarLayout).
For some of these Toolbars (using CollapsingToolbarLayout) I want them to draw behind the StatusBar.
This works fine when setting the "fitsSystemWindow" to true in the XML.
But when using just a Toolbar with layout_scrollFlags="scroll", the Toolbar Title is displayed even behind the StatusBar.
To avoid this, I want to disable the "fitsSystemWindow" when loading such a Toolbar by using setFitsSystemWindow(false).
Disabling works fine, but when re-enabling by setFitsSystemWindow(true) for using with CollapsingToolbarLayout, the StatusBar is colored and the Toolbar is placed below the StatusBar with a padding in size of the StatusBar on top.
Image: Drawn below StatusBar instead of behind
When I don't use setFitsSystemWindow(true) and just set it to true in the XML layout, the display of CollapsingToolbarLayout is fine.
Is this a bug in setFitSystemWindow or is this method just different from the XML attribute?
Here are the layouts I use:
Activity:
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity"
style="#style/AppTheme">
<android.support.design.widget.CoordinatorLayout
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:indeterminateDuration="1000"
android:layout_marginBottom="-7dp"
android:id="#+id/loadingBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_gravity="center_horizontal|bottom"
android:gravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/include_navigationview" />
The AppBarLayout is replaced every time a new Fragment is loaded.
The following layout is the Toolbar which should not draw behind the StatusBar, but the Toolbar should scroll (leaving only the TabLayout visible)
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/toolbar_discover"
android:fitsSystemWindows="true"
android:paddingBottom="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|snap">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_discover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
This used to work when I set fitsSystemWindows=false on the CoordinatorLayout in the MainActivity Layout. When doing so, the following CollapsingToolbar cannot draw behind the StatusBar.
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/toolbar_account"
android:fitsSystemWindows="true"
android:paddingBottom="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:id="#+id/collapsingToolbarLayout">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:id="#+id/banner_image"
android:src="#mipmap/img_header"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:fitsSystemWindows="false"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.Toolbar"
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>
I am trying to create a CollapsingToolbarLayout and below it a listview, when the listview is scrolled the Toolbar should collapse, but its not working when scrolled the Toolbar is not collapsing.
Used this tutorial: http://android-developers.blogspot.in/2015_05_01_archive.html
Note: The FrameLayout contains the listview
<LinearLayout 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="wrap_content"
android:orientation="vertical"
android:scrollbars="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbara"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
The framelayout code:
<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"
tools:context="ranjithnair02.com.supporttest.BlankFragment">
<ListView
android:id="#+id/rcyv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:src="#android:drawable/ic_search_category_default"
app:borderWidth="0dp"
app:elevation="5dp"
app:rippleColor="#color/wallet_highlighted_text_holo_light" />
</RelativeLayout>
You should use RecyclerView instead of ListView
Note:
don't forget to update RecyclerView in Gradle file.
compile 'com.android.support:recyclerview-v7:22.2.0'
I did an example by using RecyclerView instead. The source code could be found here:
https://github.com/jiahaoliuliu/MaterialDesignSample/tree/collapsingToolbars
There are a couple of things that you should take into account and the post does not says.
Use CoordinatorLayout as the main layout
Use a theme without ActionBar and set the toolbar as actionBar instead. You can do it by creating a special theme for the activity like this:
<!-- Indigo without actionbar when toolbar is used -->
<style name="IndigoWithoutActionBar" parent="Indigo">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
And in the AndroidManifest.xml file, do the follow:
<activity
android:name=".CollapsingToolbarActivity"
android:label="#string/app_name"
android:theme="#style/IndigoWithoutActionBar"
>
</activity>
Once this is done, set it on the Java code:
// Actionbar
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Here is a functional xml code that I use.
<?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/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="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<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.v7.widget.RecyclerView
android:id="#+id/simpleRecyclerView"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
If this is not enough for you, you can follow the code of Chris Banes here:
https://github.com/chrisbanes/cheesesquare
For my case : I dint give height to my Toolbar .
It was wrap_content. If thats the case then try to fix the height of the Toolbar using :-
android:layout_height="?attr/actionBarSize"
You need to add two things to the list view and it will work
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
My working XML code is
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/black"
tools:context="com.example.pr20020897.samplapp.DisplayAllDataActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/db"
android:contentDescription="image" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:navigationIcon="#drawable/ic_arrow_back"
app:contentInsetStart="72dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ListView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/listView"
android:nestedScrollingEnabled="true"
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#FF0000"
android:background="#color/black"
android:dividerHeight="1dp">
</ListView>
</android.support.design.widget.CoordinatorLayout>
Hopefully help someone.
The problem is the RelativeLayout. Try replacing the FrameLayout with the ListView and then the FloatingButton. All wrapped in a CoordinatorLayout of course.
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>