How can I get two auto-sized textviews to be centered vertically in the middle?

Question

I want the look on the left side. With fixed text size I have no problem creating that layout but I want to have auto-sized text sizes. Currently my best attempt at it produces the layout on the right side.

The code for my failed attempt is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout1"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/border"
    android:gravity="center"
    android:orientation="vertical">


    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/TextView1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Top"

        app:layout_constraintBottom_toTopOf="@+id/TextView2"
        app:layout_constraintVertical_bias="0"
        app:autoSizeMaxTextSize="40dp"
        app:autoSizeMinTextSize="4dp"
        app:autoSizeTextType="uniform" />
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/TextView2"
        app:layout_constraintTop_toBottomOf="@+id/TextView1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"

        app:layout_constraintBottom_toBottomOf="parent"
        android:text="Bottom"
        app:autoSizeMaxTextSize="24dp"
        app:autoSizeMinTextSize="4dp"
        app:autoSizeTextType="uniform"/>
</android.support.constraint.ConstraintLayout>

It produces

Answer 1

Easiest way would be to change the gravity of both TextViews so the first one is at the bottom center of its area and the second one is at the top center. To achieve it you should set android:gravity="bottom|center_horizontal" on the first TextView and android:gravity="top|center_horizontal" on the second.

Result:

As a side note it is not advised to use match_parent for children of the ConstraintLayout as metioned in the documentation:

Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

Answer 2

This code:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout1"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/border"
    android:gravity="center"
    android:orientation="vertical">


    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:text="Top"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/TextView2"
        app:layout_constraintVertical_chainStyle="packed"
        app:autoSizeMinTextSize="4sp"
        app:autoSizeMaxTextSize="40sp"
        app:autoSizeTextType="uniform" />
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/TextView2"
        app:layout_constraintTop_toBottomOf="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="24dp"
        android:gravity="center"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="Bottom"
        app:autoSizeMaxTextSize="24sp"
        app:autoSizeMinTextSize="4sp"
        app:autoSizeTextType="uniform"/>
</android.support.constraint.ConstraintLayout>

should give you what you are trying to achieve. Let me know if you need more help.

Update So after searching a lot it seems like you can only have:

1. match_parent
2. 0dp (match_constraint)
3. absolute value

for layout_width and layout_height of an autoSizeTextView. If it were me, I would use an absolute value since you know the autoSizeMaxTextSize value. I have updated my code to reflect that change. Let me know if that works for you. Also, having autoSize attributes as dp would defeat the purpose because it would always be maximum size which is why I changed it to sp