Develop Reference

Why image view located on top of recycler view is not displaying?

I am trying to add an image view as a banner on top of recycler view. so in some condition I can hide (View.GONE) or to show that banner image view (View.VISIBLE). but the problem is, the banner image view will never show when I run the app, even though I have set android:visibility="visible" on the image view xml.
as you can see, I have image view with red background, but that red background image view will not displaying
how to solve this ?
the layout in my fragment is like this
and here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Fragments.Search.SearchKeywordResultFragment"
android:id="#+id/constraintLayout_search_keyword_fragment">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
tools:listitem="#layout/item_general_event"
android:id="#+id/recyclerView_keyword_search_result"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<ImageView
android:id="#+id/imageView_banner_search_keyword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#E91E63"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/recyclerView_keyword_search_result"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:src="#tools:sample/avatars[3]" />
</androidx.constraintlayout.widget.ConstraintLayout>

Because on your imageView have code line tools:src="#tools:sample/avatars[3]"
Tools function it will only show on android layout editor.
try change into real Image from bitmap or from drawable at app:srcCompat="#drawable/{your_drawable_or_mipmap_data_file}"

Just change your Recycler's TopToTop constrains to the id of the Image view and change it to TopToBottom.
For doing so you also need to declare the imageview first so you'll be able to address its Id.
Also give the banner width:match_parent
<ImageView
android:id="#+id/imageView_banner_search_keyword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#E91E63"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/recyclerView_keyword_search_result"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:src="#tools:sample/avatars[3]" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
tools:listitem="#layout/item_general_event"
android:id="#+id/recyclerView_keyword_search_result"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="imageView_banner_search_keyword" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>

I have used same like this you can try it , it is working
<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:shimmer="http://schemas.android.com/apk/res-auto"
android:background="#color/darkgrey"
tools:context=".ui.ProductList.ProductListFragment">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="#dimen/padding_10"
android:text=" Select an item closest to your desired search"
android:textSize="16sp"
android:textColor="#color/black"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/product_list_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginBottom="60dp"
android:scrollbars="vertical" />
</LinearLayout>
</ScrollView>
<android.support.v4.view.ViewPager
android:id="#+id/list_pager"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_gravity="end"
android:visibility="invisible"
android:background="#color/white"
android:gravity="bottom|center"
/>
</RelativeLayout>
On the place of viewpager you can use Imageview.

Try to set android:adjustViewBounds="true" or android:scaleType="fitCenter" on your ImageView

layout fixed.
there was problem with your bottom approach of recycle view.
you are using tools for displaying image it will not show image on device or emulator for that you have to set Image using java/Kotlin code.
imageView.setBackgroundResource(R.drawable.img1)
imageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.img1));
or if you are getting image form server then try using Glide or anyother image loader Library.
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
tools:listitem="#layout/item_general_event"
android:id="#+id/recyclerView_keyword_search_result"
app:layout_constraintBottom_toTopOf="#+id/imageView_banner_search_keyword"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<ImageView
android:id="#+id/imageView_banner_search_keyword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#E91E63"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:src="#tools:sample/avatars[3]" />
</androidx.constraintlayout.widget.ConstraintLayout>

Sticky button at the bottom of scroll view

I want some sticky button that is always visible when user scrolls, but when reach the bottom is fixed. I my problem is that when users scroll and reach the bottom the button overlaps some text.
This is what I have. The wrong version. The button don't let see some text in that case.
And this is what I want. That the button when you reach the end you have something like that.
This is my layout. Where I have some fields that are scrollable and the button that is outside. It's a constrain Layout.
The fields inside the scrollview are reduce to make more short the code and be easy to undersand.
<?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"
android:fitsSystemWindows="true">
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wf_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/offers_summary_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padding_offers_layout">
<TextView
android:id="#+id/company_name"
style="#style/wf_text_copy_bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ONE"/>
<TextView
android:id="#+id/product_name"
style="#style/wf_text_copy"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/company_name"
app:layout_constraintStart_toStartOf="parent"
tools:text="Compact"/>
<ImageView
android:id="#+id/logo_company"
android:layout_height="60dp"
android:layout_width="60dp"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginEnd="#dimen/form_margins_small"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:contentDescription="#null"/>
<TextView
android:id="#+id/offer_general_info"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="end"
android:gravity="center_vertical"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
android:text="#string/_CS_label_general_info"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
<Button
android:id="#+id/btn_go_to_checkout"
style="#style/wf_button_primary"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/text_margin_sides"
android:layout_marginTop="#dimen/button_top_margin"
android:descendantFocusability="beforeDescendants"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scroll_view"
android:text="#string/_OFCS_close_contract"
android:fitsSystemWindows="true"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintVertical_bias="1.0"/>
</android.support.constraint.ConstraintLayout>

Replace this
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wf_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:fillViewport="true">
with this
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/wf_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/btn_go_to_checkout"
app:layout_constraintTop_toTopOf="parent"
android:fillViewport="true">

Just add padding bottom to the second ConstraintLayout.
Note that padding bottom value must be greater than sticky button height

Placing horizontal recyclerview at a specific position using ConstraintLayout

I want to place my horizonatl recyclerview at 30% screen width from start
<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">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:orientation="horizontal"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:background="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
</android.support.constraint.ConstraintLayout>
But it is not recyclerview not appearing on screen working any idea how to achieve this.

You never gave your recyclerView a vertical constraint so what happened is that at the run time your recyclerView just jumped to the top of the screen.
When I copied your code I saw this error:
This view is not constrained vertically: at runtime, it will jump to the top unless you add a vertical constraint
Some tip - if you see the red line on your view in the XML/the red warning button from the design you should really look at the error and change your layout accordingly.
And of course, I won't leave you without a good working layout - here is the layout that I made for the recyclerView to start at 30% of the screen, I have checked it and its working. (i was working with androidx but just change it to the support library if you want)
<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.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/colorPrimaryDark"/>

your RecyclerView is missing the vertical constraints; Add at least one so that the view can be rendered.
constrained to top:
app:layout_constraintTop_toTopOf="parent"
if you want it to use the whole parent, add these too:
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"

Remove the ConstraintLayout and use Linearlayout instead, than use the android:weight= property accordingly in both guideline and RecyclerView.

This will work fine for you
<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">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="0dp"
android:layout_height="0dp"
android:clipToPadding="false"
android:orientation="horizontal"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".3" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout - element that fills remaining height does not resize

I'm working on a simple chatting app, which has a recyclerView to display messages and a LinearLayout to contain controls for sending new messages. The controls should take as much space as needed (when writing multiple lines of text, it gets bigger) and the recyclerView should take the rest.
I have encountered these issues with my code (see bellow):
When the keyboard pops up, the recyclerView is overlaped (should be resized to fit the remaining space)
Overlap when keyboard appears
When writing more lines of text, the recyclerView is again overlaped (should be resized to fit the remaining space)
Overlap when wirting longer text
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/line"
app:gone="#{!viewModel.loaded}"
app:itemBinding="#{viewModel.itemBinding}"
app:items="#{viewModel.items}" />
<!-- A horizontal line between the chatbox and RecyclerView -->
<View
android:id="#+id/line"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#dfdfdf"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/chatControls"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<LinearLayout
android:id="#+id/chatControls"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<EditText
android:id="#+id/messageEdit"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"
android:text="#={viewModel.messageText}"
android:hint="#string/hint_write" />
<ImageButton
android:id="#+id/chatSendButton"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:src="#drawable/ic_menu_send"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="bottom"
android:onClick="#{() -> presenter.sendMessage()}" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Thank you in advance for any ideas.

I've managed to get the right behaviour by setting stackFromEnd to true on recycler view's LinearLayoutManager.

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.