Android Studio布局-在同一行上彼此相邻的两个textview的父级中水平居中

Question

I have a beginners question about relative layouts and centering of two textviews in Android Studio. I have two textviews that are aligned on the same line and the right one is aligned "toEndOf" the left textview. Now how do I center them both horizontally in the parent so the line of text is centered left to right on the screen? See image.

With the given layout, "I Am" is nicely centered horizontally, but I want the both textviews taken together to be centered so that "I Am Poor" is centered.

Answer 1

I would put them inside another layout (as linear with horizontal orientation) and then center that other layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:gravity="center_horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:text="ONE"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:text="TWO"/>
    </LinearLayout>

</RelativeLayout>

Answer 2

The modern replacement for RelativeLayout is ConstraintLayout . In a ConstraintLayout, you can create what are called chains of views, and then define centering behavior for the entire chain.

Here's how you'd do 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">

    <TextView
        android:id="@+id/small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="short"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/large"/>

    <TextView
        android:id="@+id/large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="very very very long"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/small"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The chain is formed by connecting both the start and the end of both views to each other and to the parent:

android:id="@+id/small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/large"

android:id="@+id/large"
app:layout_constraintStart_toEndOf="@id/small"
app:layout_constraintEnd_toEndOf="parent"

You then also apply the packed style so that the views are positioned exactly next to each other, rather than spread out with space between them:

app:layout_constraintHorizontal_chainStyle="packed"

In the end, this is the result: