Constraint layout switch view position relative to another view

Question

In this layout, the button is initially on the right side of the textview.

<?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:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.switchside.SwitchSideFragment">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="Hello"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

What would be the easier way to, at runtime put the button on the left side of the textview with its left side connected to the left side of the parent?

you can see this answer https://stackoverflow.com/questions/45263159/constraintlayout-change-constraints-programmatically to check out how to do it programmatically, if it was me though I would probably just add a button to either side and make the one I don't want the user to see Gone, it is far easier imo and less messy — Cruces, Nov 16 '18 at 15:55
Thanks! I would also prefer to avoid programmatically change the constraintset, but having duplicated views doesnt seem to be good either. That layout is just an example. My real layout is much more complex... — amp, Nov 16 '18 at 16:19

Gregorio Palamà · Accepted Answer · 2018-11-16T16:28:50.417

If I take it right, what you want to achieve is moving a button from a side to an other of the textview. Of course, you could do it programmatically, just by chaning the constraints you've applied to the button. It surely will work, but the maintenability of this solution is low if compared to other solutions.

What I suggest is to use ConstraintSets. ConstraintSets are basically a set of rules, of Constraints. You've already defined a set of constraints in this layout file. You can duplicate this exact layout file, changing its name, and apply different constraints: you'll have a new set of contraints. Note that you'll have to use the same IDs in order to make ConstraintSets to work. This is mandatory.

After creating the second set, you can just switch from one to an other by applying the chosen set to the root ConstraintLayout. Please, take a look at the official documentation for a full example: https://developer.android.com/reference/android/support/constraint/ConstraintSet

EDIT: I'll add an example. Starting from your first layout XML, let's call it R.layout.first, you will create the second one, let's call it R.layout.second.

To programmatically switch from first to second, you'll do something similar to this:

ConstraintSet firstCS = new ConstraintSet(); //this will reference the first set
ConstraintSet secondCS = new ConstraintSet(); // this will reference the second set
ConstraintLayout constraintLayout = findViewByID(R.id.frameLayout); //this will reference the root constraint layout in your layout XML

firstCS.clone(constraintLayout); // you will get the first set directly from the root layout
secondCS.clone(getContext(), R.layout.second); //and you will clone the second set from your layout XML
secondCS.applyTo(constraintLayout); // this will apply the second set

I've edited my answer to add an example. Let me know if you need further examples — Gregorio Palamà, Nov 16 '18 at 16:29

Constraint layout switch view position relative to another view

1 Answers1