Develop Reference

Make ConstraintLayout responsive in Android

I am working on a UI, in which I have to take email and number from user, buttons should must be at bottom, after button, there is a footer too on bottom. I have to make it responsive. I am using scroll view for this purpose. I am stuck on a point.
I am using wrap_content as height for a view, and giving its top to bottom of upper view, and its bottom to top of lower view's top. On small screens, it is working fine, but due to these constraints, on large screens, it is in the centre of screen.
Please have a look on it:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<ScrollView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/footer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="6dp"
android:scrollbars="none"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon_img"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="18dp"
android:src="#drawable/ic_sample"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/loginTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/icon_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="#font/exo_light"
android:gravity="start"
android:text="Login"
android:textColor="#color/charcol_blue"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="#id/icon_img" />
<TextView
android:id="#+id/login_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/loginTxt"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/exo_regular"
android:gravity="start"
android:text="Enter your credentials"
android:textColor="#color/charcol_blue"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/loginTxt" />
<EditText
android:id="#+id/loginEditTextEmail"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/login_Desc"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#drawable/rounded_input_shape"
android:fontFamily="#font/exo_regular"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:textSize="17sp"
app:layout_constraintTop_toBottomOf="#id/login_Desc" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/btnLayout"
app:layout_constraintTop_toBottomOf="#id/loginEditTextEmail">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginHorizontal="20dp"
android:background="#drawable/rounded_input_shape"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="50dp">
<com.hbb20.CountryCodePicker
android:id="#+id/ccp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:ccp_autoDetectCountry="true"
app:ccp_defaultPhoneCode="41" />
<EditText
android:id="#+id/editText_carrierNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint=" Ph Number"
app:layout_constraintLeft_toRightOf="#+id/ccp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/ccp"
app:layout_constraintBottom_toBottomOf="#+id/ccp"
android:fontFamily="#font/exo_regular"
android:inputType="phone"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textSize="15sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/btnLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/loginBtnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/blue_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/imageView1"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toLeftOf="#id/loginBtnSubmit"
app:layout_constraintRight_toLeftOf="#id/orText"
app:layout_constraintTop_toTopOf="#+id/orText" />
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:fontFamily="#font/exo_regular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="OR"
android:textColor="#color/black"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/loginBtnSubmit" />
<View
android:id="#+id/imageView2"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toRightOf="#id/orText"
app:layout_constraintRight_toRightOf="#id/loginBtnSubmit"
app:layout_constraintTop_toTopOf="#+id/orText" />
<Button
android:id="#+id/guestContinue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/white_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="Sign Up"
android:textAllCaps="false"
android:textColor="#color/instruction_black_color"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="#+id/orText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:fontFamily="#font/exo_regular"
android:text="App "
app:layout_constraintTop_toTopOf="#+id/txt2"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintRight_toLeftOf="#+id/txt2"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:fontFamily="#font/exo_regular"
android:gravity="center_vertical"
android:text="Footer"
app:layout_constraintTop_toTopOf="#+id/footerImg"
app:layout_constraintBottom_toBottomOf="#+id/footerImg"
app:layout_constraintRight_toLeftOf="#+id/footerImg"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<ImageView
android:id="#+id/footerImg"
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_marginLeft="2dp"
android:scaleType="fitCenter"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am facing issue agains a constraint layout whose id is: "phone_layout"
If I will use its height as 0dp, it will works fine on large screens, but on small screens (when scroll view will be used to scroll screen), this layout will not be shown because of 0dp height.
I want this phone_layout to be below of email layout on every screen(small/large).

I resolved it by using
app:layout_constraintVertical_bias="0"

when i want to edit a text, my button goes up because its constraint to the bottom how can i prevent that?

I don't want the text to come up with the keyboard. is there a code so it stays at the bottom. i tried to constraint in to the top but then there is some space between my buttons and the bottom of my screen and i dont want that i want it at the bottom against the bottom line of the screen
before i click my editview
after i clicked my editview
here is my Layoutcode
<?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"
tools:context=".ProductInfo">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="202dp"
android:layout_marginBottom="1dp"
app:layout_constraintBottom_toTopOf="#+id/saveBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="219dp"
android:layout_height="wrap_content"
android:text="Location"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView"
android:layout_width="191dp"
android:layout_height="wrap_content"
android:text="Datum"
android:textSize="20dp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/locatieTbl"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" />
</TableLayout>
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/nameTxt"
android:layout_width="391dp"
android:layout_height="76dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:longClickable="true"
android:text="Titel"
android:textIsSelectable="true"
android:textSize="25dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/eanInputTxt" />
<Button
android:id="#+id/saveBtn"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:onClick="Savebtn"
android:text="Opslaan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/cancelBtn" />
<Button
android:id="#+id/cancelBtn"
style="#style/Widget.AppCompat.Button"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:onClick="Cancellbtn"
android:text="Annulleer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/saveBtn"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/idEanTxt"
android:layout_width="200dp"
android:layout_height="29dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:longClickable="true"
android:text="IdOrEan"
android:textIsSelectable="true"
android:textSize="18dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<EditText
android:id="#+id/Location"
android:layout_width="191dp"
android:layout_height="29dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:background="#null"
android:ems="10"
android:hint="Geen Vaknummer"
android:inputType="textPersonName"
android:longClickable="true"
android:textIsSelectable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Quantity" />
<EditText
android:id="#+id/Quantity"
android:layout_width="191dp"
android:layout_height="29dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:background="#null"
android:ems="10"
android:hint="Aantal"
android:inputType="textPersonName"
android:longClickable="true"
android:textIsSelectable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameTxt" />
<EditText
android:id="#+id/eanInputTxt"
android:layout_width="260dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Ean"
android:inputType="textPersonName"
android:longClickable="true"
android:text="0000030098572"
android:textIsSelectable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="180dp"
android:layout_height="193dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameTxt" />
<Button
android:id="#+id/Search"
android:layout_width="79dp"
android:layout_height="42dp"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:onClick="SearchEan"
android:text="Zoeken"
app:layout_constraintBaseline_toBaselineOf="#+id/eanInputTxt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/Scanner" />
<Button
android:id="#+id/Scanner"
android:layout_width="46dp"
android:layout_height="42dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="24dp"
android:background="#android:drawable/ic_menu_camera"
android:onClick="scanner"
app:layout_constraintEnd_toStartOf="#+id/Search"
app:layout_constraintStart_toEndOf="#+id/eanInputTxt"
app:layout_constraintTop_toTopOf="parent" />
<SurfaceView
android:id="#+id/surface_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.333"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/backBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="backBtn"
android:text="Terug"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollView" />
</androidx.constraintlayout.widget.ConstraintLayout>`

AdjustPan : The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing.
AdjustNothing : The window does not change at all here and the keyboard appears on top of it.
<activity android:name=".YourActivity" android:windowSoftInputMode="adjustPan"> </activity>
You can try one of them. Add your manifest file.

Layout has been misplaced while view in emulator and mobile

I'm implementing a login screen while implementing it in the Android Studio the deigning seems fine, but after building the app to emulator and mobile it seems weird, like the elements are misplaced, stretched and compressed. I'm using the drawable element in different sizes because I want this app to support multiple resolution devices.
Below image is from XML designing preview
Below image is a screenshot of emulator
Below image is from Android device
here is the xml design [link][4]
What I'm doing here wrong, any suggestions would be helpful
[4]: https://pastebin.com/d9MPen7c

The issue is you have not set the constraints properly. That is why it looks worse on the real devices.
Here is the 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tv_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:text="User Name"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_UserName" />
<TextView
android:id="#+id/tv_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Password"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/et_UserName" />
<EditText
android:id="#+id/et_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#id/iv_google_bt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_Password" />
<ImageView
android:id="#+id/iv_google_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
<ImageView
android:id="#+id/iv_fb_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:layout_toStartOf="#+id/iv_google_bt"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/iv_getstarted_login"
android:layout_width="0dp"
android:layout_height="75dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#id/constraintLayout">
</ImageView>
<ImageView
android:id="#+id/imageView"
android:layout_width="176dp"
android:layout_height="172dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout" />
<TextView
android:id="#+id/login_signup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_getstarted_login" />
<TextView
android:id="#+id/notamem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have placed my resources like dimen, String and drawable. So, Please change you resources with mine.

Here is my sample code for your problem. Adjust the given static value like drawable value in this code by using your own drawable resources. Hope i help you in little way
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEBEB">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="#+id/view"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_centerInParent="true"
android:background="#drawable/rectangle_round_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</View>
<ImageView
android:id="#+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-45dp"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#id/view" />
<TextView
android:id="#+id/txtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/img"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="70dp"
android:text="Username/Email" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtUsername"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_UserName"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="10dp"
android:text="Password" />
<EditText
android:id="#+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtPassword"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<ImageButton
android:id="#+id/imgleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginLeft="36dp"
android:background="#drawable/emoji"
android:layout_alignLeft="#id/view" />
<ImageButton
android:id="#+id/imgright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginRight="36dp"
android:background="#drawable/emoji"
android:layout_alignRight="#id/view" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_round"
android:layout_below="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:text="Get Started"
android:textAlignment="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="#id/view"/>
<TextView
android:id="#+id/txtNotAMemberYet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:text="Not a member yet"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/view"
app:layout_constraintBottom_toTopOf="#id/txtSignUp"
/>
<TextView
android:id="#+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtNotAMemberYet"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Sign Up"
android:textColor="#00BCD4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>

Android: Horizontal line view in Recyclerview blinking while scrolling

I am facing an issue in my Recyclerview item
it contains multi views as horizontal line when scrolling the lines are blinking and i don't know why.
this video explain the problem.
this is Recyclerviewitem.xml
<?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:card_view="http://schemas.android.com/tools"
android:id="#+id/new_post_list_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
>
<android.support.constraint.ConstraintLayout
android:id="#+id/new_post_upper_part_container"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/new_post_upper_user_image_view"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/new_post_upper_activity_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="50dp"
android:layout_marginTop="30dp"
android:src="#drawable/comment_notification"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/new_post_upper_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="Abdulmalek Dery and two other commented Rami Issa post"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/new_post_upper_user_image_view"
/>
</android.support.constraint.ConstraintLayout>
<View
android:id="#+id/new_post_upper_line_divider"
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:background="#BDBDBD"
app:layout_constraintTop_toBottomOf="#+id/new_post_upper_part_container" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/new_post_poster_image_circle_image_view"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#color/colorListDivider"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/new_post_upper_part_container" />
<TextView
android:id="#+id/new_post_user_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Rami issa"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/new_post_poster_image_circle_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_upper_part_container" />
<com.github.curioustechizen.ago.RelativeTimeTextView
android:id="#+id/new_post_date_relative_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="3 m"
app:layout_constraintStart_toEndOf="#+id/new_post_poster_image_circle_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_user_name_text_view" />
<ImageView
android:id="#+id/new_post_option_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/new_post_upper_part_container"
app:srcCompat="#drawable/post_options_icon" />
<TextView
android:id="#+id/new_post_image_description_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:text="nice image right?"
android:textColor="#color/black"
android:textSize="14sp"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="#+id/new_post_poster_image_circle_image_view" />
<LinearLayout
android:id="#+id/linear_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="#+id/new_post_image_description_text_view">
<ImageView
android:id="#+id/new_post_image_view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:visibility="visible"
android:src="#color/colorListDivider"/>
<me.grantland.widget.AutofitTextView
android:id="#+id/new_post_content_auto_fit_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="3"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:text="some post content that activity like that work"
android:textColor="#color/black"
android:textSize="40sp"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#+id/new_post_poster_image_circle_image_view"
app:minTextSize="16sp" />
</LinearLayout>
<View
android:id="#+id/new_post_lower_line_view"
android:layout_width="match_parent"
android:layout_height="0.8dp"
android:layout_marginTop="8dp"
android:background="#BDBDBD"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="#+id/linear_view" />
<ImageView
android:id="#+id/new_post_react_gray_image_view"
android:layout_width="#dimen/post_icons_dimen"
android:layout_height="#dimen/post_icons_dimen"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginTop="6dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
<ImageView
android:id="#+id/new_post_react_red_image_view"
android:layout_width="#dimen/post_icons_dimen"
android:layout_height="#dimen/post_icons_dimen"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginTop="6dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:src="#mipmap/love_gray_icon"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
<ImageView
android:id="#+id/new_post_comment_image_view"
android:layout_width="#dimen/post_icons_dimen"
android:layout_height="#dimen/post_icons_dimen"
android:layout_centerVertical="true"
android:layout_marginStart="12dp"
android:layout_marginTop="6dp"
android:layout_toEndOf="#+id/new_post_react_gray_image_view"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:src="#mipmap/comment_icon"
app:layout_constraintStart_toEndOf="#+id/new_post_react_gray_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
/>
<ImageView
android:id="#+id/new_post_share_image_view"
android:layout_width="#dimen/post_icons_dimen"
android:layout_height="#dimen/post_icons_dimen"
android:layout_centerVertical="true"
android:layout_marginStart="12dp"
android:layout_marginTop="6dp"
android:layout_toEndOf="#+id/new_post_comment_image_view"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:src="#mipmap/share_icon"
app:layout_constraintStart_toEndOf="#+id/new_post_comment_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
<ImageView
android:id="#+id/new_post_send_message_image_view"
android:layout_width="#dimen/post_icons_dimen"
android:layout_height="#dimen/post_icons_dimen"
android:layout_centerVertical="true"
android:layout_marginStart="12dp"
android:layout_marginTop="6dp"
android:layout_toEndOf="#+id/new_post_share_image_view"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toEndOf="#+id/new_post_share_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
<TextView
android:id="#+id/new_post_engagements_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="6dp"
android:clickable="true"
android:text="#string/post_engagements"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
<TextView
android:id="#+id/new_post_engagements_count_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_marginTop="6dp"
android:text="20"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/new_post_engagements_text_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_lower_line_view" />
<View
android:id="#+id/new_post_under_reacts_line_view"
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:layout_marginTop="6dp"
android:background="#BDBDBD"
app:layout_constraintTop_toBottomOf="#+id/new_post_send_message_image_view" />
<android.support.constraint.ConstraintLayout
android:id="#+id/new_post_comment_view_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#eceff1"
android:paddingBottom="12dp"
android:paddingStart="16dp"
android:paddingTop="12dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/new_post_under_reacts_line_view">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/new_post_user_image_in_comments_circle_image_view"
android:layout_width="42dp"
android:layout_height="42dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true" />
<TextView
android:id="#+id/new_post_user_name_in_comments_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Abdulmalek Dery"
android:textColor="#color/black"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/new_post_user_image_in_comments_circle_image_view" />
<com.github.curioustechizen.ago.RelativeTimeTextView
android:id="#+id/new_post_comment_date_relative_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="2 hour ago"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="#+id/new_post_user_image_in_comments_circle_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_user_name_in_comments_text_view" />
<TextView
android:id="#+id/new_post_comment_content_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:ellipsize="end"
android:maxLines="3"
android:text="some comment on this nice pic"
android:textColor="#color/black"
android:textSize="14sp"
app:layout_constraintStart_toEndOf="#+id/new_post_user_image_in_comments_circle_image_view"
app:layout_constraintTop_toBottomOf="#+id/new_post_comment_date_relative_text_view" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
and the problem also i have tested the app on Samsung A5 and it doesn't show any blink but in Huawei device show the blink.
any help?

Using android:layout_height with values as low as 0.1dp is not recommended, depending on devices screen density and views position this can be rounded down below 1 pixel which can cause view to disappear.
If you want to have really thin lines you can use direct pixel height like 1px instead of dp, that will be less scalable but should prevent blinking.

ConstraintLayout Stuck at Parent top despite being constrained to View

Searched around, can't find this issue specifically. Created an account specifically to ask WHAT'S HAPPENING HERE?!
Using a ConstraintLayout for the first time - I've had good success, but for some reason CANNOT get two of my Components to play nicely.
Here's what I WANT it to look like (accomplished by breaking constraints and hardcoding stuff):
...and here's the jumbled mess I get if I try to constrain "LabelJournal" and "linearLayout2":
The problems are happening for components named "LabelJournal" and "linearLayout2". Here's what my LayoutFile looks like... It's a WIP so I know right now there's a lot of hardcoding of text values and whatnot - I'm just trying to figure out WHAT in the world is causing these two components to get stuck at the top of the parent:
<?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">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/transparent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_left" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="14dp"
android:inputType="date"
android:text="03/04/2018"
android:textAlignment="center"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/imageButton2"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_right" />
<TextView
android:id="#+id/LabelJournal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Journal:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#id/ContentJournal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageButton" />
<TextView
android:id="#+id/ContentJournal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="The journal text would go in right about here. It should wrap to the next line for sufficientyl large text blocks."
android:textColorLink="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/LabelTags"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelJournal" />
<TextView
android:id="#+id/LabelTags"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:text="Tags:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#+id/horizontalScrollView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/ContentJournal" />
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="0dp"
android:layout_height="41dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelTags">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/TagDayOff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#DayOff"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagUntracked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Untracked"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagTravel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Travel"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagGames"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Games"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagMovie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Games"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
</LinearLayout>
</HorizontalScrollView>
<TextView
android:id="#+id/LabelDIet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Diet:"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/horizontalScrollView" />
<TextView
android:id="#+id/ContentCalories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelDIet"
tools:text="2813" />
<TextView
android:id="#+id/DietCalLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Cal"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentCalories"
app:layout_constraintStart_toEndOf="#+id/ContentCalories" />
<ProgressBar
android:id="#+id/ProgressCalories"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="-8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_green_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentCalories"
app:layout_constraintEnd_toEndOf="#+id/ContentProteinPercent"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentCalories" />
<TextView
android:id="#+id/ContentProtein"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentCalories"
tools:text="154" />
<TextView
android:id="#+id/DietProteinLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="P"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentProtein"
app:layout_constraintStart_toEndOf="#+id/ContentProtein" />
<ProgressBar
android:id="#+id/ProgressProtein"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_red_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentProtein"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentProtein" />
<TextView
android:id="#+id/ContentProteinPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentProtein"
tools:text="22 %" />
<TextView
android:id="#+id/ContentFat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentProtein"
tools:text="103" />
<TextView
android:id="#+id/dietProteinLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="F"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentFat"
app:layout_constraintStart_toEndOf="#+id/ContentFat" />
<ProgressBar
android:id="#+id/ProgressFats"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_orange_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentFat"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentFat" />
<TextView
android:id="#+id/contentProteinPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentFat"
tools:text="33 %" />
<TextView
android:id="#+id/ContentCarbs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentFat"
tools:text="302" />
<TextView
android:id="#+id/DietCarbLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="C"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentCarbs"
app:layout_constraintStart_toEndOf="#+id/ContentCarbs" />
<ProgressBar
android:id="#+id/ProgressCarbs"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_blue_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentCarbs"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentCarbs" />
<TextView
android:id="#+id/ContentCarbPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentCarbs"
tools:text="43 %" />
<TextView
android:id="#+id/LabelExercise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Exercise:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ContentCarbs" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="436dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelExercise" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/ImageExerciseAttribution"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelExercise"
app:srcCompat="#drawable/fit" />
<TextView
android:id="#+id/ContentExercise"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_weight="1"
android:text="45 min - PHUL Upper Power"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/ImageExerciseAttribution"
app:layout_constraintStart_toEndOf="#+id/ImageExerciseAttribution"
app:layout_constraintTop_toTopOf="#+id/ImageExerciseAttribution" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Perhaps I should also mention - I have no errors showing up in my Constraint Layout (although a ton of warnings about hardcoded text and whatnot that I'll deal with later).

Alright took me an hour of tinkering - but ever line in my Layout HTML that contains "layout_constraintBottom_toTopOf" caused the problem. I don't know if it's an ordering thing or some weird drawing hierarchy. It makes no sense to me how this got busted.