Develop Reference

how can I make my app not break on certain screen sizes due to scaling

I'm building an app and I can't figure out how can I make my app not break on certain screen sizes.
I want the app to have a standard look on all devices.
how it should look here
how it looks on the pixel 3
how it looks on a tablet
<ImageView
android:scaleType="fitXY"
android:id="#+id/imageView"
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"
app:srcCompat="#drawable/hub_background" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="19dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="19dp" />
<ImageView
android:translationZ="3dp"
android:id="#+id/background2"
android:layout_width="409dp"
android:layout_height="1200dp"
android:adjustViewBounds="true"
android:maxWidth="302dp"
android:maxHeight="722dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/start_anim_background_color"
tools:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/monthProgress"
android:layout_width="327dp"
android:layout_height="159dp"
android:layout_marginTop="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintVertical_bias="0.0"
tools:ignore="=">
<TextView
android:id="#+id/topPanel"
android:layout_width="320dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:background="#drawable/btn_shape_capsule_empty"
android:gravity="center_vertical"
android:textAlignment="center"
android:textSize="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/time"
app:layout_constraintStart_toStartOf="#+id/money"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/money"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="1500$"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/time"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="150hrs"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="Your month's progress:"
android:textColor="#color/white"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/line"
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#757575"
app:layout_constraintBottom_toBottomOf="#+id/topPanel"
app:layout_constraintEnd_toEndOf="#+id/topPanel"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/topPanel" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout1"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="start a new\nshift"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="360dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="see all of\nyour shifts"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout3"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="settings"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout4"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="about"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm using up as my measurement unit for everything.

It's impossible for it to look the same on all different screens as they have different ratios. But what is possible is to make it look very similar on different screens with the same ratio.
Generally the best is going with dp since the user can then rescale your app via Android settings if he/she has sight difficulties (to e.g. make it bigger). But if you prefer your app to always use the same design ratios you can for example use GridLayouts and weights. You can then specify how much percentage of your screen should be covered by a view. Additionally, you could of course also always go by manually implementing stuff like
desiredRatio = 0.4f;
viewHeight = desiredRatio * getMeasuredHeight();
and then applying the height to your view by changing the LayoutParams or implementing your own ViewGroup and do the whole onLayout stuff yourself (sure possible and necessary in rare occasions)
Generally, I'd try to get it done with GridLayouts or LinearLayouts using weights and in rare cases implement your own ViewGroup.
So in your case that could be something like
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height=match_parent"
app:orientation="horizontal"
app:columnCount="2">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/monthProgress"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
</androidx.gridlayout.widget.GridLayout>
Sorry for the missing indentations, the StackOverFlow code "editor" is just horrible.
Anyhow, that's how you'll get some parts done. Make sure to set the height in your ConstraintLayouts to "0dp", likewise with the width. Otherwise, GridLayout won't be able to do what you want.
Additionally, you used android:scaleType="fitXY" in your ImageView. That will look weird. Instead, I'd recommend centerCrop instead.

ConstraintLayout newest version doesn't work

My project is using Constraintlayout 1.1.3 and i've just updated its version to 2.0.4.
and the part of entire layout got mixed up a little. so i checked my code and i realized that i use layout_ConstraintLeft or right.
so i added "start" and "end" of attribute of ConstraintLayout. but it's stil not working.
they stick to each other.
this constraintLayout is made of flat hierarchy. and the other part of this layout still works.
why dose it not work?
how can i fix it?
this is what i want.
but it ended up being like tihs. they stick to each other. when i upgrade ConstraintLayout version.
This is my xml code.
<?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:custom="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="#FFF"
android:fillViewport="true"
android:clickable="true"
tools:context=".ManiActivity">
<ImageView
android:id="#+id/container_outline"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#333"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
tools:viewBindingIgnore="true" />
<ImageView
android:id="#+id/iv_drawer_info_logo"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:src="#drawable/img_drawer_logo"
app:layout_constraintBottom_toBottomOf="#id/container_outline"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#id/container_outline"
app:layout_constraintStart_toStartOf="#id/container_outline"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintEnd_toEndOf="#id/container_outline"
app:layout_constraintTop_toTopOf="#id/container_outline"
tools:viewBindingIgnore="true" />
<ImageView
android:id="#+id/iv_drawer_info_name_icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:paddingTop="1dp"
android:src="#drawable/icn_drawer_name"
app:layout_constraintBottom_toBottomOf="#id/tv_drawer_info_name"
app:layout_constraintDimensionRatio="3:5"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toRightOf="#id/iv_drawer_info_logo"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_drawer_info_name"
app:layout_constraintVertical_bias="1"
tools:viewBindingIgnore="true" />
<TextView
android:id="#+id/tv_drawer_info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:gravity="left|bottom"
android:textColor="#FFF"
android:textSize="#dimen/text_main_big"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv_drawer_info_id"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toRightOf="#id/iv_drawer_info_name_icon"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintTop_toTopOf="#id/container_outline"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Hello" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_drawer_info_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/detail_margin_3"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#FFF"
android:textSize="14dp"
app:autoSizeMaxTextSize="14dp"
app:autoSizeMinTextSize="9dp"
app:autoSizeTextType="uniform"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#id/container_outline"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#id/iv_drawer_info_name_icon"
app:layout_constraintStart_toStartOf="#id/iv_drawer_info_name_icon"
app:layout_constraintRight_toLeftOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintEnd_toStartOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintTop_toBottomOf="#id/tv_drawer_info_name"
tools:text="hello wordhello wordhello wordhello wordhello wordhello wordhello wordhello word" />
<ImageView
android:id="#+id/iv_drawer_info_expire_icon"
android:layout_width="20dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="3dp"
android:layout_marginEnd="3dp"
android:paddingTop="1dp"
android:src="#drawable/icn_drawer_expire"
app:layout_constraintBottom_toBottomOf="#id/tv_drawer_info_expire_title"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintLeft_toLeftOf="#id/container_outline"
app:layout_constraintStart_toStartOf="#id/container_outline"
app:layout_constraintRight_toLeftOf="#id/tv_drawer_info_expire_title"
app:layout_constraintEnd_toStartOf="#id/tv_drawer_info_expire_title"
app:layout_constraintTop_toTopOf="#id/tv_drawer_info_expire_title"
app:layout_constraintVertical_bias="1"
tools:viewBindingIgnore="true" />
<TextView
android:id="#+id/tv_drawer_info_expire_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:text="Hello word"
android:textColor="#FFF"
android:textSize="14dp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv_drawer_info_expire"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/container_outline"
app:layout_constraintVertical_chainStyle="packed"
tools:viewBindingIgnore="true" />
<TextView
android:id="#+id/tv_drawer_info_expire"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/detail_margin_3"
android:textColor="#FFF"
android:textSize="14dp"
app:layout_constraintBottom_toBottomOf="#id/container_outline"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintStart_toStartOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintEnd_toEndOf="#id/container_outline"
app:layout_constraintTop_toBottomOf="#id/tv_drawer_info_expire_title"
tools:text="~2020.12.31" />
<ImageButton
android:id="#+id/btn_drawer_pay"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginRight="24dp"
android:background="#drawable/ripple_white"
android:padding="15dp"
android:scaleType="fitCenter"
android:src="#drawable/img_drawer_payment"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#id/iv_drawer_info_logo"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintLeft_toLeftOf="#id/container_outline"
app:layout_constraintStart_toStartOf="#id/container_outline"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintEnd_toEndOf="#id/container_outline"
app:layout_constraintTop_toTopOf="#id/iv_drawer_info_logo" />
</androidx.constraintlayout.widget.ConstraintLayout>

It's not clear to me why your layout doesn't work or why it stopped working when you upgraded ConstraintLayout. I suggest the you break down the layout to its basic components and build back up to the full layout.
Considering the images that you posted, the following is how I would approach this using ConstraintLayout chains:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="TextView"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/imageView"
tools:layout_editor_absoluteY="172dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
tools:layout_editor_absoluteY="172dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
This XML produces the following image:
Other than that, check that all the constraints you have are what you want and that you understand what they are doing. Starting from the basic layout and added one component or small set of components at a time would be a reasonable approach to solving the problem.

ScrollView doesn't entirely scroll with Constraint Layout

I have an app that displays long strings of text with the press of some buttons, the problem comes when I display a lot of text and the ScrollView just stops scrolling for some reason.
Here is the xml of my app:
<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"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="16dp"
android:layout_marginTop="128dp"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/atbutt"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.089" />
</ScrollView>
<Button
android:id="#+id/namebutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:onClick="changename"
android:text="Name"
app:layout_constraintEnd_toStartOf="#+id/titlebutt"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/titlebutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:onClick="changetitle"
android:text="Title"
app:layout_constraintEnd_toStartOf="#+id/descbutt"
app:layout_constraintStart_toEndOf="#+id/namebutt"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/descbutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:onClick="changedesc"
android:text="Description"
android:textSize="13dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/titlebutt"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/urlbutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="11dp"
android:layout_marginStart="16dp"
android:layout_marginTop="20dp"
android:onClick="changeurl"
android:text="Url"
app:layout_constraintEnd_toStartOf="#+id/atbutt"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/namebutt" />
<Button
android:id="#+id/atbutt"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginEnd="14dp"
android:layout_marginTop="20dp"
android:onClick="changeat"
android:text="Publish Date"
android:textSize="12dp"
app:layout_constraintEnd_toStartOf="#+id/contbutt"
app:layout_constraintStart_toEndOf="#+id/urlbutt"
app:layout_constraintTop_toBottomOf="#+id/titlebutt" />
<Button
android:id="#+id/contbutt"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="17dp"
android:onClick="changecont"
android:text="Content"
app:layout_constraintBottom_toBottomOf="#+id/atbutt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/atbutt"
app:layout_constraintTop_toTopOf="#+id/atbutt"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I have seen some people use this same method that I'm using here and it works for them just fine.

Your layout has a few things that look wrong and could explain
undefined behaviour.
change the ScrollView height and width to 0dp which means to respect the constraints set on the view
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
...
Remove the constraints from the child of the ScrollView as ContraintLayout only applies rules to direct children.
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="16dp"
android:layout_marginTop="128dp"
android:text=""
/>

ConstraintLayout left align the middle element of two horizontal chains?

I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.
I have created 2 horizontal chains with chainStyle as spread_inside.
Here is the layout xml:
https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896
Any idea how to do that?

Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.
<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:id="#+id/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/tvStockName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ICICI BANK LIMITED" />
<TextView
android:id="#+id/tvStockSymbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/tvStockName"
app:layout_constraintTop_toBottomOf="#+id/tvStockName"
tools:text="ICICIBANK" />
<TextView
android:id="#+id/tvStockValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="306.75" />
<TextView
android:id="#+id/tvStockPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="(1.44%)"
/>
<TextView
android:id="#+id/tvStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/tvStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="-4.50"
/>
<TextView
android:id="#+id/tvAvgPriceTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Avg. Price"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQtyTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvQtyTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Qty"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvCurrentValueTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvAvgPriceTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvCurrentValueTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Curr. Value"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQtyTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvAvgPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQty"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAvgPriceTitle"
tools:text="241.83" />
<TextView
android:id="#+id/tvQty"
android:layout_width="0dp"
android:layout_height="20dp"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockInvestment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvAvgPrice"
app:layout_constraintTop_toBottomOf="#+id/tvQtyTitle"
tools:text="4901" />
<TextView
android:id="#+id/tvTotalStockInvestment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQty"
app:layout_constraintTop_toBottomOf="#+id/tvCurrentValueTitle"
tools:text="15,13,184" />
<TextView
android:id="#+id/tvTotalStockPercent"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="(+27.69%)"
/>
<TextView
android:id="#+id/tvTotalStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="+3,28,234"
/>
<TextView
android:id="#+id/tvDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference"
tools:text="-24,015"
/>
<TextView
android:id="#+id/tvTitleDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Today's Gain"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvDayStockDifference"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference" />
Output of the layout above:

ConstraintLayout ignores margins

I have very simple layout, which can be replaced with one RelativeLayout which always work. However wherever I put margins they are ignored and no, I don't want to use padding and no, chain also doesn't fix the problem. Any idea?
For example margins on date or manufacturer are ignored as well as others.
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:cardBackgroundColor="?attr/szykColorSecondary"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/date"
style="?attr/szyk_textMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="left"
android:singleLine="true"
android:text="16.12.2014"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/manufacturer"
style="?attr/szyk_textBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingRight="8dp"
android:text="Samsung"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/model"
app:layout_constraintTop_toBottomOf="#+id/date" />
<TextView
android:id="#+id/model"
style="?attr/szyk_textBody"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="S6 edge"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/manufacturer"
app:layout_constraintLeft_toRightOf="#+id/manufacturer"
app:layout_constraintRight_toLeftOf="#+id/delete"
app:layout_constraintTop_toTopOf="#+id/manufacturer" />
<ImageView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_vector_delete"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/serial"
style="?attr/szyk_textMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="FDSF6D7A8FDAS6F7D89AS"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/manufacturer" />
<TextView
android:id="#+id/restore"
style="?attr/szyk_textButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/restore"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/serial" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Version
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Tools
compileSdkVersion 27
buildToolsVersion '27.0.2'

Sorry, my bad. The root cause of the issue was style I've been using. It had defined android:layout_margin, which overrides all the more specific margins such as android:layout_marginTop
<item name="android:layout_margin">2dp</item>

Some times preview shown result layout incorrect. However your date TextView does not contain any mention about bottom position so system don't know from what exactly position you wanna margin.
Try this edited xml.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:cardBackgroundColor="#color/white_transparent_50"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="16.12.2014"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/manufacturer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingRight="8dp"
android:text="Samsung"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/date" />
<TextView
android:id="#+id/model"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="S6 edge"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#id/manufacturer"
app:layout_constraintLeft_toRightOf="#id/manufacturer"
app:layout_constraintRight_toLeftOf="#id/delete"
app:layout_constraintTop_toTopOf="#id/manufacturer" />
<TextView
android:id="#+id/serial"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="FDSF6D7A8FDAS6F7D89AS"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/manufacturer" />
<TextView
android:id="#+id/restore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="123123123"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/serial" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>