Develop Reference

Content overlapping when using Toolbar with static and scrolling content

My app uses a regular toolbar with a drawer for navigation. It consists of fragment replacing to display different views while utilizing a single activity. However, when I try to display content using any fragment it overlaps with my toolbar.
What I have done to fix this is set the margin-top of all my fragments to the height of my toolbar. This fixes it but not when scrolling as seen here:
I have tried many different options but without success. Now for the code.
Going from the top I have my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity"
android:id="#+id/drawer">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/drawer_toolbar" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/content_main" />
<com.google.android.material.navigation.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navigation_view"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/drawer_header"
android:layout_gravity="start"
android:fitsSystemWindows="true" />
</androidx.drawerlayout.widget.DrawerLayout>
As you can see I include the toolbar and below it my content_main.xml.
drawer_toolbar.xml
<?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="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red_500"
android:theme="#style/ThemeOverlay.AppCompat.Dark"/>
</LinearLayout>
And the content_main.xml file.
<?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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container_fragment" />
</LinearLayout>
Within this file, there is a <FrameLayout> which I use as a container to swap fragments in and out.
As stated before all my fragments have this issue, but at the moment it only shows with my fragment that scrolls content shown below in my fragment_write.xml. This is the fragment shown above in the gif:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView android:layout_width="match_parent"
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_height="match_parent"
android:fillViewport="true"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/mtrl_toolbar_default_height"
tools:context=".ui.journalentries.WriteFragment">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="#string/date"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/journal_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/journal_placeholder_date"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
<TextView
android:id="#+id/journal_label_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="#string/journal_label_title"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/journal_date" />
<EditText
android:id="#+id/journal_write_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autofillHints="false"
android:ems="10"
android:hint="#string/journal_placeholder_title"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/journal_label_title" />
<TextView
android:id="#+id/journal_label_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="#string/journal_label_text"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/journal_write_title" />
<EditText
android:id="#+id/journal_write_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autofillHints="false"
android:ems="10"
android:gravity="start|top"
android:hint="#string/journal_placeholder_text"
android:inputType="textMultiLine"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/journal_label_text" />
<Button
android:id="#+id/save_entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/journal_write_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
I'm not sure what I'm missing. Any help is much appreciated.

Issue has been fixed. It did not necessarily have anything to do with my toolbar, but it was an issue with the way my NestedScrollView was setup in the fragment_write.xml file.
I had the fix using android:layout_marginTop="#dimen/mtrl_toolbar_default_height" on the nested ConstraintLayout, while it should have been on the NestedScrollView itself.
The resulting fragment_write.xml file looks something like this:
<androidx.core.widget.NestedScrollView 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:layout_marginTop="#dimen/mtrl_toolbar_default_height"
android:fillViewport="true"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".ui.journalentries.WriteFragment">
(...)
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

steady distance between LinearLayout items and recyclerview

I'm looking for a way to make the LinearLayout containing two buttons be steady compared to the recyclerview. In particular i'm trying to place it like this but with one more button .
Here is my xml code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.a.TSport">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteX="-26dp"
tools:layout_editor_absoluteY="338dp">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.078" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Button" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="56dp"
android:layout_height="62dp"
android:layout_gravity="right"
android:layout_marginLeft="200dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.929"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.942"
app:srcCompat="#drawable/ic_add_black_24dp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem comes when i have two buttons and i add some items : for each added item the linearlayout containing two buttons moves down until it disappear.

first, remove LinearLaypit and use ConstraintLayout.
it's easy
<?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:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="16dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="16dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_launcher_background" />
</androidx.constraintlayout.widget.ConstraintLayout>
but only LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:weightSum="10">
<com.google.android.material.appbar.AppBarLayout
android:layout_weight="0.75"
android:layout_height="0dp"
android:layout_width="match_parent" >
<androidx.appcompat.widget.Toolbar
android:background="?attr/colorPrimary"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_weight="8.25"
android:background="#android:color/transparent"
android:id="#+id/recyclerView"
android:layout_height="0dp"
android:layout_width="match_parent"
android:padding="4dp"
android:scrollbars="vertical" />
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="match_parent"
android:weightSum="10"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_gravity="left"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button" />
<View
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="10dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:clickable="true"
android:id="#+id/floatingActionButton"
android:layout_gravity="right"
android:layout_height="62dp"
android:layout_width="0dp"
android:layout_weight="2"/>
</LinearLayout>
</LinearLayout>

If you want to place both buttons at bottom than you have to make 2 changes
First you need to add android:layout_weight="1" and second replace android:layout_height="wrap_content" with android:layout_height="0dp" for your RecyclerView. This will give full size to your recyclerview until bottom views are visible.
You complete recyclerview should look like this:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
/>
NOTE: Here from RecyclerView I have removed constraint, because its parent is LinearLayout, so need to use constraint here.
OPTIONAL: Also I notice that you have used ConstraintLayout and it has only 1 child LinearLayout and also LinearLayout has not any constraint given, So if ConstraintLayout has not required you should remove it and only use LinearLayout as parent.

Arrange a BottomNavigationView, a FAB, and a FrameLayout in a CoordinatorLayout and make it work with Snackbar

I want to place a FrameLayout for hosting Fragments, a BottomNavigationView and a FAB inside a CoordinatorLayout. I would like to display a Snackbar over the BottomNavigationView and FAB to move up and down to accommodate the Snackbar. I have come up with the following layout but I am unable to get Snackbar and FAB behavior correctly.
<?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/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".landingpage.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/fragment_cont"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<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_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_main_activity_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/extended_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="72dp"
android:contentDescription="#string/cont_desc"
android:text="#string/chat"
app:icon="#drawable/ic_baseline_chat_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
If I set LayoutParams like in this post then that margin 72dp margin is also displayed throwing FAB way up in the layout. If I don't use the margin the FAB will be stacked over the BottomNavigationView. I can use addCallback to set FAB margins programattically. Then also it will jump and then align itself to the right position. Overall it is not a good experience UX wise.

I would like to display a Snackbar over the BottomNavigationView
and FAB to move up and down to accommodate the Snackbar. I have come
up with the following layout but I am unable to get Snackbar and FAB
behavior correctly.
You get a bad behavior because you're trying to achieve something which is not common or maybe, not implemented this way by using BottomNavigationView and FAB together. It's actually more common to use FAB & BottomAppBar at the bottom of a layout.
Then also it will jump and then align itself to the right position.
Overall it is not a good experience UX wise.
Although it's not a good experience for users from a UX view, however, here are the approaches I may suggest:
Best approach : Using another CoordinatorLayout inside LinearLayout (Supported the FAB animation):
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"
android:id="#+id/main_layout"
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.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="Test" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/fragment_cont"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/SnackBar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/extended_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:text="Chat"
android:textColor="#color/white"
app:icon="#drawable/ic_baseline_send_24"
app:iconTint="#color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
app:menu="#menu/escrow_menu" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And in Kotlin side:
extended_fab.setOnClickListener {
val snack: Snackbar = Snackbar.make(SnackBar, " Successfully ...!", Snackbar.LENGTH_SHORT)
snack.show()
}
2. BottomAppBar & FAB & setAnchorView() method without FAB animation
Anchored to FAB
Code:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.core.widget.NestedScrollView
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- your FrameLayout maybe -->
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="SHOW SnakeBar"
app:layout_anchor="#+id/content_layout"
app:layout_anchorGravity="center" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="Test" />
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#id/bar" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:backgroundTint="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:textColor="#FFFFFF"
android:visibility="invisible">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
</LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3. Using FAB - BottomNavigationView - ConstraintLayout without FAB animation
Code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorPrimary"
app:elevation="10dp"
app:layout_constraintBottom_toTopOf="#id/navigation"
app:layout_constraintLeft_toRightOf="#id/navigation"
app:layout_constraintRight_toLeftOf="#id/navigation"
app:layout_constraintTop_toBottomOf="#id/navigation"
app:layout_constraintTop_toTopOf="#id/navigation"
app:layout_insetEdge="bottom" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimaryDark"
android:visibility="visible"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/escrow_menu" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="290dp"
android:layout_marginBottom="485dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Fragment content is hidden behind BottomNavigationView when scrolling

I've researched through this quite heavily and am at a loss on what to do - I have some content in a fragment that is being clipped off by the BottomNavigation bar in the activity and am not sure what to do. I've tried adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to the NestedScrollView but the bottom piece of the content (the names of the locations) is still being cut off - there's probably an easy fix for this but I can't figure it out. The XML for my main activity and the "home" fragment is as follows:
activity_home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#color/navbarBackground"
app:menu="#menu/bottom_nav_menu" />
</LinearLayout>
home_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/home_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:id="#+id/tokyo_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/main_screen_placeholder" />
<ImageView
android:id="#+id/airplane_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="#+id/tokyo_placeholder"
app:layout_constraintLeft_toLeftOf="#+id/tokyo_placeholder"
app:layout_constraintRight_toRightOf="#+id/tokyo_placeholder"
app:layout_constraintTop_toTopOf="#+id/tokyo_placeholder"
app:srcCompat="#drawable/icons8_airplane_48"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="286dp"
android:layout_marginBottom="#dimen/app_bar_height"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/bottom_nav"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tokyo_placeholder"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/destination_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/featured_destinations_headline"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/featured_destinations_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/destination_headline" />
<TextView
android:id="#+id/saved_trips_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/featured_destinations_recycler_view"
android:fontFamily="sans-serif"
android:text="#string/saved_trips"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/saved_trips_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/saved_trips_headline" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:background="#fff"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
As an example to show what I mean, here is the content when the navigation bar is moved out of the way and here is the content with the bar in the way. I'm thinking that the problem is some sort of margin/padding issue, but can't quite figure out what to fix.
Edit: I've create a repository with the relevant code (and a workable emulator example) here - please be aware that the code is written in Kotlin, but I don't imagine the issue lies witihn any of the actual code, but more within the layout

I'm not sure what is the expected behavior, I cannot understand that just by reading your question. Having applied this patch, which just includes home_fragment.xml layout changes:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/home_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<FrameLayout
android:id="#+id/header_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/tokyo_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:srcCompat="#drawable/main_screen_placeholder"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/airplane_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#drawable/circle_background"
app:srcCompat="#drawable/icons8_airplane_48"
tools:ignore="ContentDescription" />
</FrameLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
android:paddingLeft="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header_container">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/destination_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/featured_destinations_headline"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/featured_destinations_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/destination_headline"
app:layout_constraintBottom_toTopOf="#id/saved_trips_headline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/destination_headline" />
<TextView
android:id="#+id/saved_trips_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="#string/saved_trips"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/featured_destinations_recycler_view" />
<android.support.v7.widget.RecyclerView
android:id="#+id/saved_trips_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/app_bar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/saved_trips_headline" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
Then you'll get this output:

#Tai M.
The problem seems to be the hardcoded height of the NestedScrollView. Since you are already using ConstraintLayout, you can easily lay this view without having to add another Relative layout.
If you want to have the Header images one on top of the other, please wrap those in a FrameLayout. Assign an id to the container and add:
app:layout_constraintTop_toBottomOf="#+id/headerImageContainer"
to the NestedScrollView.
Then you can probably get rid of the RelativeLayout and replace it with another ConstraintLayout to structure the rest of the views using constraints only.
Also, by material design definition, the height of the BottomNavigationView is 56dp which you can assign directly rather than making it wrap content in the
activity_home.xml
<ConstraintLayout ...>
<FrameLayout ...>
<ImageView .../>
<ImageView .../>
</FrameLayout>
<NestenScrollView ... wrap_content>
<ConstraintLayout ...>
<TextView .../>
<RecyclerView .../>
<!-- Assign constraints accordingly -->
<TextView .../>
<RecyclerView .../>
</ConstraintLayout>
</NestenScrollView>
</ConstraintLayout>
Hope this helps.

How to include constraint layout to another constraint layout and set constraint between each

I'm using constraintLyout v 1.0.1.
I would like to include in my xml a sub ConstraintLayout corresponding to a part of my global layout (which itself is a ConstraintLayout). I split the layout in two xmls in order to use this sub part elsewhere
I tried this but I have no control on where to place my sub constraint layout in the parent. I wonder if I have to place everything in the same xml file or if their is a solution to use separate files.
tmp_1.xml
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LABEL1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/label_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LABEL2"
app:layout_constraintStart_toStartOf="#id/label"
app:layout_constraintEnd_toEndOf="#id/label"
app:layout_constraintTop_toBottomOf="#id/label"
android:layout_marginTop="16dp"
/>
<include layout="#layout/tmp_2" />
</android.support.constraint.ConstraintLayout>
tmp_2.xml
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/view_80"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80th element"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="10dp"
android:layout_marginStart="12dp"
/>
</android.support.constraint.ConstraintLayout>
The result is this
But i want it to be this
I tried this but it does not work
<include
app:layout_constraintTop_toBottomOf="#id/label_2"
layout="#layout/tmp_2" />

Actually found a solution.
Android Studio does not autocomplete constraintLayout parameters in an include tag but they do have an impact on it as long as you give that include a size.
<include
layout="#layout/tmp_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/label_2"
/>

To inlude one constraint layout and constraint it according to one's need, one will have to give width and height to the included layout like this :
<include
android:id="#+id/shop_card_layout"
layout="#layout/shop_card_one"
android:layout_height="wrap_content"
android:layout_width="300dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="#id/heading_tv"
app:layout_constraintTop_toBottomOf="#+id/heading_tv" />

You could avoid the ConstraintLayout constraints at the include item. I just <include/> it as it is.
MainActivity Layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<include
android:id="#+id/toolbarLayout"
layout="#layout/layout_toolbar" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="CONTENTS"
app:layout_constraintBottom_toBottomOf="#+id/footerLayout"
app:layout_constraintEnd_toEndOf="#+id/footerLayout"
app:layout_constraintStart_toStartOf="#+id/footerLayout"
app:layout_constraintTop_toTopOf="#+id/footerLayout" />
<include
android:id="#+id/footerLayout"
layout="#layout/layout_footer" />
</android.support.constraint.ConstraintLayout>
ToolBar Layout file:
<android.support.constraint.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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbarTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/hidden"
android:textColor="#android:color/white"
tools:layout_editor_absoluteX="192dp"
tools:layout_editor_absoluteY="19dp" />
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>

To include one constraint layout to other contraint layout to use one more contrsaint layout to each parent of include layout... Like below:
<android.support.constraint.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="#drawable/new_landing_bg"
tools:context=".activity.DesignTestActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<include layout="#layout/common_footer_layout" />
</android.support.constraint.ConstraintLayout>
this is work on my xml layout. Enjoy code.

We can use a layout tag if using Constraint layout. For Linear layout we can directly include the layout.
I had a different requirement where i am having a tab view below toolbar. I had set toolbar elevation to 0dp and added a view file below the tab view so that both the tab view and toolbar looks as a single unit.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs_container"
style="#style/tab_layout_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:tabGravity="fill"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/text_black_app"
app:tabTextColor="#color/txt_gray_contact_lbl" />
<LinearLayout
android:id="#+id/layout_elevation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tabs_container">
<include layout="#layout/gray_view_for_elevation" />
</LinearLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="100"
app:layout_constraintTop_toBottomOf="#+id/layout_elevation_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
This code is for Linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
style="#style/tab_layout_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="#dimen/dp_4"
app:tabGravity="fill"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"/>
<include
android:id="#+id/layout_elevation_view"
layout="#layout/gray_view_for_elevation" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_gray" />
</LinearLayout>
My elevation view file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="wrap_content"
android:layout_height="#dimen/dp_1"
android:background="#80bbbbbb" />
<View
android:layout_width="wrap_content"
android:layout_height="#dimen/dp_1"
android:background="#60bbbbbb" />
<View
android:layout_width="wrap_content"
android:layout_height="#dimen/dp_1"
android:background="#50bbbbbb" />
Hope this will help.