Develop Reference

Android UI - dynamic button alignment change

I have following xml
<ConstraintLayout>
<NestedScrollView>
<ConstraintLayout>
<RecycleView/>
</ConstraintLayout>
</NestedScrollView>
<Button BottomTo_BottomOf = parent/>
</ConstraintLayout>
When I load the screen that I want the button to be stick at the screen bottom.
I am loading some elements dynamically (based on user action) in the recycleview and once the recycleview has elements more then the screen size then I want the button alignment to be changed from screen bottom to the end of the content and visible once user scroll through all the contents

You need to add below tag to the button -
app:layout_constraintBottom_toBottomOf="parent"

Add these attribute to Button:
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
Add these attribute to NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/bottomButtonId" <--Id of bottom button-->
For reference try this 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">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button6">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
tools:listitem="#layout/imagepost_buttons"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How do I constrain components that are a direct children of CoordinatorLayout to components inside a ConstraintLayout?

I am trying to align a fab on the horizontal divider. At the same time I need the fab and CircularRevealLinearLayout to be direct children of the CoordinatorLayout. If they are not direct children, the fab will not animate. I tried to place the CoordinatorLayout within the ConstraintLayout and constrain it to the horizontal divider but it would not work.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
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/players_container"
android:layout_width="500dp"
android:layout_height="600dp">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.circularreveal.CircularRevealLinearLayout
android:id="#+id/circular_reveal"
android:layout_width="300dp"
android:layout_height="500dp"
android:elevation="10dp"
android:visibility="invisible"
app:layout_constraintTop_toTopOf="#id/edit_btn"
app:layout_constraintEnd_toEndOf="#id/edit_btn"
android:background="#color/color_secondary"
app:layout_behavior="com.google.android.material.transformation.FabTransformationSheetBehavior"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/edit_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit_black_24dp"
app:layout_constraintHorizontal_bias=".95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/horizontal_divider"
app:layout_constraintBottom_toBottomOf="#id/horizontal_divider"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/image_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/horizontal_divider"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/teamBackground"
android:layout_width="match_parent"
android:layout_height="400dp"
android:src="#drawable/team_golfball"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/image_layout"
app:layout_constraintEnd_toEndOf="#id/image_layout"
app:layout_constraintTop_toTopOf="#id/image_layout"
app:layout_constraintBottom_toBottomOf="#id/image_layout"
android:text="Team One"
style="#style/TextAppearance.MyTheme.Headline7"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/horizontal_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black_regular"
app:layout_constraintTop_toBottomOf="#id/image_layout"
app:layout_constraintBottom_toTopOf="#id/player_card_recyclerView"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/player_card_recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent=".75"
android:overScrollMode="never"
android:padding="20dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/horizontal_divider"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</com.google.android.material.card.MaterialCardView>
what I want:

Please add -
app:layout_anchor="#id/teamBackground"
app:layout_anchorGravity="bottom|end"
in the FloatingActionButton.
layout_anchor is the anchor view that this view should position relative to.
layout_anchorGravity is the position relative to an anchor, on both the X and Y axes, within its parent's bounds. Here I use bottom and end as you want to share your image.
Full code will be -
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/edit_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit_black_24dp"
app:layout_constraintHorizontal_bias=".95"
app:layout_anchor="#id/teamBackground"
app:layout_anchorGravity="bottom|end"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/horizontal_divider"
app:layout_constraintBottom_toBottomOf="#id/horizontal_divider"
app:layout_constraintEnd_toEndOf="parent"/>
Please check out the layout_height of ImageView. It should be 0dp instead of 400dp.

How toolbar and fragment background to use one gradient color android kotlin

I have a problem with creating screen with one gradient color. I have activity which contains toolbar and container which hold fragments.
activity.xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/main_blue_gradient"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/toolbarTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/backArrowBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="16dp"
android:src="#drawable/back_arrow_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="16dp"
android:text="#string/create_resume"
android:textColor="#color/main_white"
android:textSize="20sp" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:id="#+id/contentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
</RelativeLayout>
The problem comes when i replace container with fragment which has the same color ->
android:background="#drawable/main_blue_gradient
the result is two different gradient colors:

You should make your toolbar transparent and make it overlap the contentContainer. Then in your fragment, you should add a top padding equal to the toolbar height.

ConstraintLayout make cell items fit screen viewport

I am trying to create a screen which should look like this
But when I create the view using the XML code as per 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:id="#+id/fb_constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="me.buddy.buddy.ui.BenefitsActivity$BenefitsFragment">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_animals"
android:src="#drawable/animal_love"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/fb_meal_data"
app:layout_constraintBottom_toTopOf="#id/fb_environment"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_meal_data"
android:src="#drawable/food"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/fb_animals"
app:layout_constraintBottom_toTopOf="#id/fb_health"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_environment"
android:src="#drawable/environment"
app:layout_constraintTop_toBottomOf="#id/fb_animals"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/fb_health"
app:layout_constraintBottom_toTopOf="#id/fb_hunger"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_health"
android:src="#drawable/health"
app:layout_constraintTop_toBottomOf="#id/fb_meal_data"
app:layout_constraintBottom_toTopOf="#id/fb_section_label"
app:layout_constraintLeft_toRightOf="#id/fb_environment"
app:layout_constraintRight_toRightOf="parent"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_hunger"
android:src="#drawable/bowl"
app:layout_constraintTop_toBottomOf="#id/fb_environment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/fb_section_label"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_section_label"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
app:layout_constraintTop_toBottomOf="#id/fb_health"
app:layout_constraintLeft_toRightOf="#id/fb_hunger"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
I am getting a screen like below in my app
Do note that this layout is inside a fragment of an activity as depicted in the tools tag in the xml. Hence the additional floating action button and the back arrow in the actual layout.
However what I am not able to understand is why is icon of the food bowl getting pushed below the visible screen space in the actual layout.
Any resolution to this issue? I would like to avoid using Scrollview as much as possible.
For reference, XML Code of parent activity is attached below
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="me.buddy.buddy.ui.BenefitsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/ab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/ab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/ab_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/ab_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>
Java code for adding fragment to main activity as per below:
First the parent class:
setContentView(R.layout.activity_benefits);
Toolbar toolbar = (Toolbar) findViewById(R.id.ab_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.ab_container);
mViewPager.setAdapter(mSectionsPagerAdapter);
Then inside Fragment class:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_benefits_dashboard, container, false);
return rootView;}

The problem you are trying to solve is easily accomplished using ConstraintLayout Guidelines.
You just define 2 horizontal guidelines: one at 33%, the other one at 66%.
Then all you have to do, is to position your views relative to these guidelines.
Here's a skeleton implementation of your screen:
<?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:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#53d94f"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#d9c74f"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#4f68d9"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/view4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline" />
<View
android:id="#+id/view4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#d95a4f"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view3"
app:layout_constraintTop_toTopOf="#id/guideline" />
<View
android:id="#+id/view5"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#4fd4d9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/view6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline2" />
<View
android:id="#+id/view6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#c94fd9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view5"
app:layout_constraintTop_toBottomOf="#+id/guideline2" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.66" />
</android.support.constraint.ConstraintLayout>
Here's the output:

The Toolbar in your Main Activity pushes down the ViewPager. The AppBarLayout is mainly used in a Tabbed Layout for using a TabLayout. If you are using a TabLayout inside the AppBarLayout, the Toolbar will hide automatically after launching the activity and your ViewPager will occupy the full window.
The Solution:
Remove the whole AppBarLayout with Toolbar from your Activity and also remove the NoActionBar theme from Activity manifest
Or, don't use CoordinatorLayout for your parent activity.

Using ListView inside ConstraintLayout

I have read on Android Developers that ConstraintLayout can be used to design a responsive layout for an application. There is a parent ConstraintLayout which houses a toolbar and two other ConstraintLayouts. The first child ConstraintLayout is going to act as empty view for my ListView. The second ConstraintLayout holds my listview and a floating action button. Currently, the the listview appears under the Toolbar, rather than below it. Also as seen in the screenshot, the floating action button appears outside visible area.
See the screenshot below:
And this is the app layout when the list is empty:
This is the code for 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"
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
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:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toBottomOf="#id/toolbar"
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/tv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/list_is_empty"
android:textSize="#dimen/large_text"
android:textStyle="bold"
/>
<ImageView
android:id="#+id/iv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tv_empty_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:contentDescription="#string/list_is_empty"
android:src="#drawable/emptybox" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/main_area"
android:layout_marginTop="50dp"
android:layout_marginBottom="?actionBarSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintBottom_toBottomOf="parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
android:layout_marginLeft="#dimen/margin_side"
android:layout_marginStart="#dimen/margin_side"
android:layout_marginRight="#dimen/margin_side"
android:layout_marginEnd="#dimen/margin_side"
android:layout_marginTop="?attr/actionBarSize"
/>
<android.support.design.widget.FloatingActionButton
android:layout_below="#+id/listview"
android:id="#+id/fab"
android:layout_width="#android:dimen/notification_large_icon_width"
android:layout_height="#android:dimen/notification_large_icon_height"
android:layout_gravity="end|bottom"
android:src="#drawable/plus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

While using ConstraintLayout you have to add constraints for 'constraintTop',constraintRight,constraintBottom,constraintLeft or constraintStart and constraintEnd. only if you constraint all your four sides the constraint layout (or Constraint Start or End with other References) works well. Otherwise the layout will not work correctly
For Further Reference https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0
https://developer.android.com/training/constraint-layout/index.html

There are a couple of things that you can improve with the XML and make the design easier.
First, the main layout will match the screen, to have the preview correctly simulate that, you can set its width/height to match_parent
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
Then, Android Studio should be giving you warnings/errors and saying The view is not constrained horizontally/vertically. In ConstraintLayout, you have to use constraints to specify how your views are placed. If you don't, by default they will position at 0/0 and most probably will look different when it runs on the device:
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp" />
Now, you should be able to that the main_area overlaps with the toolbar. To fix it, you can change main_area height to match the constrains:
android:id="#+id/main_area"
android:layout_height="0dp"
You should be able to obtain a design similar to what you intended.

Here is your desired result, I've made some changes like margins, src just to make it work in my studio, so you'll have to choose whatever you were using, just replace mine with your src's and margins etc...
<?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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toBottomOf="#+id/toolbar"
android:id="#+id/empty_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/tv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:text="list_is_empty"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:id="#+id/iv_empty_view"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintTop_toBottomOf="#+id/tv_empty_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#fff222" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/main_area"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ListView
android:id="#+id/listview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.design.widget.FloatingActionButton
android:layout_marginEnd="30dp"
android:layout_marginBottom="30dp"
android:id="#+id/fab"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Here's the output:

I was also facing the same issue.
I made a mistake of keeping layout_width of ListView as fixed width. I changed it to match_constraint and it's coming correctly without any cut.
For height I was facing similar issue so I changed it to match_constraint and it worked.