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 c

Answer 1

I didn't get you perfectly, but I'm posting the answer for what I understood.

<?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_marginTop="20dp"
    android:layout_marginRight="20dp"
    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" />

<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="SIGNOUT"
    android:visibility="gone"
    app:layout_constraintTop_toBottomOf="@id/user_name"
    tools:visibility="visible"
    app:layout_constraintLeft_toLeftOf="@+id/user_name"
    app:layout_constraintRight_toRightOf="@+id/user_name" />

Answer 2

I think here it is try it

<?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@mail.com"
    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:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintVertical_bias="0.0"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/sign_out"
    app:layout_constraintHorizontal_bias="0.0" />

<Button
    android:id="@+id/sign_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="11dp"
    android:background="@android:drawable/dialog_holo_light_frame"
    android:text="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:layout_marginRight="11dp" />

</android.support.constraint.ConstraintLayout>

Answer 3

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 4

Suppose there are 2 views.

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

Done.