Develop Reference

Create layout using only constraint layout and text view

I am new to android and constraint layout, can you please help me create this layout using only Constraint Layout and Text Views? Don't bother with text/color, just the layout itself.
This is what I have so far, layout seems ok but not quite like in the picture. I don't know if just the different resolution or aspect ratio.
<?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">
<TextView
android:id="#+id/textView45"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/blackk"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView49"
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/textView47"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/teal_200"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView46"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray"
android:text="TextView"
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/textView50" />
<TextView
android:id="#+id/textView48"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/Accent"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
</androidx.constraintlayout.widget.ConstraintLayout>

Did some modifications in the margins of these two. Now, the layout is looking similar to the one in the image you showed:
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
You can further increase the margins but that's upto you.
Edit: I would suggest you playing with layout_constraintHeight_percent attribute to solve those height irregularities.

How to align TextView in two lines between images in ConstraintLayout

I'm doing some design in constraintlayout that is give me a pain. I have an image at the left, two text in a vertical orientation that is align at the end of this image and I have other constraints at right with an image and text.
If I type a long text in the two text that i have in a vertical orientation the text cover the constraint that I have at right of my view. That I want to do is if this text is long can't cover this constraint, have to expand to other line.
This is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="8dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_error" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/app_primary_medium"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/image_slider"
app:layout_constraintTop_toTopOf="#+id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraint_undo_button"
android:layout_width="31dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="14dp"
android:layout_height="16dp"
android:src="#drawable/icon_loop"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/icon_loop"
tools:visibility="visible" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="Ree"
android:textColor="#color/app_primary_medium"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_undo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I recommend you use only one parent view and read about Guideline view, Constraints Chains and Barriers. So a possible solution could be the next:
And the 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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<!-- In the parent constraint group add your custom background -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_80_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="#id/guideline_80_percent"
app:layout_constraintStart_toEndOf="#id/image_slider"
app:layout_constraintTop_toTopOf="#id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="#id/image_slider"
app:layout_constraintEnd_toEndOf="#id/txt_title_animation_native_cart"
app:layout_constraintStart_toStartOf="#id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t adfadf adflkjadfkj adlkjadflk" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#id/text_undo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline_80_percent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/text_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/image_undo"
app:layout_constraintStart_toStartOf="#id/image_undo"
app:layout_constraintTop_toBottomOf="#id/image_undo"
tools:text="Ree" />
</androidx.constraintlayout.widget.ConstraintLayout>

First, you don't need two nested constraint layouts, one is enough.
Then just set the text with endToStartoOf image_undo and set the width to 0dp instead of wrap_content

Just do this:
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
app:layout_constraintEnd_toStartOf="#+id/constraint_undo_button"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />

ConstraintLayout TextView cutting text off

I have a strange problem where the text in a TextView is not being displayed if it's wrapping to a new line.
This screenshot shows my issue:
The bold text is causing a word to wrap to the next line but it's not being shown. This is what it looks like without the bold:
And this is what it looks like if I force two lines using android:lines="2":
This is the code I'm using:
<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:breakStrategy="simple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried setting the width to wrap_content and changing the padding and margins but nothing works.
I should mention this layout is a row in a RecyclerView if that makes a difference.

<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:textStyle="bold"
android:text="Episode 1010 Christina Hendericks"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/episode_row_item_title_thumbnail"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginRight="8dp"/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
android:text="Yesterday"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="01:02:24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_download"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using the above layout with correct drawables

How to keep width/height ratio inside a LinearLayout?

I am trying to implement a layout like this:
I had added a code like below, but the problem is that the two ImageViews' heights is zero in the final rendered layout. I don't know why the app:layout_constraintDimensionRatio="1:1" (height to width ratio 1:1) has no effect? Did I missed something?
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/orange_gradient"
app:layout_constraintDimensionRatio="1:0.5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal"
android:weightSum="10">
<!-- want height to be constrained by 1:1 to width -->
<ImageView
android:id="#+id/croppedFaceImageView"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/confidenceLabel"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:text="90%"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="8sp"
android:background="#android:color/holo_green_dark" />
<ImageView
android:id="#+id/avartarImageView"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:background="#android:color/holo_orange_dark" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

You can only use app:layout_constraintDimensionRatio in a ConstraintLayout.
However, there is a way to achieve what you're looking for.
Replace the LinearLayout with ConstraintLayout and follow the following code template on your xml design
NB. Notice that the trick to have the child views line out properly is using constraint rules against each child.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sun"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/mon"
android:text="S"/>
<TextView
android:id="#+id/mon"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/sun"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tue"
android:text="M"/>
<TextView
android:id="#+id/tue"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/mon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/wed"
android:text="T"/>
<TextView
android:id="#+id/wed"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/tue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/thur"
android:text="W"/>
<TextView
android:id="#+id/thur"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/wed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fri"
android:text="T"/>
<TextView
android:id="#+id/fri"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/thur"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/sat"
android:text="F"/>
<TextView
android:id="#+id/sat"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/fri"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="S"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The above code will create something like:

How to layout 2 textviews in a custom compound constraint layout

I'm trying to give two Textviews the correct position in the Constraintlayout in my layout file. The problem is the textviews needs to be scalable using app: autoSizeTextType="uniform". To make them scale I also have to match_parent on the layout_width and layout_height. This makes the two textviews overlap. How can I accomplish the desired result?
Current 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="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.362" />
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Actual result:
Both textviews scales, but overlaps, and are placed in the center of the constraintlayout.
The current state:
The expected result:
One textview centered in the middle. One textview aligned at the bottom. Both textviews scales with the constraintlayout.
Expected result: (3 different custom compounds in an activity)

you have to give top and bottom proper constraint
<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/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

It might be helpful
<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:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:gravity="center"
android:text="1"
android:textSize="50sp"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textSize="28sp"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
</android.support.constraint.ConstraintLayout>
Textview size we have to add

Modify the TextView to have height and width of 0dp, this will match parent constraint view, add in a constraint for the views in relation to each other and that should give you as you asked for
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />