Develop Reference

Which element is better for build dynamic part of layout?

I'd like to make a layout like this:
sample layout image
This is gonna be a list of descriptions for items. Each big blue rectangle - single item which I get from database, or json, nevermind.
The main issue is these little black rectangles with red and green rectangle inside. The rest parts like big pink square and wide dark blue rectangles are static - each item has a picture, title and cost. But black rectangles are various features, and each item has various amount of them. Some has only 2 features, and some other - 7 or even more. So these part of layout is dynamic and I don't know what is better for it. But for sure it should not be single line.
I can show you what I've made:
as image
As xml (all items features are hardcoded for now, cause I don't have data yet and this is just a sample):
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp"
android:background="#color/item_preview_background">
<ImageView
android:id="#+id/item_pic"
android:src="#drawable/example_img"
android:layout_width="#dimen/item_pic_w"
android:layout_height="#dimen/item_pic_h"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/info_bar"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/item_pic"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/info_bar_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SAMPLE TEXT"
android:textStyle="bold"
android:textColor="#color/item_name"
android:textSize="#dimen/item_preview_name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="#+id/item_cost_pic"
android:src="#drawable/img_cost"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#id/item_cost_value"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/item_cost_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="4100 (1300)"
android:textStyle="bold"
android:textColor="#color/item_cost"
android:textSize="#dimen/item_preview_cost"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<GridLayout
android:id="#+id/item_features"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="4"
app:layout_constraintTop_toBottomOf="#id/info_bar_top"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<LinearLayout
android:id="#+id/item_prop1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/item_prop1_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop1_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/item_prop2_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop2_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop3_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop3_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop4_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop4_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop5_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop5_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop6_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop6_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop7_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop7_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
So could you tell me, is my layout fine (if so, is there any way to make nice margin for columns and rows?), or tell me how to make such layout properly?

Aligning icons to the top of a Seekbar

I have a Seekbar with a LinearLayout of icons above it. I'm using LinearLayout weightsum and weight to align each one, however they are still not quite aligned.
Is there a way to align them?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
<LinearLayout
android:id="#+id/test_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5"
app:layout_constraintEnd_toEndOf="#+id/seekbar"
app:layout_constraintStart_toStartOf="#+id/seekbar"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:max="4"
android:theme="#style/Widget.AppCompat.SeekBar.Discrete"
android:thumb="#drawable/ic_black_navigation_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/test_layout"
app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit:
I am aware that you can use
android:paddingStart="-16dp"
android:paddingEnd="-16dp"
to align them but I rather not prefer to use a set padding, because this causes readjusting the padding when you add another item.
e.g changing icons to 6, need to change weightsum to 6, and also need to set padding to -14dp.

It's hard maintain this with LinearLayout, so I used ConstraintLayout instead, and using the Guidelines to divide the width into 4 equal portions, then you can align the images to these guidelines.. This will be maintainable accross different device widths and screen orientation
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/test_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#+id/seekbar"
app:layout_constraintStart_toStartOf="#+id/seekbar"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/iv0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="4dp"
android:paddingLeft="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<ImageView
android:layout_width="wrap_content"
android:paddingStart="16dp"
android:paddingLeft="16dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline1"
app:layout_constraintEnd_toEndOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<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.5" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="#id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="16dp"
android:paddingRight="16dp"
app:layout_constraintEnd_toEndOf="#id/guideline3"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="4dp"
android:paddingRight="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<SeekBar
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:max="4"
android:theme="#style/Widget.AppCompat.SeekBar.Discrete"
android:thumb="#drawable/ic_black_navigation_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/test_layout"
app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
Result:
Portrait:
Landscape

How to set height of a view in percent using ConstraintLayout

Currently I'm learning ConstraintLayout
below is my code that i have tried so far
<?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="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.PhaseListActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#color/colorAccent">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/greenColor"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want don't want use nested LinearLayout inside ConstraintLayout
Also in above layout my NestedScrollView is not scrolling
I want to create this type of screen using ConstraintLayout
My expected OUTPUT
I have tried to set Guideline but it didn't work for me, because i don't know how to use Guideline in above layout
Can anybody help me create this screen only using ConstraintLayout
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

So, after looking at your xml file, I've come up with solution to get rid of nested LinearLayout hierarchy in below solution:
<?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="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/tv_bottom_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/tv1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.85"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/myVideoView"
app:layout_constraintEnd_toEndOf="#id/myVideoView"
app:layout_constraintStart_toStartOf="#id/myVideoView"
app:layout_constraintTop_toTopOf="#id/myVideoView"
tools:text="1" />
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/myVideoView" />
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv1" />
<TextView
android:id="#+id/tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<TextView
android:id="#+id/tv_bottom_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if there's any query in comments. For your fixed bottombar TextView, now you can change height percent to whatever you want to change it's height dynamically.

You can use below code for bottom View which remove your Nested LinearLayout :
<TextView
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:background="#00ff00"
android:padding="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textStyle="bold" />

Layout Problems - Not able to create layout properly in android

I am creating a layout in android but the problem is layout is not created as same in design.
I want to create layout like below image i.e.
but the problem is my design distort in some devices like
enter image description here
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lay1"
android:layout_margin="#dimen/dp20"
>
<ImageView android:id="#+id/kk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/move_stock_bar"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
/>
<ImageButton android:id="#+id/ibPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_marginLeft="-100dp"
android:layout_marginTop="#dimen/dp10"
/>
<ImageButton android:id="#+id/ibMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_below="#id/ibPlus"
android:layout_marginLeft="-100dp"
android:layout_marginTop="-40dp"
/>
</RelativeLayout>

#mishti I have just used this concept to make the design appear to like what you gave. Try this with ImageView using the weight. It displays the same to all screens if we use weight.
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10">
<Button
android:layout_width="0dp"
android:layout_height="120dp"
android:layout_weight="6"
android:text="Image View"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="4"
android:layout_gravity="start"
android:gravity="start">
<ImageView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
<ImageView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
</LinearLayout>
</LinearLayout>

Use ConstraintLayout for complex layout, it provides you more flexiblity. I did the same layout as in the image attached with question. I am using Guidelines, so i can use this same layout on different screen size and it will work fine.
I am using "app:srcCompat" attribute for setting the image because i am using Vector image here.
<?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="140dp"
android:background="#color/color_black">
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_top"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".01" />
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".99" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_start"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_mid"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".8" />
<android.support.constraint.ConstraintLayout
android:id="#+id/main_text_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_red"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical_mid"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<ImageView
android:id="#+id/logo_iv"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<TextView
android:id="#+id/title_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="MOVE STOCK"
android:textColor="#color/color_white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/button_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_vertical_mid"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<ImageButton
android:id="#+id/button1"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<ImageButton
android:id="#+id/button2"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1"
app:srcCompat="#drawable/ic_image_placeholder" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

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>