ConstraintLayout: how to center a view under another and also stay within parent bounds?

Question

I want to center a view under another like this "sign out" button under the email:

I did this by using a ConstraintLayout as the parent and constraining the bottom view's left and right edges to the left and right edges of the top view. This properly centers the two views. (Note that I don't want to center the views in the parent.)

The problem I'm having is that if the top view is narrow, the bottom view can end up truncated on the right by the parent, as here (from the layout editor):

I don't know in advance how narrow the top view will be at run time. (It won't necessarily be an email address, and, even if it were, I know someone whose email address is only 8 characters!)

I would like to set up constraints so that the bottom view is centered under the top view, but if it ends up too far to the right, it shifts left just enough to avoid crossing a guideline. The right edge of the top view needs to remain fixed. How can I achieve this effect? (I'm not wedded to using a ConstraintLayout if there's another way that will work better.)

Here's the actual layout file I'm using:

<?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">

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="10dp"
        android:text="user"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1"/>

    <View
        android:id="@+id/scrim"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/transparent"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintTop_creator="1"
        tools:visibility="visible"/>

    <Button
        android:id="@+id/sign_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@android:drawable/dialog_holo_light_frame"
        android:text="@string/sign_out"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/user_name"
        tools:visibility="visible"/>

</android.support.constraint.ConstraintLayout>

Answer 1

This sounds to me like a case where ConstraintLayout isn't the best tool for the job. You might still wind up using ConstraintLayout as your top-level view, but to get what you want I believe you will have to nest your TextView and Button inside a LinearLayout.

The core of the problem is that you want whichever view is wider to touch the edge of the parent, and whichever view is smaller to be horizontally centered against the wider view. Given that ConstraintLayout doesn't let you do more than one constraint for a given view's edge, it's not capable of doing this.

A vertical LinearLayout with android:gravity="center_horizontal" should do exactly what you want, however. And then you can position that at the top-right of your screen (maybe by using ConstraintLayout, or maybe some other way).

Edit

After re-reading your question, I realize I misunderstood your requirements. You need the TextView to always be positioned in the top-right corner, and the Button to be centered beneath the text view unless that would cause it to be clipped by the edge of the parent.

I still think LinearLayout is the way to go here, but you'll need to be a little more sophisticated with its children. This should work:

<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">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        constrants=top-right>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"/>

    </LinearLayout>

</ConstraintLayout>

Answer 2

Suppose there are 2 views.

• Select first view
• Press shift
• Select the second view.
• Right click
• Select Align >> Horizontal Centers.

Done.