Develop Reference

i cant click whole cardview

Hello i have a problem with my cardview. when i click whole cardview with binding.root.setonclicklistener{} doesnt work. only work when i click a little part on bottom. but also when i try click imageview (in my cardview) for favorite it works correctly. how can i fix that ?
<androidx.cardview.widget.CardView
android:id="#+id/cv_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="#dimen/radius_10dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_bordered_ghost_white_with_radius_10dp_width_1dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_top_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/cl_product_item_bottom_container"
app:layout_constraintDimensionRatio="0.78"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vp_product_item_images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/silver"
android:elevation="-1dp"
android:orientation="horizontal" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl_product_item"
android:layout_width="wrap_content"
android:layout_height="#dimen/size_25"
android:background="#color/white_p0"
app:tabBackground="#drawable/selector_indicator_white_4dp"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabPaddingEnd="#dimen/size_15"
app:tabPaddingStart="#dimen/size_15"
app:tabPaddingTop="0dp"
android:layout_marginBottom="#dimen/margin_25"
android:layout_marginStart="#dimen/margin_50"
app:layout_constraintBottom_toTopOf="#id/cv_product_item_top"
app:layout_constraintStart_toStartOf="#id/vp_product_item_images"/>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/iv_product_item_favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_50"
android:src="#{data.isFavorite ? #drawable/ic_favorite_filled_cerise : #drawable/ic_favorite_empty_lilac_bloom}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_favorite_filled_cerise" />

Try this -
Add these 2 attributes in your card view - android:clickable="true" and android:focusable="true"

when i change viewpager height for example 20dp i noticed click is works except the 20dp. viewpager doesnt allow me for click. i tried clickable and focusable false in viewpager but still same :(
<androidx.cardview.widget.CardView
android:id="#+id/cv_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="#dimen/radius_10dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_bordered_ghost_white_with_radius_10dp_width_1dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_top_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/cl_product_item_bottom_container"
app:layout_constraintDimensionRatio="0.78"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vp_product_item_images"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/silver"
android:elevation="-1dp"
android:orientation="horizontal" />

Shared element transition including a CollapsingToolbarLayout

I want to create a custom shared element transition including a CollapsingToolbarLayout. As the toolbar collapses, I want the Activity's ActionBar to disappear at a rate defined by the rate of scrolling performed by the user before the CollapsingToolbarLayout starts to contract. More importantly, want there to be a shared element transition. Namely, there exist two CircularImageView objects defined in the XML (shown below), I want to create an animation that converts the large ImageView (id = profileImageview) into the smaller one (id = smallProfileImageview) as the toolbar collapses (and vice versa). The java and xml code used to create the start and end states of the animation.
the java:
binding.appBarLayout.addOnOffsetChangedListener(((appBarLayout, verticalOffset) -> {
if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
((AppCompatActivity) getActivity()).getSupportActionBar().hide();
binding.smallProfileImageview.setVisibility(View.VISIBLE);
} else if (verticalOffset == 0) {
((AppCompatActivity) getActivity()).getSupportActionBar().show();
} else {
binding.smallProfileImageview.setVisibility(View.GONE);
}
}));
the xml:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
app:elevation="4dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:contentScrim="#color/black"
app:expandedTitleMarginStart="12dp"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="56dp">
<TextView
android:id="#+id/tagline_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="0dp"
android:layout_marginTop="12dp"
android:text="TextView"
android:textColor="#color/green_8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/subscribe_button"
app:layout_constraintTop_toBottomOf="#+id/subscribe_button" />
<TextView
android:id="#+id/posts_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:drawableRight="#drawable/hilarity_mask_unlike_white"
android:textColor="#color/green_8"
app:layout_constraintLeft_toRightOf="#+id/profile_imageview"
app:layout_constraintTop_toTopOf="#+id/profile_imageview" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_imageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#color/green_8"
app:civ_border_color="#color/green_8"
app:civ_border_width="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subscriptions_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:drawableRight="#drawable/ic_hilarity_following_icon"
android:focusable="auto"
android:textColor="#color/green_8"
app:layout_constraintEnd_toStartOf="#+id/subscribers_tv"
app:layout_constraintStart_toEndOf="#+id/posts_tv"
app:layout_constraintTop_toTopOf="#+id/posts_tv" />
<TextView
android:id="#+id/subscribers_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:clickable="true"
android:drawableRight="#drawable/ic_hilarity_follower_icon"
android:focusable="auto"
android:textAppearance="#android:style/TextAppearance.Material.Small"
android:textColor="#color/green_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/subscriptions_tv" />
<Button
android:id="#+id/subscribe_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/button_border"
android:text="Subscribe"
android:textColor="#color/green_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/profile_imageview"
app:layout_constraintTop_toBottomOf="#+id/subscriptions_tv" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.8">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/small_profile_imageview"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_marginStart="8dp"
android:src="#color/green_8"
android:visibility="gone"
app:civ_border_color="#color/green_8"
app:civ_border_width="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TabLayout
android:id="#+id/profile_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:visibility="visible"
app:tabGravity="fill"
app:tabIndicatorColor="#color/green_8"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/green_8"
app:tabTextColor="#color/white" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
My current knowledge of how to do a shared element transition involves situations where there is an intent, I'm not sure how to handle anything outside of that. I haven't seen anything in the documentation or online that would enable me to perform a shared element transition between sibling ViewGroups.

How do I stop this view from filling the screen?

My App is supposed to have the following layout (ie these 3 things stacked vertically):
Chart Name (String)
Tools (a pager with 3 tabs)
ChartGrid
The Chart Name is a set size, and then I want the Tools below that to use as much space as they need to, and then the ChartGrid should take up the rest of the space below that.
The overall layout is as follows (I've taken out the irrelevant bits):
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textViewChartName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<fragment
android:id="#+id/fragment_tools"
android:name="com.path.appname.fragments.ToolsFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textViewChartName"
tools:layout="#layout/fragment_tools" />
<fragment
android:id="#+id/fragment_chartGrid"
android:name="com.path.appname.fragments.ChartGridFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/au_adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fragment_tools"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_weight="5"
tools:layout="#layout/fragment_chart_grid" />
<com.google.android.gms.ads.AdView
android:id="#+id/au_adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
fragment_tools.xml is as follows:
<android.support.constraint.ConstraintLayout
android:id="#+id/chart_tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/toolsWrapper"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabs" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
and fragment_chartGrid is:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<com.path.appname.models.ChartGrid
android:id="#+id/chartGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
The problem I'm having is that the tools are taking up all the screen space, so I see the Chart Name and then the tools, and then nothing below that - just white space (if I add a background colour to the tools then I see the background colour). If I take out the tools, I can see the grid again.
Where am I going wrong?
EDIT: here's what I want (I've coloured the tools orange just to show which bit I mean; obviously I also need to sort out the numbers on the chart!):
And here's what I'm getting:

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.