We Keep Coding

A question for anyone experienced with Android and xml to explain a mystery

I am currently developing an app and I came across a bug where two EditTexts just would not wrap inside a constraint layout. I tried everything to fix the problem. placing LinearLayouts to try enforce height adding CardViews, adding chains etc, etc. I know the way to make an item wrap inside a ConstraintLayout is using app:layout_constrainedHeight="true" and setting the height to android:layout_height="wrap_content", but even this wasn't working. Spent literal days trying to solve the problem, when yesterday I just lucked out and happened to move around my xml file and all of a sudden it started working.
Working fragment_layout_text_to_morse
<?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/decoder_text_to_morse_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
tools:context=".Fragments.DecoderFragment">
<include
android:id="#+id/include_morse"
layout="#layout/layout_edit_text_morse"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
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/decode_changer_fab" />
<TextView
android:id="#+id/header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/sixteen_dp"
android:layout_marginEnd="#dimen/sixteen_dp"
android:text="Text"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/decode_changer_fab"
app:layout_constraintEnd_toStartOf="#+id/decode_changer_fab"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/decode_changer_fab" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/decode_changer_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/eight_dp"
android:src="#drawable/ic_arrow"
app:layout_constraintBottom_toTopOf="#id/include_morse"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/include_text" />
<TextView
android:id="#+id/header_morse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/sixteen_dp"
android:layout_marginEnd="#dimen/sixteen_dp"
android:text="Morse"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/decode_changer_fab"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/decode_changer_fab"
app:layout_constraintTop_toTopOf="#id/decode_changer_fab" />
<include
android:id="#+id/include_text"
layout="#layout/layout_edit_text_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/decode_changer_fab"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_edit_text_morse
<?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:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/darkGreen">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/edit_text_morse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Morse"
android:inputType="textMultiLine"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_edit_text_text
<?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:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
>
<androidx.appcompat.widget.AppCompatEditText
android:maxHeight="128dp"
android:inputType="textMultiLine"
android:id="#+id/edit_text_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Results
Everything works as expected. When the EditTexts are empty they occupy as little space as possible at the top of the screen. When the user types into them the red EditText grows to its limit and the green EditText occupies the rest of the space. They also both wrap their content correctly for if the keyboard is open
Images
But this is where thing start to get strange. Simply but swapping the position of the top and bottom include statements in the xml the layout breaks
Broken fragment_layout_text_to_morse
<?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/decoder_text_to_morse_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
tools:context=".Fragments.DecoderFragment">
<include
android:id="#+id/include_text"
layout="#layout/layout_edit_text_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/decode_changer_fab"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/sixteen_dp"
android:layout_marginEnd="#dimen/sixteen_dp"
android:text="Text"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/decode_changer_fab"
app:layout_constraintEnd_toStartOf="#+id/decode_changer_fab"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/decode_changer_fab" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/decode_changer_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/eight_dp"
android:src="#drawable/ic_arrow"
app:layout_constraintBottom_toTopOf="#id/include_morse"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/include_text" />
<TextView
android:id="#+id/header_morse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/sixteen_dp"
android:layout_marginEnd="#dimen/sixteen_dp"
android:text="Morse"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/decode_changer_fab"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/decode_changer_fab"
app:layout_constraintTop_toTopOf="#id/decode_changer_fab" />
<include
android:id="#+id/include_morse"
layout="#layout/layout_edit_text_morse"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
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/decode_changer_fab" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now the Green EditText pushes the red one and the buttons off screen
My question is what's the difference in terms of the xml? I understand that xml is parsed from top to bottom, But how is moving the include statements making such a difference? Sure in a LinearLayout I could understand but why is ConstraintLayout behaving this way? Doesn't it consume the entire xml and then calculate the constraints? My worry is, like I said earlier I just lucked out to solve this as I would never format my code this way, having the top most view at the bottom of the xml let alone the head of a chain being below the tail. Anyone that can explain why this is happening will be my hero :)
PS: I am using navigation components in the project so the fragment_layout_text_to_morse is inflated into the androidx.fragment.app.FragmentContainerView of the MainActivity. I am also setting the android:screenOrientation="portrait" and the android:windowSoftInputMode="adjustResize" Not sure if any of this is pertinent but hey extra info :)

The issue comes about because app:layout_constrainedHeight="true" is specified for both of the include files. Only the first app:layout_constrainedHeight="true" is honored and the second is not.
Here is a simplified layout to demonstrate the problem:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/decoder_text_to_morse_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/include_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/red"
android:hint="Text"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/include_morse"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/include_morse"
layout="#layout/layout_edit_text_morse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/darkGreen"
android:hint="Morse"
android:inputType="textMultiLine"
app:layout_constrainedHeight="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
Since only the first view with app:layout_constrainedHeight="true" is honored, then the order will matter. You can try various combinations of this flag in the above layout to see what I mean. (ConstraintLayout version 2.0.4 is used.)
I would expect both flags to be honored instead of just one, but this is one of those cases where it is difficult to discern whether it is a defect or just a limitation.
Setting app:layout_constrainedHeight="false" for both views and relying on the vertical chain to do its job works a little better, but the layout slides a little beneath the status and navigation bars on the emulator.

How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout？

I want 2 TextView connected together. And if the first contains more text, it should shrink.
At the same time, the 2nd one should always show all the text and can not shrink. It should append to the end of the parent view, should not go out of bound
How can I achieve this?
What I tried
<?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="40dp"
android:paddingTop="2dp"
android:paddingBottom="2dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/avatarImg"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="4dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:riv_oval="true"
tools:src="#mipmap/avatar_test" />
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/peach_red"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/avatarImg"
app:layout_constraintTop_toTopOf="parent"
tools:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />
<TextView
android:id="#+id/content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/black1"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/name"
app:layout_constraintTop_toTopOf="parent"
tools:text="BBBBBBBBBBBBBBBBBBBBBB" />
</androidx.constraintlayout.widget.ConstraintLayout>
The result is
Edit:
Per #Gavin Wright's answer. I also want the second one to bind to the first tightly if the text in size is short.
This is the difficult point that I can achieve this... Sorry for not mentioning in advance...

The first TextView should have layout_width = 0dp, as this forces it to take up only the remaining width on the line. The second TextView should have layout_width = wrap_content, as this forces it to take up as much space as needed to fit its contents. I also added app:layout_constraintEnd_toStartOf="#+id/content, to the first TextView, as this is needed to enforce the relationship between the two TextViews.
This is tested and works perfectly for me:
<?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="40dp"
android:paddingTop="2dp"
android:paddingBottom="2dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/avatarImg"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="4dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:riv_oval="true"
tools:src="#mipmap/avatar_test" />
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/peach_red"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/avatarImg"
app:layout_constraintEnd_toStartOf="#+id/content"
app:layout_constraintTop_toTopOf="parent"
tools:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/black1"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/name"
app:layout_constraintTop_toTopOf="parent"
tools:text="BBBBBBBBBBBBBBBBBBBBBB" />
</androidx.constraintlayout.widget.ConstraintLayout>

NotSibling: Invalid Constraints

While executing my project I came across a problem and I'm not sure what causes it. The error I'm getting is
"....../file.xml" 41: #+id/secureText is not a sibling in the same ConstraintLayout
The complete file code is
<?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"
tools:context=".ui.activities.SpeedTestActivity"
android:background="#drawable/background_main">
<com.github.anastr.speedviewlib.PointerSpeedometer
android:id="#+id/speedView"
android:layout_width="240dp"
android:layout_height="240dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:speedTextSize="0sp" />
<TextView
android:id="#+id/speedText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="0.00MB/S"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/speedView" />
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adVBannerSpeedTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/secureText" // <- the problematic line
android:layout_centerHorizontal="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="44dp"
ads:adSize="BANNER"
ads:adUnitId="#string/admob_banner_id1"
ads:layout_constraintBottom_toTopOf="#+id/startTest"
ads:layout_constraintEnd_toEndOf="parent"
ads:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/startTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="40dp"
android:textColor="#android:color/white"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:background="#drawable/connect_button_background"
android:text="Start Speed Test"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout can only handle the alignment among its children.
<ConstraintLayout>
<This>
<Are>
<All>
<Children>
</ConstraintLayout>
However when you say to ConstraintLayout something like
<ConstraintLayout>
<Childrens
android:layout_below="#id/secureText">
</ConstraintLayout>
<TextView
android:id="#+id/secureText"/>
ConstraintLayout will fail to understand you and will not imply that constrain and will give you a warning.

You can align only children of the parent ConstraintLayout.
You haven't got any view with id secureText in your ConstraintLayout. Probably you want to set it to speedText instead.

in my case, I resolved it by updating the Kotlin version.

Elements will not center correctly in Constraintlayout Android Studio

I've a splash screen like this:
but if I open my application it will show like this:
This is my XML layout:
<?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="#android:color/holo_red_light"
tools:context=".SplashScreen">
<ImageView
android:id="#+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="160dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#mipmap/ic_concas_icon" />
<TextView
android:id="#+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="GO Tools"
android:textColor="#android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<ProgressBar
android:id="#+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<TextView
android:id="#+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="STATUS"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
I need that elements are placed correctly like Android Studio preview but if I launch my application still not work. Someone know how to do that? Thank you so much!
EDIT: Image will not load but it's correctly setted.

Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="#color/buttonColor"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<TextView
android:id="#+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
android:text="GO Tools"
android:textColor="#android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/splash_progress"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<ProgressBar
android:id="#+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
app:layout_constraintBottom_toTopOf="#+id/splash_status"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<TextView
android:id="#+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes

Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED chain is what you need.

Android Preview Not Translating to Emulator

Now I've already browsed some similar threads, and they helped a bit but I still can't figure this out. I just started Android developing a couple hours ago and I'm following along in this video series, but in the videos the preview matches the emulator exactly. Mine does not. I've attached my xml (however I've been doing this by dragging and dropping on the design tab as that's how the video has been doing it and I know next to nothing about xml coding). The imgur link here has my graphical issue depicted: https://imgur.com/a/WZ6QP0o I would appreciate some advice
<?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"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:text="Click the button of the larger number. Not hard guy"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.359"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginStart="24dp"
android:text="Bigger Number Game!"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="13dp"
tools:textSize="30dp" />
<Button
android:id="#+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="212dp"
android:onClick="leftButtonClick"
android:text="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="211dp"
android:layout_marginEnd="25dp"
android:onClick="rightButtonClick"
android:text="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pointsView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="17dp"
android:text="Points: 0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp" />
</android.support.constraint.ConstraintLayout>

The tools namespace, which you use in your title TextView, is only used by the design editor. Those attributes are removed at compile-time and so aren't used in the actual app.
You should use android:textSize="30sp" for the text size.
You should set a top constraint for the TextView (app:layout_constraintTop_toTopOf="parent") and then set a top margin (android:layout_marginTop="13dp")