I am working for the first time with NavigationBar widget and I cannot set the FrameLayout not to go behind the NavigationBar.
I've tried really everything: to set both in a RelativeLayout (NavigationBar disappears) , every setting I've found here around StackOverflow but I didn't succeed.
Here is my code:
<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="mypackage.myActivity"
android:background="#color/background_activities">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
app:layout_constraintTop_toTopOf="parent"
android:fitsSystemWindows="true"
>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/color_NavigationBar"
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/navigation" />
</android.support.constraint.ConstraintLayout>
Hope someone will help me to figure out where I made the mistake.
Thank you very much
EDIT
Now the navigation bar started to change dimension while clicked (it looks like the whole layout is "renderized" again) and now it get stucks in such a position
Try this, set the frame layout constraints to clip completly to the parent, except the bottom to clip to the navigation's top, then set the height and width to 0dp so it can grow according to the constraints:
<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="mypackage.myActivity"
android:background="#color/background_activities">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="0dp"
android:layout_height="0dp"
android:animateLayoutChanges="true"
app:layout_constraintBottom_toTopOf="#+id/navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/color_NavigationBar"
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/navigation" />
</android.support.constraint.ConstraintLayout>
Related
As one can see in image, RecyclerView items are visible through Standard/Persistent BottomSheet and collapsing/expanding of BottomSheet is also not happening in Standard/Persistent BottomSheet. RecyclerView items are scrollable but when I do any kind of activity in Standard/Persistent BottomSheet, it directly scrolling the RecyclerView item behind this Standard/Persistent BottomSheet.
Note: Background color used in BottomSheet is solid. It's not transparent.
I'm wondering how to solve this issue?
Here's the code snippet ->
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:id="#+id/layout_container_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/layout_container_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<include
android:id="#+id/included_layout_standard_bottom_sheet"
layout="#layout/layout_standard_bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_standard_bottom_sheet.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"
android:id="#+id/layout_container_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/thumbnail"
android:layout_width="?actionBarSize"
android:layout_height="?actionBarSize"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/thumbnail"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.slider.Slider
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/summary" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see in the image your bottom sheet is behind the recycler view. To change that you have to change the order of recyclerview and coordinatelayour in your activity_main.xml
You can try by changing the order like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout_container_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/layout_container_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<include
android:id="#+id/included_layout_standard_bottom_sheet"
layout="#layout/layout_standard_bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Since both recycler view and CoordinatorLayout are match_parent, There order decide which is above to another.
I'm very new to Android Studio and thre's this whitespace that I haven't defined at the top of my app when I launch it, but not in the preview screen in Android Studio:
I have no idea where it's coming from, as the top of my definition XML doesn't define this whitespace:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/containerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
Below this is just two more LinearLayouts inside the one shown above. I've tried just adding text and the whitespace still appears. I also haven't added anything in code for this to appear.
Any help / ideas would be appreciated!
Edit: Below is the 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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
In activity_main.xml, try removing the line:
android:paddingTop="?attr/actionBarSize"
This adds padding around the ConstraintLayout content equal to the height of the action bar, which is not needed in this case.
TL;DR
I want to center align an ImageButton in a ScrollView and I'm quite happy with the result in portrait mode. However, I can't say the same for landscape mode and any help would be greatly appreciated.
But let me explain
I'm using two layout files here; the first one is the one I use for my MainActivity class, called activity_main.xml. The second one (called fragment_main.xml) gets nested into into the activity_main.xml when the MainActivity loads the MainFragment.
The preview for fragment_main.xml looks quite promising for portrait and landscape mode:
fragment_main.xml in landscape
fragment_main.xml in portrait
And the rendering of activity_main.xml in portrait mode looks just how I want it to look:
activity_main.xml in portrait
However, activity_main.xml in landscape mode looks odd and I can't figure out why:
activity_main.xml in landscape
Here is the XML of activity_main.xml with fragment_main.xml merged into it as a child of the ScollView:
<?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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content_frame"
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="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Content of fragment_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingStart="50dp"
android:paddingEnd="50dp"
tools:context=".MainFragment">
<ImageButton
android:id="#+id/overlay_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#null"
android:contentDescription="#string/start_speedometer"
android:scaleType="fitCenter"
android:src="#drawable/btn_circle_green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/overlay_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:text="#string/start_speedometer"
android:textColor="#color/white"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="#menu/nav_drawer_view"
app:headerLayout="#layout/nav_drawer_header"
app:itemIconTint="#drawable/nav_drawer_item_icon_color"
app:itemTextColor="#drawable/nav_drawer_item_text_color" />
</androidx.drawerlayout.widget.DrawerLayout>
I'm looking for a solution where I only have to make changes to fragment_main.xml (that is, everything inside the ScollView). The solution should be involving XML only.
What I've tried
I've tried fiddling with app:layout_constraintDimensionRatio (W,1:1, H,1:1), app:layout_constrainedHeight, app:layout_constraintHeight_max, layout_constraintHeight_min, many other constraints and even tried nesting the content of fragment_main.xml in other layouts, moved from ConstraintLayout to RelativeLayout, LinearLayout and FrameLayout but none of them give me the desired result and ConstraintLayout is the one that came the closest.
Possible solution
The only solution that worked so far was using app:layout_constraintWidth_default="percent" and app:layout_constraintWidth_percent="0.5" resulting in
desired look of activity_main.xml in landscape
While this might look great on a 16:9 phone it might result in the same issues as before on phones with different aspect ratio. So I'm looking for a more generic approach.
Additional details
This is the content of the drawable btn_circle_green.xml I'm using for the button:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/ic_circle_green_pressed" />
<item android:state_focused="true" android:drawable="#drawable/ic_circle_green_focused" />
<item android:state_selected="true" android:drawable="#drawable/ic_circle_green_focused" />
<item android:drawable="#drawable/ic_circle_green_default" />
</selector>
With each ic_circle_green_* being a vector asset like this with differing colors:
<vector
android:viewportWidth="300"
android:viewportHeight="300"
android:height="120dp"
android:width="120dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#color/green"
android:pathData="M150,150m-140,0a140,140 0,1 1,280 0a140,140 0,1 1,-280 0"
android:strokeWidth="5"
android:strokeColor="#color/green_light"/>
</vector>
Many thanks in advance!
After I understood that the ScrollView is the element that's causing me headaches (thanks again, #glucaio!) I found this answer and was able to solve my problem.
The ScrollView received android:fitsSystemWindows="true", the inner ConstraintLayout had its attributes for width and height switched (android:layout_width="wrap_content" and android:layout_height="match_parent"), received a paddingTop and paddingBottom (instead of paddingStart and paddingEnd) and was wrapped in a LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" />
This solution only works for landscape mode. So I'm using the one in this answer for landscape and the one from my question for portrait mode.
This is how the final XML for landscape mode looks like:
Rendered activity_main.xml
And this is the actual 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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content_frame"
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="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Content of fragment_main.xml -->
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:paddingTop="30dp"
android:paddingBottom="30dp">
<ImageButton
android:id="#+id/overlay_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#null"
android:contentDescription="#string/start_speedometer"
android:scaleType="fitCenter"
android:src="#drawable/btn_circle_green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/overlay_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:text="#string/start_speedometer"
android:textColor="#color/white"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="#menu/nav_drawer_view"
app:headerLayout="#layout/nav_drawer_header"
app:itemIconTint="#drawable/nav_drawer_item_icon_color"
app:itemTextColor="#drawable/nav_drawer_item_text_color" />
</androidx.drawerlayout.widget.DrawerLayout>
I faced with the following problem: I need to make a fragment, which height would be the same as height of the screen except bottom navigation view. Here's my 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.MainActivity">
<FrameLayout
android:id="#+id/tabs_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#111111"
app:layout_constraintBottom_toTopOf="#id/bottom_nav" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_nav_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu" />
</android.support.constraint.ConstraintLayout>
I added android:background="#111111" to see, what is the real height of fragment. Probably I thought that app:layout_constraintBottom_toTopOf="#id/bottom_nav" can help me, but unfortunately it didn't solve my problem. So, how can I deal with it?
You need to set the layout_height of the FrameLayout to 0dp if you want the height to fit your constraints.
<?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=".ui.main.MainActivity">
<FrameLayout
android:id="#+id/tabs_fragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#111111"
app:layout_constraintBottom_toTopOf="#id/bottom_nav"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="0dp"
android:layout_height="#dimen/bottom_nav_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu" />
</android.support.constraint.ConstraintLayout>
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.