Develop Reference

Static BottomNavigation inside CoordinatorLayout but not as direct child

I have top level container with CoordinatorLayout and Toolbar that hides when scolling, this container contain fragments.
<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"
tools:context=".ui.screens.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
One of my fragments contain RecycleView and BottomNavigation
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:pp="http://schemas.android.com/tools"
android:id="#+id/cl_content"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView/>
</androidx.core.widget.NestedScrollView>
<BottomNavigation />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem that the BottomNavigation scrolls with the content, when the app start the BottomNavigation almost invisible, and when I scroll down the BottomNavigation became visible and vise versa, I need it to be static without scroll behavior, is there any configuration for that?
I guess the problem because BottomNavigation is not direct child of CoordinatorLayout but is there workaround?
Demo project(ignore slideshow and gallery):
https://github.com/pavelpoley/CoordinatorLayoutQuestion

Remove app:layout_behavior="#string/appbar_scrolling_view_behavior" from your content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/app_bar_main">
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE: After demo project has been updated with a more complex hierarchy provided solution above didn't work as expected.
I did a lot of research and couldn't find any clean solution to have BottomNavigationView inside CoordinatorLayout but not as a direct child.
The only solution was to move BottomNavigationView inside CoordinatorLayout as a child and then change its visibility based on androidx.navigation.NavController destination.
Source code: https://github.com/dautovicharis/CoordinatorLayoutQuestion/commits/master

You can make a couple of changes
Add exitUntilCollapsed flag to the Toolbar
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
Remove the app:layout_behavior from the NestedScrollView, and add it to root ConstraintLayout
By applying those, the layouts will be:
<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"
tools:context=".ui.screens.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And fragment:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:pp="http://schemas.android.com/tools"
android:id="#+id/cl_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
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">
<androidx.recyclerview.widget.RecyclerView/>
</androidx.core.widget.NestedScrollView>
<BottomNavigation />
</androidx.constraintlayout.widget.ConstraintLayout>

Toolbar extends when keyboard opens

I have a toolbar that is beneath the status bar. If I click on a TextInputLayout, the keyboard opens but my toolbar will extend as shown here (if the keyboard is closed, the Toolbar has the usual size):
My xml-files:
The toolbar:
<androidx.appcompat.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="wrap_content"
android:background="?attr/backgroundColor"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.SubAppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="Title"
android:elevation="4dp" />
Where it is included:
<androidx.constraintlayout.widget.ConstraintLayout 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:background="?attr/backgroundColor"
android:fitsSystemWindows="false"
tools:context=".EditDayActivity">
<include
android:id="#+id/sub_toolbar"
layout="#layout/sub_toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:id="#+id/scrollViewContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/sub_toolbar"
android:fitsSystemWindows="false">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:fitsSystemWindows="true">
</ScrollView>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Try removing the android:fitsSystemWindows="true" from your toolbar
Edit:
Maybe you should use a coordinatorlayout instead and put your toolbar in there.

I had the same problem and eventually got around it by using CoordinatorLayout as my activity root with app:statusBarColor="#color/some_color" and moving android:fitsSystemWindows="true" there. Probably not the best solution but the only one that worked with my layout.
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MyActivity"
app:statusBarBackground="#color/some_color">
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I eventually managed to solve my problem by putting the ScrollView directly into the ConstraintLayout like this (and not using a RelativeLayout):
<androidx.constraintlayout.widget.ConstraintLayout
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:background="?attr/backgroundColor"
android:fitsSystemWindows="true"
tools:context=".MyActivity">
<include
... />
<ScrollView
... />
</androidx.constraintlayout.widget.ConstraintLayout>

Pin tablayout in Scrollview with appbarlayout

My android app want to have a page like Facebook page which pin the tablayout on top of the screen when scroll below the tablayout.
I have found a few answers on this topic.
pin TabLayout to top and below the toolbar Scrollview
How to make tablayout fixed below action bar?
However, they don't want my app situation because I want to keep my cardview and tablayout in the scrollview. My xml template is as below. Any insight or solution can share?
<?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"
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"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">
//toolbar content
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card1"
android:textAppearance="#style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card2"
android:textAppearance="#style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I believe you are using unnecessary layouts, try following code for guidance -
MainLayout File
<?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:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- you can put any content you want to hide after scroll in header-->
<!-- as example in putting this image view-->
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/default_img"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.25" />
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:layout_gravity="bottom" />
</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">
<!-- put content of scroll view here -->
<include layout="scroll_content_layout" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Above layout file will result in following result-
File scroll_content_layout.xml will have content you want as part of your scroll view.
ScrollContentFile
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- some other layout as part of scroll view -->
</LinearLayout>
Edit
Content inside CollapsingToolbarLayout will collaps on scroll. Any View you want to KEEP on TOP on a scroll or any other customization you need to use layout_collapseMode flag.
CollapseMode Parallax: The content will scroll but a bit
slower than nested scroll view. You can control scroll speed with
layout_collapseParallaxMultiplier flag.
CollapseMode Pin: The content will stay in the same place while this place is still inside the collapsing toolbar.
Please check Collapse modes of CollapsingToolbarLayout
Happy coding -

How to hide the searchbar as it starts

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>

Android scrolling toolbar with other combined views

In my android application I have Toolbar with SlidingLayer which that is simple library and extends from FrameLayout to make sliding on application. now when I try to use toolbar with this view I have to make it into FrameLayout, with this action scrolling my toolbar is not working.
I moved app:layout_scrollFlags="scroll|enterAlways" from <android.support.v7.widget.Toolbar to FrameLayout but scrolling it doesn't work again. for example my view with toolbar is:
Now how can I use app:layout_scrollFlags="scroll|enterAlways" and scrolling toolbar with this view?
My xml layout is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:slidingLayer="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer
android:id="#+id/sliderTabPages"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginRight="8dp"
android:elevation="5dp"
app:offsetDistance="30dp"
app:slidingEnabled="true"
app:stickTo="top"
slidingLayer:changeStateOnTap="true">
</com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar.Light">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</FrameLayout>

try this out:
<?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:slidingLayer="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Can use any layout for your content important thing is app:layout_behavior="#string/appbar_scrolling_view_behavior"-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer
android:id="#+id/sliderTabPages"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginRight="8dp"
android:elevation="5dp"
app:offsetDistance="30dp"
app:slidingEnabled="true"
app:stickTo="top"
slidingLayer:changeStateOnTap="true" />
<!--Other content-->
<!--Note that this content has to have scrollable view like RecyclerView-->
<!--Example-->
<RecyclerView
android:id="#+id/yoursScrollableView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Collapsing toolbar-->
<!--You can put any kind of view for scrolling important thing is app:layout_scrollFlags="scroll|enterAlways"-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarThatGoingToScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar.Light" />
</com.google.android.material.appbar.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</layout>