How to left align to a centered text in Android

Question

The code below is producing this.

I would like this layout instead:

The large textView on top takes the full with of the parent and the textsize is auto-adjusting with android:autoSizeTextType="uniform". I want to align the textViews below with the actual text, not with the frame of the textView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
tools:context=".DisplayActivity">

<TextView
    android:id="@+id/timeTextView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:autoSizeMaxTextSize="5000dp"
    android:autoSizeTextType="uniform"
    android:gravity="center_horizontal"
    android:text="2:01:04"
    android:textColor="@color/textColor"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/timeTextView2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginStart="148dp"
    android:text="2:01:05"

    android:textColor="@color/textColor"
    android:textSize="50dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintStart_toStartOf="@id/timeTextView"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/timeTextView3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginEnd="152dp"
    android:text="2:01:07"
    android:textColor="@color/textColor"
    android:textSize="50dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toEndOf="@+id/timeTextView"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:layout_constraintVertical_bias="0.0" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.59" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.75" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

 </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Since the size and relative position of the text in the top TextView will change depending upon screen size, orientation and autoresizing, there is not a single set of values that you can use to position the other two views and no constraint that will work, so you will have to approach this via code using the Layout of the top TextView after the layout passes complete. The Layout will give you the values of where the text starts within the TextView and where it ends. See the comments in the following for details. I changed the layout a little for the demo. (There are two layouts here: One if the ConstraintLayout and the other is internal to the TextView which defines how the text appears.)

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TextView tv;
    private Guideline guidelineStart;
    private Guideline guidelineEnd;
    private ConstraintLayout layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // This is the top TextView
        tv = findViewById(R.id.timeTextView);
        
        // Get the vertical start and end guidelines which are set to 0% and 100% to start. The
        // left bottom TextView is constrained to the guidelineStart and the right bottom
        // TextView is constrained to guidelineEnd.
        guidelineStart = findViewById(R.id.guidelineStart);
        guidelineEnd = findViewById(R.id.guidelineEnd);
        
        // This is our ConstraintLayout. We will wait for everthing to layout so we can get
        // good measurements.
        layout = findViewById(R.id.layout);
        layout.post(() -> {
            int layoutWidth = layout.getWidth();
            
            // Get the starting and ending positions from the Layout of the top TextView.
            float start = tv.getLayout().getLineLeft(0);
            float end = tv.getLayout().getLineRight(0);
            
            // Now set the start and end guidelines to shift our bottom two TextViews.
            // We could also use guidelines with pixel offsets.
            guidelineStart.setGuidelinePercent(start / layoutWidth);
            guidelineEnd.setGuidelinePercent(end / layoutWidth);
        });
    }
}

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <TextView
        android:id="@+id/timeTextView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:autoSizeMaxTextSize="5000dp"
        android:autoSizeTextType="uniform"
        android:gravity="center_horizontal"
        android:text="2:01:04"
        android:textColor="@color/textColor"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.15" />

    <TextView
        android:id="@+id/timeTextView2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="2:01:05"
        android:textColor="@color/textColor"
        android:textSize="25sp"
        android:visibility="visible"
        app:layout_constraintStart_toEndOf="@id/guidelineStart"
        app:layout_constraintTop_toBottomOf="@id/timeTextView" />

    <TextView
        android:id="@+id/timeTextView3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="2:01:07"
        android:textColor="@color/textColor"
        android:textSize="25sp"
        android:visibility="visible"
        app:layout_constraintEnd_toStartOf="@+id/guidelineEnd"
        app:layout_constraintTop_toBottomOf="@id/timeTextView" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.0" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Try this....

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="@+id/guideline2">

    </RelativeLayout>

    <TextView
        android:id="@+id/timeTextView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:autoSizeMaxTextSize="5000dp"
        android:autoSizeTextType="uniform"
        android:gravity="center_horizontal"
        android:text="2:01:04"
        android:textColor="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="@+id/guideline6"
        app:layout_constraintStart_toStartOf="@+id/guideline5"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/timeTextView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:text="2:01:05"
        android:textColor="@color/white"
        android:textSize="50dp"
        app:layout_constraintEnd_toEndOf="@+id/guideline3"
        app:layout_constraintStart_toStartOf="@+id/timeTextView"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <TextView
        android:id="@+id/timeTextView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="4dp"
        android:gravity="end"
        android:text="2:01:07"
        android:textColor="@color/white"
        android:textSize="50dp"
        app:layout_constraintEnd_toEndOf="@+id/timeTextView"
        app:layout_constraintStart_toEndOf="@+id/timeTextView"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />
   
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.59" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.75" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.9" />

</androidx.constraintlayout.widget.ConstraintLayout>

here is how it will look

Hope it work for you... :)