Constraint layout does not center when wrap_content is used

Question

I have a simple layout that I created for my learning app. But, my controls inner layout does not center, in fact it's very off center. Can you please help?

<?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"
tools:context=".MainActivity">

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Gotta catch em all!"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginTop="18dp"
    android:textSize="28sp"/>

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/controls"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/title"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginTop="32dp"/>

    <EditText
        android:id="@+id/search_pokemon_txt"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="@+id/controls"
        app:layout_constraintStart_toStartOf="@+id/controls"/>

    <Button
        android:id="@+id/search_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toTopOf="@+id/controls"
        app:layout_constraintStart_toEndOf="@+id/search_pokemon_txt"
        android:layout_marginStart="12dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Thank you, Android Newbie

Answer 1

The problem is you're closing the inner constraint layout without items in it.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/controls"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/title"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginTop="32dp"/>   <----- this should be just ">"

So your edit text and button are currently OUTSIDE of the inner layout.

This is also evident if you look in Android Studio, at the end where you have these final two lines:

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

One is in red, because you're closing two CL, when in fact the inner one (controls) is already closed above.

After you rectify the wrong /> and put the correct >, this will stop being red and go back being normal.