How to create a layout that scales correctly in Android Studio

Question

I've been trying for months to create a layout like this: in Android studio, which will take up the whole screen (but there will be scrolling textViews in the black boxes that you see in the background) .I've built my project's folder structure as indicated in the Google Developers website (hdpi,xhdpi,xxhdpi,xxxhdpi) and the layout using a ConstraintLayout but still I face the same issue.The horizontal textViews, although the user's screen changes in size and density they move off of their desired position thus ruining the user's experience.I'm baffled since I have done everything in my power to fix this.I've read multiple articles but if anybody has any good reading suggestions, feel free to let me know.

Here's my .xml file:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/card_details_open">
<android.support.constraint.Guideline
    android:id="@+id/hor_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="111dp" />

<TextView
    android:id="@+id/first"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
    android:textColor="@color/white"
    app:layout_constraintEnd_toStartOf="@+id/vert_right"
    app:layout_constraintStart_toStartOf="@+id/vert_left"
    app:layout_constraintTop_toTopOf="@+id/hor_top" />

<TextView
    android:id="@+id/second"
    android:layout_width="0dp"
    android:layout_height="19dp"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="18dp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:paddingBottom="-10dp"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
    android:textColor="@android:color/holo_blue_light"
    app:layout_constraintEnd_toStartOf="@+id/vert_right"
    app:layout_constraintStart_toStartOf="@+id/first"
    app:layout_constraintTop_toBottomOf="@+id/first" />

<TextView
    android:id="@+id/third"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:paddingBottom="@dimen/_2sdp"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
    android:textColor="@color/white"
    app:layout_constraintBottom_toTopOf="@+id/hor_bot"
    app:layout_constraintEnd_toStartOf="@+id/vert_right"
    app:layout_constraintStart_toStartOf="@+id/second" />

<android.support.constraint.Guideline
    android:id="@+id/hor_bot"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="198dp" />

<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_weight="1"
        android:text="TextView"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="25dp"
        android:layout_weight="0.30"
        android:text="TextView"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_weight="1"
        android:text="TextView"
        android:textColor="@color/white" />
</LinearLayout>

<android.support.constraint.Guideline
    android:id="@+id/vert_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="72dp" />

<android.support.constraint.Guideline
    android:id="@+id/vert_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="335dp" />

</android.support.constraint.ConstraintLayout>

Answer 1

It's because your guideline "vert_right" is constrained with a fixed distance to the left layout border, but it should be constrained to the right layout boarder. Just change this

<android.support.constraint.Guideline
    android:id="@+id/vert_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="335dp" />

into this

<android.support.constraint.Guideline
    android:id="@+id/vert_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="72dp" />