Develop Reference

Android Studio - XML Preview has wrong Colors [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
me and a Classmate
now Shared our project on Github.
His XML previewer looks fine and works as intended.
But my XML previewer has some Errors to
What do I miss why does my previewer looks so differnt to the end result?
My View (left the inbuild from Android Studio, right from the Emulator):
His View (works fine - left Android Studio, right Emulator) :
My Layout File
<?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="#color/colorBackground"
tools:context=".UserInterface.MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/button_shopingEntryAdd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/actionModeSplitBackground"
android:clickable="true"
android:src="#drawable/trashcan"
android:visibility="invisible"
app:backgroundTint="#android:color/holo_green_light"
app:layout_constraintBottom_toTopOf="#+id/guideline57"
app:layout_constraintEnd_toStartOf="#+id/guideline51"
app:layout_constraintStart_toStartOf="#+id/guideline55"
app:layout_constraintTop_toTopOf="#+id/guideline56"
tools:visibility="visible" />
<ListView
android:id="#+id/listView"
android:layout_width="0dp"
android:layout_height="0dp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_Topbar">
</ListView>
<View
android:id="#+id/view_Topbar"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/round_corner"
app:layout_constraintBottom_toTopOf="#+id/guideline14"
app:layout_constraintEnd_toStartOf="#+id/guideline51"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/guideline4"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/btnNavFrag1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/fragment_active_button"
android:fontFamily="casual"
android:includeFontPadding="false"
android:text="#string/fragment1_name"
android:textSize="13sp"
app:layout_constraintBottom_toTopOf="#+id/guideline11"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline10" />
<Button
android:id="#+id/btnNavFrag2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/fragment_buttons"
android:fontFamily="casual"
android:text="#string/fragment2_name"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="#+id/btnNavFrag1"
app:layout_constraintEnd_toStartOf="#+id/guideline9"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toTopOf="#+id/guideline10" />
<Button
android:id="#+id/btnNavFrag3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/fragment_buttons"
android:fontFamily="casual"
android:text="#string/fragment3_name"
android:textSize="13sp"
app:layout_constraintBottom_toTopOf="#+id/guideline11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline9"
app:layout_constraintTop_toTopOf="#+id/guideline10" />
<Button
android:id="#+id/button_navSecond"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/menu"
app:layout_constraintBottom_toTopOf="#+id/guideline52"
app:layout_constraintEnd_toStartOf="#+id/guideline19"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/guideline53"
tools:visibility="visible" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:collapseIcon="#android:drawable/ic_menu_call"
app:layout_constraintBottom_toTopOf="#+id/guideline10"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView_titleP2"
android:layout_width="202dp"
android:layout_height="58dp"
android:autoText="false"
android:fontFamily="casual"
android:gravity="center"
android:text="FoodGent"
android:textColor="#FAFAFA"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline10"
app:layout_constraintStart_toStartOf="#+id/guideline19"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_topBarName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:gravity="center"
android:text="#string/fragment1_name"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline14"
app:layout_constraintEnd_toStartOf="#+id/guideline51"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button_add"
android:layout_width="0dp"
android:layout_height="0dp"
android:autoText="false"
android:background="#drawable/empty_drawable"
android:gravity="center"
android:text="+"
android:textColor="#color/colorBackground"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/guideline10"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent" />
<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.05352798" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline51"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="1.0" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.88" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline55"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.81" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33819953" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66423357" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.58" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline19"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.09" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.08" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline52"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline53"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.034" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline11"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.14" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.18" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline56"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.89" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.98" />
</androidx.constraintlayout.widget.ConstraintLayout>

The Awnser was:
My colors.xml file was not updated from the pull request (don't ask why)
opening the file was enough to fix it

GridLayout columns disappearing on smaller screen devices

I'm having some issues with my GridLayout contained within a ConstraintLayout. On larger screen devices (Pixel 2/3 XL for example) the GridLayout looks fine with content for all three columns showing up as expected.
On smaller screen devices only the first column is visible while the others just seem to disappear completely. What am I missing here?
<?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:id="#+id/login_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:animateLayoutChanges="true"
tools:context=".myactivity.MyActivity">
<androidx.gridlayout.widget.GridLayout
android:id="#+id/activity_gridlayout_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:columnCount="3"
app:layout_constraintTop_toBottomOf="#id/top_layout"
app:rowCount="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/md_keylines_medium"
android:layout_marginTop="#dimen/md_keylines"
android:layout_marginEnd="#dimen/md_keylines"
android:layout_marginBottom="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<ImageView
android:id="#+id/activity_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_climate" />
<TextView
android:id="#+id/activity_state_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_temp"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22.0"
app:chipIcon="#drawable/ic_minus"
app:chipIconSize="22dp"
app:closeIcon="#drawable/ic_add"
app:closeIconEnabled="true"
app:closeIconSize="22dp"
app:closeIconTint="#color/colorAccent" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_toggle"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:textColor="#color/colorWhite"
app:chipBackgroundColor="#color/colorAccent"
app:chipIcon="#drawable/ic_power"
app:chipIconTint="#color/colorWhite" />
</LinearLayout>
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Just make layout width 0dp where you are using column weight and check:
Like:
<?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:id="#+id/login_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:animateLayoutChanges="true"
tools:context=".myactivity.MyActivity">
<androidx.gridlayout.widget.GridLayout
android:id="#+id/activity_gridlayout_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:columnCount="3"
app:layout_constraintTop_toBottomOf="#id/top_layout"
app:rowCount="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/md_keylines_medium"
android:layout_marginTop="#dimen/md_keylines"
android:layout_marginEnd="#dimen/md_keylines"
android:layout_marginBottom="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<ImageView
android:id="#+id/activity_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_climate" />
<TextView
android:id="#+id/activity_state_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_temp"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22.0"
app:chipIcon="#drawable/ic_minus"
app:chipIconSize="22dp"
app:closeIcon="#drawable/ic_add"
app:closeIconEnabled="true"
app:closeIconSize="22dp"
app:closeIconTint="#color/colorAccent" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_toggle"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:textColor="#color/colorWhite"
app:chipBackgroundColor="#color/colorAccent"
app:chipIcon="#drawable/ic_power"
app:chipIconTint="#color/colorWhite" />
</LinearLayout>
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Hope it helps.

Design View should be like this
<com.google.android.material.card.MaterialCardView
android:id="#+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{(v)->callback.onTabClick(v)}"
app:touchListener="#{mContext}">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ImageView
android:id="#+id/iv_card_icon"
android:layout_width="#dimen/grid_menu_image"
android:layout_height="#dimen/grid_menu_image"
android:layout_centerInParent="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:imageResource="#{tabIcon}"
android:scaleType="center"
app:layout_constraintBottom_toTopOf="#+id/tv_guide_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread"
tools:src="#drawable/guide_icon" />
<!--android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"-->
<com.hp.pregnancy.customviews.new_50.RobotoMediumTextView
android:id="#+id/tv_guide_title"
style="#style/TextAppearance.MaterialComponents.Subtitle1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:ellipsize="end"
android:gravity="center"
android:maxLines="2"
android:text="#{tabTitle}"
android:textAlignment="center"
android:textColor="#color/menu_color"
android:textFontWeight="500"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_card_icon"
tools:text="#string/guideTitle" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
For Grid Include like this
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/include2"
layout="#layout/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"/>
<include
android:id="#+id/tab1"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/small_margin"
android:layout_marginTop="#dimen/small_margin"
android:layout_marginEnd="#dimen/xsmall_margin"
android:layout_marginBottom="#dimen/xsmall_margin"
app:callback="#{callback}"
app:layout_constraintBottom_toTopOf="#+id/tab3"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include2"
/>
<include
android:id="#+id/tab2"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/small_margin"
android:layout_marginLeft="#dimen/xsmall_margin"
android:layout_marginRight="#dimen/small_margin"
android:layout_marginStart="#dimen/xsmall_margin"
android:layout_marginTop="#dimen/small_margin"
app:layout_constraintBottom_toTopOf="#+id/tab4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/include2"
/> <!--guideLayout-->
<include
android:id="#+id/tab3"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/xsmall_margin"
android:layout_marginLeft="#dimen/small_margin"
android:layout_marginRight="#dimen/xsmall_margin"
android:layout_marginStart="#dimen/small_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toTopOf="#+id/tab5"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tab1"
/>
<include
android:id="#+id/tab4"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/small_margin"
android:layout_marginLeft="#dimen/xsmall_margin"
android:layout_marginRight="#dimen/small_margin"
android:layout_marginStart="#dimen/xsmall_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toTopOf="#+id/tab6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/tab2"
/>
<include
android:id="#+id/tab5"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/xsmall_margin"
android:layout_marginLeft="#dimen/small_margin"
android:layout_marginRight="#dimen/xsmall_margin"
android:layout_marginStart="#dimen/small_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tab3"
/>
<include
android:id="#+id/tab6"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/small_margin"
android:layout_marginLeft="#dimen/xsmall_margin"
android:layout_marginRight="#dimen/small_margin"
android:layout_marginStart="#dimen/xsmall_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/tab4"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you are testing for smaller screen add scrollview and constraintlayout in activity or fragment layout and then add include.

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>

ConstraintLayout button in centre and size as 1/3 of ViewPager

I'm using the ConstraintLayout and I want to display button in the centre of ViewPager but with width and height of 1/3 of this pager.I used horizontal and vertical chain. And got the next:
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="#id/view_pager"
app:layout_constraintRight_toLeftOf="#+id/button2" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toBottomOf="#id/view_pager"
app:layout_constraintTop_toBottomOf="#id/button2"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toTopOf="#id/view_pager"
app:layout_constraintBottom_toTopOf="#id/button2"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintVertical_weight="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="#id/button4"
app:layout_constraintBottom_toTopOf="#id/button5"
app:layout_constraintLeft_toRightOf="#+id/button1"
app:layout_constraintRight_toLeftOf="#+id/button3" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button2"
app:layout_constraintRight_toRightOf="#id/view_pager" />
<android.support.constraint.Guideline
android:id="#+id/vertical_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="#dimen/basic_keyline"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginLeft="8dp"
android:layout_marginRight="#dimen/basic_keyline"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:text="#string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent" />
But I think this approach is so scary. Maybe somebody know better solution, please help me. I want to use only xml without using the code.
UPDATE
Buttons were added to easy understand what I want.

Here's what you can do without adding so many buttons and also without guidelines.
Here's the 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:id="#+id/apbLay1"
tools:context="studios.brilliant.com.commutech.Home">
<android.support.constraint.ConstraintLayout
android:layout_marginBottom="152dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".333"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".333"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This will give you the exact output you need and you're getting as in the screenshot provided.
.333 is 33.3% of the parent which is almost equal to 1/3.
That extra layout is to add a container for the viewpager and button as using viewpager as the container can cause the button to hide when the fragment will be visible.

You can insert a ConstraintLayout into your PageViewer so that you can use GuideLines to constraint the Button.
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.67" />
<android.support.constraint.Guideline
android:id="#+id/top_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/bottom_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintBottom_toTopOf="#id/bottom_guideline"
app:layout_constraintLeft_toRightOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline" />
</android.support.constraint.ConstraintLayout>

How to move views up when keyboard appears inside ConstraintLayout

Right now, I have one Button and one EditText view inside ConstraintLayout XML file. Need to move views up when user is typing inside EditText.
Manifest windowSoftInputMode is not working, so I think I need to work with constraints. Does anyone have clue how to solve this?
<?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">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/sx_landing_bg"
android:id="#+id/fpp_background"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
tools:ignore="ContentDescription"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="1.0" />
<android.support.v7.widget.AppCompatButton
android:layout_height="0dp"
android:layout_width="0dp"
android:text="#string/forgot_password_reset_password"
android:id="#+id/btn_login"
android:textColor="#color/colorDarkGray"
android:theme="#style/WhiteButtonStyle"
android:backgroundTint="#color/colorPrimaryDark"
android:textAllCaps="false"
app:layout_constraintLeft_toLeftOf="#+id/gl_vl_16d"
app:layout_constraintRight_toLeftOf="#+id/gl_vr_16d"
app:layout_constraintBottom_toTopOf="#+id/gl_vh_80p"
app:layout_constraintTop_toTopOf="#+id/gl_vh_70p"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
android:gravity="center_vertical|center_horizontal|center" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/gl_vh_80p"
android:orientation="horizontal"
tools:layout_editor_absoluteY="541dp"
tools:layout_editor_absoluteX="0dp"
app:layout_constraintGuide_percent="0.7922078"
/>
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/gl_vh_70p"
android:orientation="horizontal"
tools:layout_editor_absoluteY="478dp"
tools:layout_editor_absoluteX="0dp"
app:layout_constraintGuide_percent="0.7"
/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="683dp"
android:id="#+id/gl_vr_16d"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="395dp"
app:layout_constraintGuide_end="16dp"
/>
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="683dp"
android:id="#+id/gl_vl_16d"
app:layout_constraintGuide_begin="16dp"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="16dp"
/>
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="683dp"
android:id="#+id/guideline3"
app:layout_constraintGuide_begin="387dp"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="387dp" />
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="683dp"
android:id="#+id/guideline4"
app:layout_constraintGuide_begin="24dp"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="24dp" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/guideline9"
app:layout_constraintGuide_begin="372dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="372dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="431dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="431dp"
tools:layout_editor_absoluteX="0dp" />
<EditText
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/editText2"
android:textColor="#color/button_text_color"
android:theme="#style/WhiteButtonStyle"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/guideline9"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="1.0"
android:hint="Enter email or ussername"
style="#style/RobotoEditTextStyle"
android:textSize="14sp"
app:layout_constraintRight_toLeftOf="#+id/gl_vr_16d"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
android:layout_marginBottom="8dp"
android:textColorHint="#bababa" />
</android.support.constraint.ConstraintLayout>

Done by setting views programmatically at runtime and checking when keyboard appears.
ConstraintLayout.LayoutParams constraint = (ConstraintLayout.LayoutParams)login.getLayoutParams();
constraint.topToBottom = shrinked ? R.id.gl_h_850p: R.id.gl_h_550p;
constraint.bottomToTop = shrinked ? R.id.gl_h_999p: R.id.gl_h_650p;
login.setLayoutParams(constraint);