Develop Reference

Coordinator view and recycler view jitter issue

I have been using this layout file like this and the view kind of jitters whenever I scroll from the recycler view. This doesnt happen for all the pages but a very few ones. it could be an issue with the lay outing style or could be because of the image being rendered. here is a video link. Thanks.
<?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:id="#+id/f_s_s"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context=".ui.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
...
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed"
app:toolbarId="#id/toolbar">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#000"
android:fitsSystemWindows="true">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="300dp"
app:actualImageScaleType="fitStart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlayImage="#drawable/gradient_cover_image_title"
app:viewAspectRatio="1"
tools:actualImageUri="#sample/seriesbackground"
tools:foreground="#drawable/gradient_cover_image_title"
tools:scaleType="centerCrop"
tools:src="#sample/seriesbackground" />
<TextView
android:id="#+id/txt_series_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/series_author_avatar"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
app:actualImageScaleType="centerCrop"
app:actualImageUri="#sample/banner"
app:backgroundImage="#color/white"
app:layout_constraintBottom_toBottomOf="#id/toolbar_image"
app:layout_constraintStart_toStartOf="parent"
app:roundAsCircle="true"
app:roundingBorderColor="#color/white"
app:roundingBorderWidth="1dp"
tools:src="#sample/banner" />
<TextView
android:id="#+id/series_author_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<TextView
android:id="#+id/series_parts_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
... />
<ImageView
android:id="#+id/series_rating_star"
android:layout_width="20dp"
android:layout_height="0dp"
.../>
<TextView
android:id="#+id/series_rating_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:menu="#menu/toolbar_share_menu"
app:navigationIcon="#drawable/ic_arrow_back_white_24dp"
app:popupTheme="#style/AppTheme.AppBarOverlay"
app:titleTextAppearance="#style/PC.TextView.SeriesTitle" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_series_parts_list_exp"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/margin_xllarge"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/lyt_info"
tools:itemCount="6"
android:nestedScrollingEnabled="true"
tools:listitem="#layout/item_series_part" />
<ProgressBar
android:id="#+id/progress_series_parts_exp"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:indeterminate="true" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Android CoordinatorLayout, AppBarLayout and inkluded RelativeLayout with Button Overlap

My Problem: The Content of the included RelativeLayout/RecyclerView does not stop before the buttons displayed at the bottom of the screen (see Fig. 1). Therefore the last Elements inside the RecyclerView are overlapped by the buttons after scrolling (see Fig. 2).
My current source code:
<?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"
tools:context="com.example.julian.brainy.ProjectListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/MyActionBarTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
app:expandedTitleGravity="bottom"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
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:id="#+id/bgImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:minHeight="100dp"
android:scaleType="fitXY"
android:src="#drawable/bg5"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/MyActionBarTheme.PopupOverlay"
app:titleTextColor="#color/brainyPrimary" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_project_list" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_marginBottom="60dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:stateListAnimator="#null"
android:layout_marginTop="5dp"
android:background="#color/brainyPrimary"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:stateListAnimator="#null"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite" />
</android.support.design.widget.CoordinatorLayout>
and the included XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/projectOverviewCreateProject"
android:background="#android:color/transparent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ProjectListActivity"
tools:showIn="#layout/activity_project_list">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/projectOverviewCreateProject"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:scrollbars="vertical" />
</RelativeLayout>
I tried to use a ConstraintLayout, but it broke the AppBar.
Update: Now the included Layout exceeds the top of the AppBarLayout.
Source code changed:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/content_project_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimary"
android:stateListAnimator="#null"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toTopOf="#id/btndirectlearning"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="5dp"
tools:layout_editor_absoluteY="459dp" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:stateListAnimator="#null"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="222dp" />
</android.support.constraint.ConstraintLayout>

Put the and the two Buttons in a ConstraintLayout. Then, give the buttons the right rules so they will stay at the bottom of the layout, and modify the tag to look like this:
<include
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
layout="#layout/content_project_list" />
EDIT:
to solve the issue related to the RecyclerView overlapping the appBar, just add this to your ConstraintLayout:
app:layout_behavior="#string/appbar_scrolling_view_behavior"

Make nested scrollview not scroll completely

In my activity XML I have a Collapsing toolbar and, after that, an referring to my other XML where I have a NestedScrollView.
This is an image of the collapsing toolbar when it is NOT collapsed.
When I scroll up, it becomes collapsed and the NestedSrollView appears like this:
I want it to scroll just to some point like this and after that the user cannot scroll more:
How can I achieve this?
This is my main XML:
<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/relLayoutCountryInfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_anchor="#+id/testeparadetail"
app:layout_anchorGravity="bottom">
<android.support.design.widget.AppBarLayout
android:id="#+id/testeparadetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/actionBarDivider"
app:layout_anchor="#+id/testeparadetail"
app:layout_anchorGravity="bottom">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/backgroundcollapsedtoolbardetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<ImageView
android:id="#+id/imgPhotoDetailFundo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imgPhotoDetailEscuro"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/background_pais_info"
android:scaleType="centerInside" />
<ImageView
android:id="#+id/imgEscuroPhotoDetailTopo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:scaleX="2"
android:scaleY="-1"
app:srcCompat="#drawable/blur_paises_filtro" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbariddetail"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<com.github.mmin18.widget.RealtimeBlurView
android:id="#+id/blurViewDetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:realtimeBlurRadius="10dp"
app:realtimeOverlayColor="#8000" />
<TextView
android:id="#+id/txtNomePaisDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="30dp"
android:layout_marginTop="520dp"
android:paddingBottom="40dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="35sp"
app:layout_anchor="#+id/txtNomeContinente"
app:layout_anchorGravity="left|bottom" />
<TextView
android:id="#+id/txtDefinicao"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="30dp"
android:layout_marginTop="520dp"
android:paddingBottom="10dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="25sp"
app:layout_anchor="#+id/testeparainfo"
app:layout_anchorGravity="left|bottom" />
<ImageView
android:id="#+id/imgVoltarPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:srcCompat="#drawable/arrow_back_branca" />
<ImageView
android:id="#+id/imgApagarPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="355dp"
android:layout_marginTop="550dp"
android:paddingBottom="40dp"
app:layout_anchor="#+id/txtDefinicao"
app:layout_anchorGravity="right|bottom"
app:srcCompat="#android:drawable/ic_menu_delete" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_scrolling_photo_detail"
/>
And this is my include
<android.support.v4.widget.NestedScrollView 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="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">

Add this line to NestedScrollView Child... See my below code as an example...
android:nestedScrollingEnabled="true"
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tablayout"
android:layout_marginTop="2dp"
android:nestedScrollingEnabled="true"/> // add this line to NestedScrollView child
</android.support.v4.widget.NestedScrollView>

Fixed button at bottom with RecyclerView and CollapsingToolbar

I'm trying to keep a button fixed at bottom when user's scrolling a RecyclerView. This is what I tried:
<?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"
tools:context=".AddProduct">
<android.support.design.widget.AppBarLayout
android:id="#+id/product_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="teste"
android:textColor="#161616"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="138dp"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
And then I used AppBarLayout.OnOffsetChangedListener to adjust button margin according by user scrolling.
It worked, but if user scroll a little fast, it can't adjust the margin very well and the button don't appear to be fixed. It's not reliable.
So, how is the best way to do this?

Maybe you can use a ConstraintLayout instead of your RelativeLayout as below:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/btn_product_add_product"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</android.support.constraint.ConstraintLayout>

BottomNavigationView overlapping FrameLayout in CoordinatorLayout

The following is my layout xml. The problem now is that the BottomNavigationView is overlapping the FrameLayout. I wanted the FrameLayout to stretch to the top of the BottomNavigationView.
I tried with trick such as adding paddingBottom in the FrameLayout but I wonder if there is other better solution. Thanks.
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/user_app_bar"/>
<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="?android:attr/windowBackground"
app:menu="#menu/navigation"
app:itemTextColor="#color/colorPrimaryDark"
app:itemIconTint="#color/colorPrimaryDark"
/>
<FrameLayout
android:id="#+id/fragment_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="58dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchorGravity="bottom|end"
app:layout_anchor="#id/app_bar"
app:srcCompat="#drawable/ic_edit_white_24px" />
</android.support.design.widget.CoordinatorLayout>
UPDATE: more information on the user_app_bar.xml. It contains a CollapsingToolbarLayout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior="co.domain.DisableAppBarLayoutBehaviour"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:contentScrim="?attr/colorPrimary">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:contentDescription=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription"
android:background="#color/gray"/>
<TextView
android:id="#+id/profileName"
style="#style/textShadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="0dp"
android:text="user name"
android:textAlignment="center"
android:textSize="18sp"
android:textColor="#fff"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/profileImage"
app:layout_constraintRight_toRightOf="#+id/profileImage"
app:layout_constraintTop_toBottomOf="#+id/profileImage" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profileImage"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:alpha="0.5"
android:src="#drawable/ic_account_circle_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.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"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

There is simple solution for your issue. That is to put marginBottom in FrameLayout on 56dp which is according to documentation height of BottomNavigationView. I'm not sure is it changable acording to mobile screens. Even the documentation says nothing about changing of height. And I used it in some of my apps and I didn't find that height of BottomNavigationView is changing. But just in case check. Hope this will help.

Place CoordinatorLayout and BottomNavigationView inside RelativeLayout
with BottomNavigation android:layout_alignParentBottom="true" and CoordinatorLayout layout above with android:layout_above="#+id/{BottomNavigationView-ID}"
please check below layout
<?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">
<data>
</data>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bnHome" //above bottom navigation
>
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:id="#+id/rlTopLayout"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:layout_alignParentTop="true"
android:background="#color/white"
android:orientation="horizontal"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ivHomeLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/_minus15sdp"
android:src="#mipmap/launcher_logo" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tvHomeTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_toEndOf="#+id/ivHomeLogo"
android:layout_toRightOf="#+id/ivHomeLogo"
android:text="#string/app_name"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/_16ssp"
android:textStyle="bold" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ivHomeSurprise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/ivHomeSearch"
android:layout_toStartOf="#id/ivHomeSearch"
android:paddingBottom="#dimen/_13sdp"
android:paddingTop="#dimen/_13sdp"
android:src="#mipmap/surprise_icon_blue" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ivHomeSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="#dimen/_10sdp"
app:srcCompat="#drawable/ic_search_grey" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/flHomeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bnHome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" // align parent bottom true
app:itemBackground="#color/white_smoke"
app:itemIconTint="#color/bnv_color_state"
app:itemTextColor="#color/bnv_color_state"
app:menu="#menu/bottom_navigation_main"
app:onNavigationItemSelected="#{(item)->vm.onNavigationItemSelected(item)}" />
</RelativeLayout>
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/clpb_progress"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="#{vm.isLoading}" />
</FrameLayout>

Good a better solutions without having to hardcode the bottomView
You can put it inside a ConstraintLayout and make the height of the content 0dp and also set it's bottomToTop="#id/bottomViewId" or whatever is the Id you put to the bottomViewNavigator.
Here is an example.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".StartActivity">
<fragment
android:id="#+id/nav_controller"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/colorPrimary"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

/Try to replace your code with this/
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/user_app_bar"/>
<FrameLayout
android:id="#+id/fragment_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="58dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchorGravity="bottom|end"
app:layout_anchor="#id/app_bar"
app:srcCompat="#drawable/ic_edit_white_24px" />
<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="?android:attr/windowBackground"
app:menu="#menu/navigation"
app:itemTextColor="#color/colorPrimaryDark"
app:itemIconTint="#color/colorPrimaryDark"
/>
</android.support.design.widget.CoordinatorLayout>

add this line in your BottomNavigationView
android:background="?android:attr/windowBackground"
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/app_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:menu="#menu/app_navigation" />