AppBarLayout take space after setVisibility(View.GONE) - android

I want to hide my AppBarLayout for adding a view dynamically which will take the height of the screen.
For this, i want to remove a view temporaly by setting the visibility of my AppBarLayout to GONE.
The view is not visible, but take space in the screen(half of the height of screen).
My XML code :
<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/coordinatorFriendProfil"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#81D4FA"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/fProfilAppBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/fProfilCollapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#B3E5FC"
android:gravity="center"
android:orientation="vertical"
app:contentScrim="#03A9F4"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="#+id/fProfilUserInfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<com.neden.neden.RoundedImageView
android:id="#+id/ivFriendPicture"
android:layout_width="150sp"
android:layout_height="150sp"
android:layout_gravity="center"
android:fitsSystemWindows="true"
android:src="#drawable/photo"
app:border_color="#64B5F6"
app:border_width="4dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<TextView
android:id="#+id/fProfilName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="15pt" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/fProfilToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fProfilContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Your problem is caused by this line
app:layout_behavior="#string/appbar_scrolling_view_behavior"
You will have to set it programatically on CoordinatorLayout not the actual container fragment that has that field.
Here is how
mContainer = (FrameLayout) findViewById(R.id.main_content_container);
CoordinatorLayout.LayoutParams params =
(CoordinatorLayout.LayoutParams) mContainer.getLayoutParams();
params.setBehavior(null);
mContainer.requestLayout();
If you want to make it scrolling again
params.setBehavior(new AppBarLayout.ScrollingViewBehavior());

Try to set AppBarLayout's height to zero
AppBarLayout appBar=(AppBarLayout)findViewById(R.id.fProfilAppBar);
LinearLayout.LayoutParams params=appBar.getLayoutParams();
params.height=0;
appBar.setLayoutParams(params);

I was able to solve this by moving everything from CollapsingToolbarLayout (CTL) into Toolbar, making Toolbar the only desdendant of CTL. Then I set the CTL's height to wrap_content and in the code I used toolbar.setVisibility(View.GONE). Note that you might want to change the layout inside Toolbar, add some wrapper around its childs, like RelativeLayout or something else.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:fitsSystemWindows="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_main_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/default_page_background_color"
android:orientation="vertical"
tools:context=".home.ui.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/page_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/default_page_background_color"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toTopOf="#id/home_nav_tabs"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
android:orientation="vertical"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:scrimAnimationDuration="300">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:buttonGravity="top"
app:layout_collapseMode="none"
app:popupTheme="#style/AppTheme.PopupOverlay">
...

I have tried these, still not working. better solution is show and hide the CollapsingToolbar and set the AppBarLayout params dynamically.
Do this when ever you show/hide the CollapsingToolbarLayout
mAppBar.setLayoutParams(**new CoordinatorLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT)**);

Related

CollapsingToolbarLayout with two views, make one scroll but not the other

I have an activity with a toolbar and a recyclerview. On top of the recyclerview I have a panel that I want to be scrollable (to move along with the scroll of the recyclerview).
I want this panel to scroll behind the toolbar, so when the scrolling happens, the toolbar stays in place and the panel slides behind it.
Kind of what they do here:
https://i.imgur.com/fQA6bPH.gif
But I cant find the right combination of options with CollapsingToolbarLayout to achieve this effect:
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="none"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="none"
app:layout_collapseParallaxMultiplier="0.5">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
To simplify, I've changed the structure to this:
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="pin"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
It does exactly the same when we add an ImageView inside the CollapsingToolbarLayout like this with parallax flag of app:layout_collapseMode:
<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:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="pin" />
<ImageView
android:src="#drawable/cheese_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" //Here is the solution
android:minHeight="100dp" />
</android.support.design.widget.CollapsingToolbarLayout>
So you may want to add :
app:layout_collapseMode="parallax"
To your view (LinearLayout) or anything inside.
Read: https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout#creating-parallax-animations
I solved this problem by moving Toolbar outside of AppBarLayout. Then in code setup Toolbar as SupportActionBar.
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="pin">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize" />
</android.support.design.widget.CoordinatorLayout>
You need to change this to get desired effect:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:contentScrim="?colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Your change was in CollapsingToolbar, by using these three attributes "scroll|enterAlwaysCollapsed|exitUntilCollapsed" together will change that effect.
Description :
app:layout_collapseMode="" is attribute used to collapse/pin child views of CollapsingToolbarLayout.
There are three attributes to this :
none : No effects at all.
pin : Pin that view at CollapsingToolbar when scrolled.
parallax : Hide view parallel with CollapsingToolbar hiding.
so if you're having Toolbar pinned to CollapsingToolbarLayout then add this property pin (which will pin it to Collapsing toolbar when scrolled) and parallax will animate it until collapsed.
Let's see
How does scrolling actually works using these 4 attributes in
app:layout_scrollFlags=""
scroll : The view will be scroll in direct relation to scroll
events.(Necessary, otherwise any other attribute won't work)
enterAlways : When entering (scrolling on screen) the view will
scroll on any downwards scroll event, regardless of whether the
scrolling view is also scrolling.
enterAlwaysCollapsed : An additional flag for 'enterAlways' which
modifies the returning view to only initially scroll back to it's
collapsed height.
exitUntilCollapsed : When exiting (scrolling off screen) the view
will be scrolled until it is 'collapsed'.
snap : Upon a scroll ending, if the view is only partially visible
then it will be snapped and scrolled to it's closest edge.
More details from here & demo here
Findout more from here : link

SwipeRefreshLayout in AppBarLayout not wrapping content

I am trying to implement pull to refresh but I'm having an issue with SwipeRefreshLayout not wrapping the child view's height. In the view preview and in a live build it appears to have 0 height.
The layout as as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_collapseMode="pin">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/child_layout" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
I have also tried making the SwipeRefreshLayout the parent of the AppBarLayout without any success as well as putting a singular LinearLayout inside of the SwipeRefreshLayout. The only thing that seems to prevent the height of the swipe layout from being 0 is to set it statically but I want it to be dynamic based upon the height of the child view.
Is there something I'm missing here? It seems like there may be a bug with SwipeRefreshLayout because replacing it with a LinearLayout that also wraps the content works as expected.
The problem is your SwipeRefreshLayout is inside the Toolbar and AppBarLayout. You must wrap AppBarLayout with another layout and put SwipeRefreshLayout below the AppBarLayout. An example is at the below.
<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"
xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
tools:context="com.vsahin.moneycim.View.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:fitsSystemWindows="true"
app:expanded="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:background="#drawable/gradient_background">
<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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
if your SwipeRefreshLayout height is wrapping the content of your child_layout, then your child_layoutheight should be set to match_parent OR both SwipeRefreshLayout and child_layout height should be set to match_parent as shown in the Android Documentation
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Child View-->
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
SwipeRefreshLayout is a transparent View, so best solution to set it match_parent it will not conflict with other Views and don't include View or Layout within it, keep it clean
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_collapseMode="pin">
<include layout="#layout/child_layout" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
SwipeRefreshLayout has to be in top to overlay other layers and be clickable

How to pin RelativeLayout in CollapsingToolbarLayout

I am using CollapsingToolbarLayout for my activity. Is there a way to pin RelativeLayout that contains Toolbar within instead of pinning Toolbar? I tried to do the following but the RelativeLayout does not pin on top when layout collapses.
<?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.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/pale_red"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.v4.view.ViewPager
android:id="#+id/carViewPager"
android:layout_width="match_parent"
android:layout_height="230dp"/>
<LinearLayout
android:id="#+id/image_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="bottom|center"
android:background="#android:color/transparent" />
</FrameLayout>
<RelativeLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/activityTitle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:textSize="16sp"
android:text="#string/shop_info"
android:textColor="#color/white" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_shop" />
</android.support.design.widget.CoordinatorLayout>
Like its name Collapsing,everthing except Toolbar is going to be collapsed when scroll up, the only way to pin it is to use "pin" on ToolBar, and only the ToolBar works with "pin".
Hence try placing your RelativeLayout outside of CollapsingToolBarLayout ,but inside of AppBarLayout, maybe that's what you need.
I solved it through this question:
How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
just treat your layout as the TabLayout mentioned in this question.
Hope it helps.

CollapsingToolbarLayout: Fix custom layout on top

here's what I wanna do: I want to display a map in a CollapsingToolbarLayout, below the map should be a custom layout that contains a couple of controls. Below that is a RecyclerView. I want to be able scroll the custom layout as well as the RecyclerView but fix the custom layout at the top while the RecyclerView keeps scrolling.
Here's an image of what I want to achieve (grey = map; red = custom layout; green = RecyclerView):
Here's what I have so far. It works well, except for that the custom layout (red) won't stop scrolling if it reaches the screen's top.
<?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:mapbox="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/map_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
mapbox:zoom="12"
mapbox:style_url="#string/style_light"
mapbox:access_token="#string/access_token">
</com.mapbox.mapboxsdk.maps.MapView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/current_activity"></include>
<android.support.v7.widget.RecyclerView
android:id="#+id/activity_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
What's the easiest way to achieve this behavior?
The answer is actually pretty simple. I just had to move my custom layout into the AppBarLayout.
Here's the 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:mapbox="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/map_view"
android:layout_width="match_parent"
android:layout_height="400dp"
app:layout_collapseMode="parallax"
mapbox:zoom="12"
mapbox:style_url="#string/style_light"
mapbox:access_token="#string/access_token">
</com.mapbox.mapboxsdk.maps.MapView>
</android.support.design.widget.CollapsingToolbarLayout>
<include layout="#layout/current_activity"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?attr/colorAccent"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/activity_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Add app:layout_collapseMode="pin" this attribute in your red view to pin at the top of the screen.
This may fix your issue

How can I provide auto-hide/show toolbar, when scroll my recyclerview with coordinator layout?

This is my layout file
<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:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.moskart.mosfake.activity.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
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:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<FrameLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_dropshadow" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_drawer_header"
app:itemIconTint="#color/navItemIconTintColor"
app:itemTextColor="#color/navItemTextColor"
app:menu="#menu/menu_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I set app:layout_scrollFlags for my CollapsingToolbarLayout to scroll|enterAlways and expected that toolbar will work like in gapps (e.g. Google Play or Google Magazine) with auto-hide/show like on this sample:
Google Magazine
But I only got scrolling toolbar that does not retract automatically, but only if user completely scrolled it himself. See sample: my app
Here is my fragment with recyclerview, which I replace with fragment_placeholder
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.moskart.mosfake.fragment.CategorySelectionFragment"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/card_horizontal_margin"
android:paddingRight="#dimen/card_horizontal_margin"
/>
</LinearLayout>
Thanks for advice!
You should measure if the bottom and top offset of the AppBarLayout is offset for more than the half the the height of the AppBarLayout and user has released the scroll. When this condition is fulfilled just start animating the translationY of the Toolbar or the offsetting of the AppBarLayout.
This could be achieved with custom CoordinatorLayout.Behavor or with inheriting existing AppBarLayout.Behaviour and tweaking it to do so.
i think you want to do like this
take a look of this library
https://github.com/ksoichiro/Android-ObservableScrollView
here is the example about how to implement it
https://snow.dog/blog/material-design-flexible-space-header-with-image/
You need to use NestedScrollView
<android.support.v4.widget.NestedScrollView ...>
<LinearLayout ...>
//Your Code Here
</LinearLayout>
Check this Example

Categories

Resources