Develop Reference

How to set guidelines to the original screen size inside scrollview

I just started app development trying to make an e-commerce app since using fragments is a better way rather than activities I made a home page inside which I want to show first the action bar then top-selling (top-4 selling products) and after that all the products.
this is some i want to achieve
image
I am using guideline to constraint view pager to limited section but since its a fragment its not scrollable so i have to set it to scrollable but the second I set it to scroll view the size of screen increase and the view pager gets distorted.
code of my home fragment without scroll view
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".home.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/home_actionbar"
layout="#layout/actionbar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/top_selling_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15sp"
android:layout_marginTop="15sp"
android:text="#string/top_selling_heading"
android:textSize="14sp"
app:fontFamily="#font/roboto_bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_actionbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/top_seller_vp"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="5sp"
android:layout_margin="15sp"
android:clipToPadding="false"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constrainedHeight="true" />
<TextView
android:id="#+id/product_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintStart_toStartOf="#id/top_selling_heading"
app:layout_constraintEnd_toEndOf="#id/top_selling_heading"
android:text="#string/all_products_heading"
android:textSize="20sp"
android:fontFamily="#font/roboto_bold"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productRV"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#id/product_heading"
android:layout_margin="10sp"
tools:listitem="#layout/product_item"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
is there any other way to achieve this. please help fast..

try using LinearLayout inside scrollView(Copy and paste)
<FrameLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/home_actionbar"
layout="#layout/actionbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/top_selling_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15sp"
android:layout_marginTop="15sp"
android:text="#string/top_selling_heading"
android:textSize="14sp"
app:fontFamily="#font/roboto_bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_actionbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/top_seller_vp"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="15sp"
android:clipToPadding="false"
android:padding="5sp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<TextView
android:id="#+id/product_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_bold"
android:text="#string/all_products_heading"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#id/top_selling_heading"
app:layout_constraintStart_toStartOf="#id/top_selling_heading"
app:layout_constraintTop_toBottomOf="#id/guideline2" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productRV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10sp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_heading"
tools:listitem="#layout/product_item" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</FrameLayout>

Android: create space-around (equal space) between elements and borders

I have two imageView widgets and I would like to place them so that there is equal space between the left border and the left image, the left image and the right image, and the right image and the right border. (I wrote in the title of the question space-around because it's similar to the spacing used in CSS...)
Is it possible to achieve without manual adaptation (such as calculating margins)? And is it possible to achieve solely in the design mode without writing xml code?
Screen shot:
My 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/newbackground"
tools:context=".MainActivity">
<Button
android:id="#+id/btnRoll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#3498db"
android:text="#string/btnRoll"
android:textColor="#ffffff"
tools:layout_editor_absoluteX="167dp"
tools:layout_editor_absoluteY="621dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:srcCompat="#drawable/dice1"
tools:layout_editor_absoluteX="59dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/dice2"
tools:layout_editor_absoluteX="267dp"
tools:layout_editor_absoluteY="406dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/newbackground"
tools:context=".MainActivity">
<Button
android:id="#+id/btnRoll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#3498db"
android:text="btnRoll"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/btnRoll"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/blue_heart" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
app:layout_constraintBottom_toTopOf="#id/btnRoll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:srcCompat="#drawable/blue_heart" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here is a proposition with a LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ...
</LinearLayout>
With the layout_weight attribute, the "spacer" views will take the maximum of free space, equally

RecycleView get cuts at Bottom

This question is raised by so many people but for my case those solution and tips are not working.
I'm using RecycleView in fragment to display gridview for product display but is't cut last item at bottomside, I have gone through many solution like android:clipToPadding="false" and android:paddingBottom="myactionbarsize" but eventually it's doen't work.
Have a look at 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ll_parent_vendors"
android:background="#color/bg_main">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_vendors"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipToPadding="false"
/>
<TextView
android:id="#+id/txt_empty_vendors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/edt_hint_color"
android:textSize="#dimen/TextSizeNormal"
android:visibility="gone"
android:layout_margin="16dp"
android:padding="16dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Here is my item Xml code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_row_vendor_services"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="1dp">
<com.customview.SquareImageView
android:id="#+id/img_vendor_services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_placeholder"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/txt_service_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:lines="1"
android:text="#string/app_name"
android:textColor="#color/edt_color"
android:textSize="#dimen/TextSizeSmall" />
<TextView
android:id="#+id/txt_service_price"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/app_name"
android:textColor="#color/colorAccent"
android:textSize="#dimen/TextSizeSmall" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_chat"
android:layout_width="50dp"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:background="#drawable/ic_chat"
android:clickable="false"
android:tint="#color/colorAccent" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
and how I initialize in my fragment
rv_vendors = view.findViewById(R.id.rv_vendors);
rv_vendors.setHasFixedSize(true);
rv_vendors.setLayoutManager(new GridLayoutManager(mContext, 2));
Here are my Screenshot of emulator Pixel API 24 which cuts the layout at bottom.
and other one which is MIA1 real device Screenshot it's perfect with same propertie.
how this happens any hints ?

Layout divided by two buttons (height:50%)

Hy guys, i need a layout divided by two buttons. HeightA: 50% - HeightB: 50%.
Like This:
layout 2 button 50%
it's possible?? Even with devices of different sizes?
Thanks
EDIT:
I think I found the solution. I use ConstraintLayout.
I create two button and put a guideline:
<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.5"/>
<Button
android:id="#+id/sopra"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/sotto"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
With this solution i can put textview overlaps button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<Button
android:text="A"
android:id="#+id/A"
android:layout_width="match_parent"
android:layout_height="0dp"
android:padding="10dip"
android:layout_weight="1" />
<Button
android:text="B"
android:id="#+id/B"
android:layout_width="match_parent"
android:layout_height="0dp"
android:padding="10dip"
android:layout_weight="1" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2"
>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button A"
/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button B"
/>
</LinearLayout>

Android: LinearLayout going out of screen when using weight

Why is 3rd linear layout (containg two text views) being pushed out of screen in following xml file? Simultaneous design in Android Studio is showing expected behaviour but when testing in phone, 3rd linear layout is being partially visible.
What I am trying to achieve is dividing screen into 3 parts (10%, 80% and 10%).
<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"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="Place a stone" />
<Button
android:id="#+id/resetButton"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="0dp"
android:text="Reset" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8">
<me.varunon9.fito.CanvasBoardView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/userInfoTextView"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#drawable/focussed_background"
android:text="Your turn\nStones left: 9" />
<TextView
android:id="#+id/computerInfoTextView"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Computer's turn\nStones left: 9" />
</LinearLayout>
Even this xml is also being pushed out of screen-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/topBar"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Place a stone" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomBar"
android:layout_marginBottom="0dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/userInfoTextView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="User Info" />
</LinearLayout>
</RelativeLayout>
I am using Fragment (Tabbed Activity). When using same xml layout (above snippets) in activity, things are working fine. Problem seems with Fragment.

To avoid nested weights (bad for performance), you can use Relative layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/topBar"
android:orientation="horizontal"
android:layout_alignParentTop="true"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomBar"
android:orientation="horizontal"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

Instead of using nested weights, which happen to be terribly bad for performance, use ConstraintLayout which is very easy to implement in the layout editor.
If you have never used it before it can appear to be a bit complicated; but that is not the case. Refer to this link to get an idea on how to implement a ConstraintLayout.
Here is the code for what you want to achieve
<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:orientation="vertical">
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1"
tools:layout_editor_absoluteY="51dp"
tools:layout_editor_absoluteX="0dp" />
<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.9"
tools:layout_editor_absoluteY="460dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="192dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="288dp" />
<TextView
android:id="#+id/stoneTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/stoneText"
app:layout_constraintBaseline_toBaselineOf="#+id/resetButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/resetButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/reset_text"
app:layout_constraintBottom_toTopOf="#+id/guideline1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.64"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp" />
<TextView
android:id="#+id/playerTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/player_text"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toLeftOf="#+id/guideline3"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/computerTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/computer_text"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<FrameLayout
android:id="#+id/contentLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="#+id/guideline1"
android:layout_marginTop="8dp">
<!--Add your other view(s) here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>

Found it! Problem was not with fragment layout but its container, i.e. ViewPager. I am using Tabbed Activity and by default View Pager was too long (going out of screen).
Here is the solution: Android Tabbed Activity Bottom off Screen
Thanks for effort guys.

Hiiii
I think you don't have proper info, how to use "Weightsum".
well no issue, i will explain you,
When you want to use "Weight" in linear layout you should use "Weightsum" in your main "LinearLayout" after that you can use sub layout or widgets in sum of weight like below code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="horizontal">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="0.5"
android:text="Place a stone" />
<Button
android:id="#+id/resetButton"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:layout_width="0dp"
android:text="Reset" />
</LinearLayout>