How to keep my Right item right when the constraints item on the left is gone (Constraint Layout)

Question

I have a code as below

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/left_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#F40"
            android:textSize="26sp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/right_text"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#F40"
            android:textSize="26sp"
            android:fontFamily="serif-monospace"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/left_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

It looks like below.

However, at times I need to set left_text to gone . But I still want my Right to be at the right side of the screen. How could I achieve that?

(Currently when left_text is gone , my Right went to middle as per picture below)

Answer 1

I manage to solve it by setting my width="0dp" and android:textAlignment="viewStart" or android:textAlignment="viewEnd"

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/left_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#F40"
            android:textSize="26sp"
            android:textAlignment="viewStart"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/right_text"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#F40"
            android:textSize="26sp"
            android:textAlignment="viewEnd"
            android:fontFamily="serif-monospace"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/left_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

The width="0dp" will take up the entire space

Answer 2

You need to use Barriers

Try this

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

    <TextView
        android:id="@+id/left_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Left"
        android:textColor="#F40"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:constraint_referenced_ids="left_text"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:barrierDirection="end" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="serif-monospace"
        android:text="Right"
        android:textColor="#F40"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

OUTPUT When both textview is Visible

OUTPUT When Visibility Gone of left_text

UPDATE

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

    <TextView
        android:id="@+id/left_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft"
        android:textColor="#F40"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:constraint_referenced_ids="left_text"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:barrierDirection="end" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="serif-monospace"
        android:text="Right"
        android:textColor="#3F51B5"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

OUTPUT When both textview is Visible

OUTPUT When Visibility Gone of left_text

Answer 3

You can achieve this using Guideline . check example below

  <TextView
            android:id="@+id/left_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#F40"
            android:textSize="26sp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/guideline10"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="serif-monospace"
            android:text="Right"
            android:textColor="#F40"
            android:textSize="26sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/guideline10"
            app:layout_constraintTop_toTopOf="parent" />

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

Answer 4

My answer is similar to @Basi but I want to give extra information from my perspective:

When you work with guidelines and put your view width to wrap_content what may happen is that your view will overlap your guideline like this :

So my recommendation is to constraint both side of your view and set its width to 0dp (match_constraints ) and by doing it your view will fit into its bounds and your guideline won't overlap your view, then this will look like this now :

So if you want to use guidelines as in @Basi you better use 0dp on your width:

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


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

<TextView
    android:id="@+id/textView10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Right"
    android:textColor="#F40"
    android:textAlignment="textEnd"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline10"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Left"
    android:textColor="#F40"
    android:textAlignment="textStart"
    app:layout_constraintEnd_toStartOf="@+id/guideline10"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this :

Answer 5

You can also use SequenceLayout to make it work.

<Sequences>
    <Horizontal>
        <Span id="@id/left_text" size="wrap"/>
        <Span size="1w"/>
        <Span id="@id/right_text" size="wrap"/>
    </Horizontal>
</Sequences>

Answer 6

I tried your code and I am curious, why do you use constraint from Left to Right and from Right to Left? There is no need for them. If you delete those constraints you have no problem.

Just to make things clear for setting view's position you need just one horizontal and one vertical constraint.

Answer 7

You need bias for both TextView in Constraint Layout and app:layout_constraintStart_toStartOf="parent" of another TextView.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:textColor="#F40"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:fontFamily="serif-monospace"
        android:text="Right"
        android:textColor="#F40"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>