How to hide the searchbar as it starts

How to hide the searchbar as it starts - android

I have an topbar for title and icons and a searchbar. When I scroll up both of that hiding and its ok. But I want to hide searchbar when activity start first and show when scroll down first. (Like ios whatsapp application, default is hidden)
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_scrollFlags="scroll">
//...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
//...
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Is there any scrollflags for it. Thanks for any help.
Sorry for my terrible english.

add app:expanded="false" to appbarlayout. And use only one bar inside in it.
<RelativeLayout>
<RelativeLayout
android:layout_height="56dp"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll">
//...
</RelativeLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:expanded="false">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
//...
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Use Collapsing ToolBar as shown Code
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Scrollable view here -->
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/tall_toolbar_height">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Related

How to get a Layout partially under another

<androidx.drawerlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawerLayout"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_scrollFlags="scroll|enterAlways"/>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="-80dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/menu_drawer"
/>
The frame layout contains my recycler view..
I've added a collapsing toobar layout for the linear layout
I'm trying to get the frame layout to halfway up the collaping toolbar layout
but This is the result I'm getting
what I want is..
If you have a better method to do this please feel free to help. Im a complete noobie..
I'm sorry for my lack of artistic expertise in the paint image....
Please Check the Answers below For solution If you have the same problem..I've solved mine using the same

Add these attribute inside of your FrameLayout
app:layout_anchor="#id/app_bar"
app:behavior_overlapTop="45dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_anchorGravity="bottom"
EDIT:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/contentView"
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:background="?attr/colorSurface">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/placeholder_200_dp"
android:background="#color/red"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/app_bar"
app:behavior_overlapTop="45dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAttendanceHistory"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchorGravity="bottom"
android:layout_marginStart="#dimen/margin_medium"
android:layout_marginEnd="#dimen/margin_medium"
android:background="#drawable/card_white_design"
tools:listitem="#layout/item_student_attendance" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The Above layout will make my FrameLayout overlap by 45dp

You should be able to use the elevation attribute on your views to set the Z axis elevation, which will allow those 2 surface to be at different elevations.

It's because of this line:
android:layout_marginTop="-80dp"
You need to remove this first then,
All you need to do is adding this line of code to the FrameLayout:
app:behavior_overlapTop="150dp"

Collapsing toolbar not pin the card view

I have created a XML with appbar layout, collapsing toolbar layout with imageview and nested scroll view in order to preform parallax scrolling.
However, I want to add a cardview inside the collapsing toolbar and pin it using the collapsing mode. It can't pin after scroll up. I have no idea what I made wrong. Anyone can help?
Here is my XML code:
<?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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin">
//textview
</androidx.cardview.widget.CardView>
<ImageView
android:id="#+id/imageView7"
android:layout_width="360dp"
android:layout_height="360dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/logo"
tools:srcCompat="#drawable/logo" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="false"
android:overScrollMode="always"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//my content
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

As far as I know, only Toolbar can be pinned inside of CollapsingToolbarLayout. Everything else collapses. So you either put your layout you want to pin inside of Toolbar Layout (not recommended, will change size of toolbar, and positions of nav buttons, etc.) or you move it outside of CollapsingToolbar.
Just remember that AppBarLayout acts like a vertical LinearLayout.
One possible idea, if you design allows it, is to remove CollapsingToolbarLayout and try to build your UI inside of AppBarLayout. You can control what goes away and what stays using layout_scrollFlags.

This is a very simple technique that you can apply
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/home_bg_color"
tools:context=".ui.match_detailds.MatchDetailsActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_barlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collaps_toolabar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#style/CollapsingToolbarLayoutExpandedTextStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/_150sdp"
app:layout_collapseMode="pin"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_150sdp"
app:layout_collapseMode="pin">
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_currentMatch_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="#dimen/_150sdp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1">
</androidx.constraintlayout.widget.ConstraintLayout>
</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"
android:fillViewport="true"
android:id="#+id/nestedviewhome"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Nested co-ordinate layout and fitsSystemWindows overlaps status bar

Following is xml for my Main activity
<?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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/bottom_nav_view_color"
app:itemIconTint="#color/bottom_nav_view_icon_tint_selector"
app:itemTextColor="#color/bottom_nav_view_text_color"
app:menu="#menu/navigation" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
app:srcCompat="#drawable/ic_assist_icon" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navi_view_layout" />
Following is xml code for Home fragment
<?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:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="245dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/card_dark_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imgAirportBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="2dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:title="#string/empty"
app:contentInsetStartWithNavigation="0dp"
app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
app:layout_collapseMode="pin"
app:logo="#drawable/toolbar_logo"
app:navigationIcon="?attr/homeAsUpIndicator"
app:theme="#style/TransperantToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Following is xml code for Detail fragment
<?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:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="245dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/card_dark_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imgStoreBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="2dp"
app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:theme="#style/TransperantToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Now when I am calling Detail Fragement from Home Fragment my toolbar overlaps with status bar. If I call Detail fragment from any other fragment it is looking fine. Also toolbar in Home fragment does not overlap with status bar although xml for Home fragment and Detail fragment is nearly the same.
Picture one shows when detail fragment is opened normally
Picture two when detail fragment is opened from home page
Latest update:
This solution is helping me https://medium.com/google-developers/windows-insets-fragment-transitions-9024b239a436 but there are lots of changes involved any other short way to do it?

The symptoms you mention are very similar to the ones, mentioned in this question. To recap from the answer that I have provided there, the issue is, that window insets are being dispatched the first time fragment is being shown, but they are not being next time you are making a fragment transaction.
You have to manually ask for the window insets to be dispatched in order to receive correct system bar paddings:
private void replaceFragment() {
getSupportFragmentManager().beginTransaction()
.replace(R.id.content, new DetailFragment())
// NOTE, we are performing `commitNow()` instead of ordinary `commit()`,
// Because we want this commit to happen sychronously/immediately
.commitNow();
// Ask the framework to dispatch window insets once more to the root of your view hierarchy
ViewCompat.requestApplyInsets(findViewById(R.id.root));
}

Design XML 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/home_bg"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
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="wrap_content"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/gray">
<ImageView
android:id="#+id/imgStoreBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:theme="#style/AppTheme"
app:title="#string/app_name">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_45sdp"
android:gravity="center"
android:singleLine="true"
android:textColor="#color/black"
android:textSize="14dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In your JAVA file,
onCreate :
Window window = getWindow();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

I think you should add this in you detail fragment (just give it a try):
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:title="#string/empty"
app:logo="#drawable/customimage"
and make one image as transparent add it as customimage for detail, this would be probably a trick.
Thank you.

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

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to hide the searchbar as it starts - android

Related

How to get a Layout partially under another

Collapsing toolbar not pin the card view

Nested co-ordinate layout and fitsSystemWindows overlaps status bar

CollapsingToolbarLayout: Fix custom layout on top

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

Categories

Resources