I have a details fragment which shows information about a selected item. The image is embedded in a CoordinatorLayout and CollapsingToolbarLayout. The behavior works as expected: As the image is scrolled down, the FloatingActionButton scrolls up with the end of the CollapsingToolbarLayout. Then as it gets fully collapsed the FloatingActionButton disappears. What I want to happen is that this button never disappears. It's fine that it's anchored to the toolbar, but I have been unable to find out how to keep it visible after looking in the docs and on this site. Any tips would be appreciated!
Here is a simplified version of my layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:contentScrim="#color/colorPrimaryDark"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="#{movie.title}"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/fragment_details_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/browse_image_content_description"
android:scaleType="centerCrop"
app:largeSize="#{true}"
app:layout_collapseMode="parallax"
app:posterPath="#{movie.posterPath}" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.heiligbasil.movietvdelight.view.DetailsFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/fragment_details_text_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#{movie.title}"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="6dp"
app:borderWidth="0dp"
app:fabSize="mini"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:pressedTranslationZ="10dp"
app:rippleColor="#color/colorPrimary"
app:srcCompat="#drawable/ic_save" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
What I want to happen is that this button never disappears
It's actually because of app:layout_anchor="#id/app_bar" where your FloatingActionButton has special relation and controls by AppBarLayout while scrolling.
To disable that, set: app:behavior_autoHide="false" to your FloatingActionButton.
Also, you can do this programmatically using setAutoHideEnabled(). This is exactly what you're looking for: https://stackoverflow.com/a/43077760/4409113
Related
I use a CollapsingToolbarLayout and a BottomAppBar reacting to scroll changes in a CoordinatorLayout (collapsing and hiding on scroll). As I can't use a NestedScrollview as parent of the RecyclerView because it leads to issues when I need to use scrollToPosition() or when an item is dragged out of the bounds (It doesn't scroll to move the item), the scroll behaviors are not working for the CollapsingToolbarLayout and the BottomAppBar.
I tried android:nestedScrollingEnabled="true" but it was not working
How can I keep the scroll-related behaviors in the CoordinatorLayout without NestedScrollview ?
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/Theme.Todolist.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.ActionBar"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.Todolist.PopupOverlay"
app:title="Mes tâches"
app:titleTextColor="#color/iconTint"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/tasks_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:clipToPadding="false"
android:paddingBottom="32dp"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:hideOnScroll="true"
app:menu="#menu/bottom_app_bar"
app:navigationIcon="#drawable/ic_menu_black_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/add_task_text"
app:backgroundTint="#color/floatingAddButton"
app:layout_anchor="#+id/bottomAppBar"
app:layout_anchorGravity="top|center"
app:maxImageSize="50dp"
app:srcCompat="#drawable/ic_add_black_48dp"
app:tint="#color/addIconTint" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Use android:nestedScrollingEnabled="true"
Trying to use the new ExtendedFloatingActionButton. It seems by default ExtendedFloatingActionButton acts differently from FloatingActionButton when interacting with CoordinatorLayout. See here the red one is the typical FloatingActionButton and the 2 black ones are the ExtendedFloatingActionButton with exactly the same setup (except for colors and text).
What I need is for the black ones to hide away just like the red one does.
Here's the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.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|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
<com.google.android.material.floatingactionbutton.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"
app:srcCompat="#android:drawable/ic_dialog_email" />
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:theme="#style/Theme.MaterialComponents.NoActionBar"
android:id="#+id/exfab1"
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|start"
app:strokeColor="#ffff00"
app:strokeWidth="4dp"
app:iconTint="#ffff00"
android:text="txt"
android:textColor="#ffff00"
android:backgroundTint="#000000"
app:icon="#android:drawable/ic_dialog_email" />
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:theme="#style/Theme.MaterialComponents.NoActionBar"
android:id="#+id/exfab2"
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|center"
app:strokeColor="#ffff00"
app:strokeWidth="4dp"
app:iconTint="#ffff00"
android:textColor="#ffff00"
android:backgroundTint="#000000"
app:icon="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I see in source that there's a nested class ExtendedFloatingActionButton.ExtendedFloatingActionButtonBehavior and it seems to have maybe some properties that might be useful/related to this such as autoHideEnabled and autoShrinkEnabled but the class is protected and I can't figure out how it is meant to be accessed.
Please help.
I have this collapsingtoolbar code below that was working perfectly. However when I switched to using Jetpack Navigation (Nav graph), hitting the back button on the app would cause every other view to suddenly shift down like so. How can i avoid this from happening?
Code:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/diningAppBar"
android:layout_width="match_parent"
android:layout_height="356dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/diningToolbarLayout"
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"
>
<edu.msu.msumobile.ui.shared.CustomImageView
android:id="#+id/diningImage"
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="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"/>
<TextView
android:id="#+id/diningHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="48dp"
android:paddingStart="#dimen/text_margin"
android:paddingEnd="#dimen/text_margin"
android:fitsSystemWindows="true"
android:layout_gravity="bottom|end"
android:gravity="bottom|end"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/diningDetailToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/diningDetailTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#color/textLightColor"
app:tabSelectedTextColor="#color/textSelectedColor"
app:tabTextColor="#color/textLightColor"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/diningViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The white area is added space after coming back from the fragment that contains the above code. It will persist across the entire app and only show correctly on the fragment that has this code:
Solved. Turns out that adding
android:fitsSystemWindows="true"
breaks jetpack navigation. Removing those from the above code removed the excess whitebar at the top of every other fragment.
I am using CollapsingToolbarLayout in one of my layouts, I anchored an image (id=event_logo) on AppBar layout;
How it looks before collapsing
however, when CollapsingToolbarLayout is totally collapsed the Toolbar covers the image.
How it looks after collapsing
my xml code
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="185dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:fitsSystemWindows="true"
android:scaleType="center"
android:src="#drawable/bgg" />
<android.support.v7.widget.Toolbar
android:id="#+id/about_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/MyTheme1"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/item_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
.....
</android.support.v4.widget.NestedScrollView>
<ImageView
android:id="#+id/event_logo"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical|left"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/barcode_scanner"
android:layout_marginTop="120dp"
android:contentDescription="event_logo"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom|right" />
Tested on Android 6.0
Any Idea why is this the case?
For future readers to this question...The trick to solve this issue is to set elevation to 20dp
Simply add elevation attribute to the anchored image
<ImageView
android:id="#+id/event_logo"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_margin="#dimen/fab_margin"
android:contentDescription="event_logo"
android:elevation="20dp"
android:scaleType="fitXY"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom|right"
tools:targetApi="lollipop" />
note: attribute elevation is used only for API 21 and higher, that's why it's necessary to add targetApi lollipop
I recently changed my AppBarLayout with SmoothAppBarLayout
It is smoother and faster so i am happy with the result. But this changed my toolbar height somehow and i couldn't yet fix it.
Collapsed ToolBar's height should be 'actionBarSize' but it is bigger than that.
It is not about toolbar title, disabling or changing the padding of it doesnt work. But it is about the behaviour.
Setting a new behavior like below solves the problem but I want a proper solution.
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
params.setBehavior(behavior);
First image shows the intended size, second shows the actual size.
Here is the part of my XML: (Didn't put all of it since it is pretty long)
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
android:minHeight="50dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:sabl_target_id="#id/nestedScrollView">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:minHeight="210dp"
app:contentScrim="#color/dark_gray_actionbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/serviceImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Servis Fotoğrafı"
android:scaleType="centerCrop"
android:src="#drawable/gray_color_gradient"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
<include
layout="#layout/get_quote_layout"
android:layout_width="match_parent"
android:layout_height="64dp"
app:layout_anchor="#id/nestedScrollView"
app:layout_anchorGravity="bottom"
app:layout_collapseMode="pin" />
</android.support.design.widget.CoordinatorLayout>
I think the issue comes from fitSystemWindows. You can simplify your layout as below:
...
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:sabl_target_id="#id/nestedScrollView">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
app:contentScrim="#color/dark_gray_actionbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/serviceImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Servis Fotoğrafı"
android:scaleType="centerCrop"
android:src="#drawable/gray_color_gradient"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
...