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>

Translucent overlay shows different effects on different views

I have an AppBarLayout, LinearLayout and a BottomNavigationView. I want to add a translucent white overlay above all of them but i don't know why i get this slightly grey color above my AppBarLayout and LinearLayout. Is this because of the different elevations the views have? Is it possible to get the same effect it does on my BottomNavigationView on my two other layouts without changing their elevations?
Without Overlay
With Overlay
activity_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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/appBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="20sp"
android:layout_centerInParent="true"/>
<ImageButton
android:id="#+id/buttonMenu"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/ic_menu"
android:layout_centerVertical="true"
android:layout_margin="16dp"/>
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/appBar"
app:layout_constraintBottom_toTopOf="#id/bottomNavigation"
android:id="#+id/linearLayoutContents">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum"
android:textSize="32sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_margin="24dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:text="#string/content"
android:textColor="#android:color/darker_gray"
android:textSize="16sp"/>
</LinearLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_nav_menu"
android:id="#+id/bottomNavigation"
android:background="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/overlay"
android:background="#CCFFFFFF"
android:elevation="8dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Using elevation attribute for sibling views causes views to hide each other based on the z-order you gave them. To overcome this issue I would change my layout hierarchy to a non-flat state which is kind of a dirty approach considering the ConstraintLayout purpose (flat view hierarchy). If you found a better way feel free to share it.
So to do that move your overlay out of its parent and remove the elevation:
activity_main.xml
<?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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/overlay"
android:background="#CCFFFFFF"/>
</FrameLayout>

FloatingActionBar hidden under bottom navigation bar

My fragment layout contains a CoordinatorLayout with a FloatingActionButton. The parent activity also contains a CoordinatorLayout with a PageView that brings in the fragment. The problem I have is that the FAB sits under the navigation bar instead of above it. It also moves up and down as I scroll the associated RecyclerView, whereas I want it to remain fixed. Here's the XML layout code for the activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="uk.ac.aber.dcs.cs31620.faaversion4.ui.FAAMainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_main" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:itemTextColor="?android:textColorPrimary"
app:itemIconTint="?colorPrimaryDark"
app:menu="#menu/menu_nav" />
</android.support.v4.widget.DrawerLayout>
Here's the code for the toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"/>
Finally, here's the code for the fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="uk.ac.aber.dcs.cs31620.faaversion4.ui.cats.CatsFragment">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:columnCount="2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/breeds_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="50"
android:layout_row="0" />
<Spinner
android:id="#+id/gender_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="50"
android:layout_row="0" />
<Spinner
android:id="#+id/age_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="50"
android:layout_row="1" />
<TextView
android:id="#+id/proximity_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="50"
android:layout_row="1"
android:text="#string/distance"
android:textAppearance="#style/MyTextAppearance" />
</GridLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/cat_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:scrollbars="vertical"
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_toBottomOf="#+id/gridLayout" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_add_white_24dp"
android:layout_gravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
As a workround I put a layout_MarginBottom on the FAB of 64dp but although it displayed it still moved up and down as the tab bar collapsed. Also, a generated Snackbar was also hidden under the bottom navigation bar. All the examples I've seen have the FAB and coordinator layout at the activity level, and without nesting of a further coordinator layout. Perhaps the only option is to put the FAB in the activity layout and access it from the fragments (e.g. hid it when not needed)? Thanks.

If you are going to use a ConstraintLayout you should think about harnessing the power of it so that your UIs act accordingly. ConstraintLayouts help you remove the nesting of widgets and layouts. It makes them flatter, more readable, reducing code and making your app smoother.
<?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"
tools:context="uk.ac.aber.dcs.cs31620.faaversion4.ui.FAAMainActivity">
<Spinner
android:id="#+id/breeds_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#id/gender_spinner"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/gender_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/breeds_spinner"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/age_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#id/gender_spinner"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/breeds_spinner" />
<TextView
android:id="#+id/proximity_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="#string/distance"
android:textAppearance="#style/MyTextAppearance"
app:layout_constraintBottom_toBottomOf="#id/age_spinner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/age_spinner"
app:layout_constraintTop_toBottomOf="#id/gender_spinner" />
<android.support.v7.widget.RecyclerView
android:id="#+id/cat_list"
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_toBottomOf="#id/age_spinner" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#drawable/ic_add_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

align view on top and buttons in bottom

I need to achieve the following view
I tried using constraint layout:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/segmentedButton">
</FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</Buttons>
</android.support.constraint.ConstraintLayout>
It works well when there are many items, but when there are just 2-3, it shows them in the middle.
Also, I tried using LinearLayout but no luck.

you can use RelativeLayouttoo to get your desired results. By using the below code you can show the items on top if they are 2 or 3 left.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/segmentedButton"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/segmentedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>

try with linear layout, weight property should push the button to align at the end of parent
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_weight="1"
>
</FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
>
</Buttons>
</LinearLayout>
I supposed here that Buttons stand for a custom Button you made

Just add Top Constraint to your FrameLayout, should fix your issue.
Your final layout will be like this:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/segmentedButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"></FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"></Buttons>
</android.support.constraint.ConstraintLayout>

<?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">
<FrameLayout
android:id="#+id/segmentedFrame"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/segmentedButton"
android:background="#drawable/bg_scan_edittext">
</FrameLayout>
<Button
android:id="#+id/segmentedButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/segmentedFrame"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</Button>
</android.support.constraint.ConstraintLayout>

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.