Develop Reference

Android layout problem, ImageView not appearing in desired place (between two other Views)

I'm new to android development and I'm trying to make a screen (a layout) that resembles this: a spinner, and two text fields on top, a thumbnail (ImageView) just below on the left side, and a fragment container view below that I will use to show a different page. Right now I'm not looking for beautiful design, I just want to make android display it like this.
The problem is that, even though on the design tab of android studio the thumbnail is shown in the correct place, on runtime is completely wrong:
Here is the Component Tree and the layout's xml in case it's useful:
<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/activity_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoteActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:theme="#style/Theme.NoteKeeper.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/Theme.NoteKeeper.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_note" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_gravity="bottom|center">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginStart="4dp"
app:layout_constraintBottom_toTopOf="#+id/fragmentContainerView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView2"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="367dp"
android:layout_gravity="bottom|center"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:navGraph="#navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="16dp"
app:srcCompat="#android:drawable/ic_menu_camera" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
EDIT:
In the end, I had to use constraint layout like this:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoteActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarContentNoteLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:theme="#style/Theme.NoteKeeper.AppBarOverlay"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<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/Theme.NoteKeeper.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_note"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarContentNoteLayout" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include"
tools:srcCompat="#tools:sample/avatars" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#AC1A1A"
android:backgroundTint="#C51111"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_menu_camera" />
</androidx.constraintlayout.widget.ConstraintLayout>
Added tint so that the fragment view would show the borders

The problem is you are using layout_gravity in your xml code that works in some view groups like FrameLayout but it doesn't work in ConstraintLayout. And the second fact is you don't need to use nested ConstraontLayouts and one will handle All of your ui requirements. So for the first one that is AppBar you can use app:layout_constraintTop_toTopOf="parent" and for content note, you can constraint it to bottom of the appBar as well. Like this: app:layout_constraintTop_toBottomOf="#+id/appBar" and also for the image thumbnail use this: app:layout_constraintTop_toBottomOf="#+id/contentNote" together with app:layout_constraintStart_toStartOf="parent" and for the last one as fragmentContainer you can use this app:layout_constraintTop_toBottomOf="#+id/imageView".
This way all of them will be constrainted to each other and works well. And for any other constraints for them related to the parent layout, you can add their constraints as well.

Your constraints are wrong in the ImageView.
Try getting rid of the following line
app:layout_constraintTop_toTopOf="parent"
in your ImageView as this line of code is trying to pull the top of your image all the way to the top of the parent.
Lmk if that works. Otherwise, I can send you a complete layout code snippet instead.

My floating action button is not displayed properly...?

I am using TAB LAYOUT with View Pager and a BOTTOM APP BAR with a Floating Action Button for Bottom Navigation but i think my floating action button is being displayed under view pager so its looking like its being cut from above....please help me fix this
Here is my XML Code....
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_main_bg"
tools:context=".home.HomeActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bottom_navigation_bg"
app:fabCradleRoundedCornerRadius="0dp"
app:backgroundTint="#color/color_primary"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/color_primary"
app:srcCompat="#drawable/ic_plus"
app:layout_anchor="#id/bottomAppBar"
android:contentDescription="#string/add_item_to_this_destination" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#color/color_secondary"
app:tabSelectedTextColor="#color/color_secondary"
app:tabTextColor="#color/color_secondary" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager_2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/coordinator_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tab_layout">
</androidx.viewpager2.widget.ViewPager2>
</androidx.constraintlayout.widget.ConstraintLayout>
and here is what it looks like
enter image description

The issue is because of CoordinatorLayout
Solution 1:
Add
android:clipToPadding="false"
android:clipChildren="false"
in CoordinatorLayout
Solution 2:
Make CoordinatorLayout as parent layout and put all child layout in it.
Solution 3:
In view_pager_2
add
android:layout_marginBottom="?actionBarSize"
Solution 4:
Add this line to your fab
android:elevation="10dp"

Add below code to your BootomAppBar tag:
app:fabAlignmentMode="center"
app:fabCradleMargin="8dp"
So it will become:
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bottom_navigation_bg"
app:fabCradleRoundedCornerRadius="0dp"
app:backgroundTint="#color/color_primary"
app:fabAlignmentMode="center"
app:fabCradleMargin="8dp"
/>

Frame layout is not positioned properly inside ConstraintLayout

I've placed a FrameLayout inside ConstraintLayout and I think it's constrained properly. But in the app, it's not positioned properly. FrameLayout is replaced by appropriate fragment at runtime.
<?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.chapters.ChapterActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_chapter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Chapters"
app:titleTextColor="#color/White" />
<FrameLayout
android:id="#+id/chapter_fragment_container_frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="500dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_chapter"
app:layout_constraintVertical_bias="1.0" />
<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"
android:background="#color/colorPrimary"
app:itemIconTint="#color/White"
app:itemTextColor="#color/Wheat"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/chapter_bottom_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</androidx.constraintlayout.widget.ConstraintLayout>
Here's what is shown in IDE:
But this is what I get in device:
FrameLayout should be placed in-between toolbar & the bottom navigation bar, it should be done by LinearLayout/Relative one, haven't tried though.. but what's wrong with this.

Change this FrameLayout part as below:
<FrameLayout
android:id="#+id/chapter_fragment_container_frameLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:minHeight="500dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_chapter"
app:layout_constraintVertical_bias="1.0" />
The reason why it is happening is because of match_constraint. If you have defined constraint for top, bottom, start, and end you should define 0dp for height and width to View.

Change framelayout's android:layout_height property from "match_parent" to "wrap_content"

Change FrameLayout height to 0dp,
<FrameLayout
android:id="#+id/chapter_fragment_container_frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:minHeight="500dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_chapter"
app:layout_constraintVertical_bias="1.0" />

Coordinator layout - collapsing content interaction with recycler view

schema
As shown in the picture, I want my 2 views ( recycler view and collapsing content ) to be responding only to the middle grip bar ( it could be 50dp height constraint layout - for example )
Moving this bar should collapse the upper part - and make recyclerview change its height. The bar shouldn't be able to move lower than the upper part content. Recycler view should be able to scroll independently all the time.
How to make only restricted area respond to touch events?
How to make recyclerview height depend on grip position ?
Now in my case, the collapsing part is getting hidden just after i start scrolling recyclerview.
If there is not enough information, I'll add whatever required.
Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activityToDo"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.ToDoActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:hint="Note title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/noteTitle"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintEnd_toStartOf="#+id/guideline"
android:layout_marginEnd="10dp"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:inputType="text" app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:hint="Note priority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/notePriority"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="#+id/guideline"
android:layout_marginStart="10dp"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:inputType="number" app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_begin="197dp"
android:id="#+id/guideline"/>
<EditText
android:hint="Note description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/noteDescription"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintTop_toBottomOf="#+id/notePriority"
android:layout_marginTop="20dp"
android:textSize="15sp"/>
<Button
android:text="Save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/saveButton"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintEnd_toStartOf="#+id/guideline" android:layout_marginEnd="10dp"
android:layout_marginBottom="20dp" app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="10dp" app:layout_constraintTop_toBottomOf="#+id/noteDescription"/>
<Button
android:text="Clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/clearButton"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="#+id/guideline"
android:layout_marginStart="10dp" android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/noteDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<TextView
android:text="All notes"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/allNotesRecyclerView"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="#id/collapsingToolbar"
android:layout_marginTop="16dp"
android:textSize="15sp"/>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
GitHub Repo

in my case like this :
add app:layout_behavior="#string/appbar_scrolling_view_behavior" on your recyclerview and look my CollapsingToolbarLayout and my Toolbar
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".myactivity.DetailWisataActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_detail"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?colorPrimary"
app:expandedTitleGravity="center_horizontal|bottom"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<ImageView
android:id="#+id/img_bg_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:scaleType="centerCrop"
android:src="#drawable/bg_beach"
app:layout_collapseMode="pin"
tools:targetApi="m" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorTransparantBlackLow" />
<ProgressBar
android:id="#+id/progress_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_detail"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarSizeLow"
android:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:title="#string/info_wisata" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
............Your recyclerview here.......
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and remove your Linearlayout.

Fisrt remove your LinearLayout from parent of recyclerview and try this:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- HEADER -->
<RelativeLayout
...
app:layout_collapseMode="parallax">
.....
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
<!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="choose item" />
-->
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Same question answer: Link

With the newest version of Android Studio (4.0 Canary 9), you can use the new MotionLayout layout type to transition between different ConstraintLayouts. The simplest solution (below) wouldn't necessarily let you change the RecyclerView height to whatever you wanted, but you could smoothly transition between two different layouts when the user swipes up or down.
In short, you would do the following:
In your build.gradle (Module: app) file, add the following line:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'
Create a new ConstraintLayout layout file that determines how all of your views should be arranged at the beginning
Convert that ConstraintLayout to a MotionLayout using the right-click menu in the layout editor
In the MotionLayout editor, add constraints to each view in the "start" and "end" layouts
In the new MotionScene XML file that was added to the XML folder in your res folder, edit the tag to look like this:
<Transition
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#id/start"
>
<OnSwipe
app:touchAnchorSide="top"
motion:touchAnchorId="#id/YOUR_GRIP_VIEW"
motion:dragDirection="dragUp" />
<KeyFrameSet>
</KeyFrameSet>
</Transition>
* In the MotionLayout Codelab, it says to use app:touchAnchorID instead of motion:touchAnchorId but that didn't work for me *
Now, when you swipe your grip view up or down, the MotionLayout can transition between states.

Overflowing layout inside constraint layout

I have two layouts inside a constraint layout.
One is reserved for the actual screens, and the other is reserved for the bottom toolbar
the problem is the actual screen is flowing under the toolbar and i want them to be next to each other.
What do I need to change in this layout ?
<?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/mainScreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:background="#ff00ff00" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation_menu" />
</android.support.constraint.ConstraintLayout>

You forget to add where should be place navigation bottom view, try this.
<FrameLayout
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:background="#ff00ff00" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainFrame"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation_menu" />

I realise this is a bit old and probably solved, but thought it was worth answering for those who stumble across it...
The problem here is that the FrameLayout is set to wrap_parent which means it will only grow as large as it needs to in order to display its content.
You can use a contraint weight to have it grow as large as it can, something 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainScreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:background="#ff00ff00" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/steel"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintTop_toBottomOf="#+id/mainFrame"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/menu_main_drawer" />
with the important part being android:layout_height="0dp" and app:layout_constraintVertical_weight="1", and also adding the suggestion posted by Hemant.

All you need to do is set the height of the frame layout to 0dp -> Constraint layout takes it at match_constraint.