CODEWITHSUNDEEP
android-layoutandroid-studioandroid-constraintlayoutconstraint-layout-chains
C.Kraz
C.Kraz

Reputation: 483

Can't form a chain between two views/widgets in Android Studio

When I'm using the layout editor in Android Studio and I try to make a chain (bidirectional constraint) between a EditText View and a Button View using the constraint anchors, it doesn't make the chain.

It only makes a constraint if I try to constrain one View to the other.

I am trying to chain the right side of the EditText to the left side of the Button.

This is what my Layout Editor looks like:

Layout Editor

Upvotes: 42

Views: 21665

Answers (16)

user16336788
user16336788

Reputation: 11

This can specifically be resolved by holding the shift button and pressing both of the widgets. After this process, you can then right-click one of the widgets to be able to chain the views. Use this for the EditText View as well as the button particularly.

Upvotes: 1

Danny
Danny

Reputation: 1

I was having the same issue as well and what worked for me was selecting both views while holding the CMD button instead of the SHIFT button.

As a reference, I'm using the macOS version of Android Studio and was selecting both views using the SHIFT button which resulted in Chains being grayed-out.

I hope that helps somebody!

Upvotes: 0

Andrew Wetherill
Andrew Wetherill

Reputation: 21

I worked out that in Android Studio 3.2.2 you have to click on the views in the component tree, so left click first component and then holding shift click the second component and then right click and in the menu you will see chains as in my screenshot below.

Android Studio 3.2.2

enter image description here

Upvotes: 2

Dror
Dror

Reputation: 5505

what caused the problem for me- i duplicated one of my views in my layout (to speed things up- or so i thought). by doing so - i caused the problem - several views had the same android:id value. which is a big no-no.

a unique value to all my view (by changing the android:id ) helped fix this problem

Upvotes: 0

Ori Elkobi
Ori Elkobi

Reputation: 81

In Android Studio 3.0.1, choose the two objects (on the xml design tab) and right click on one of them and you will have under "chain" option two options: one to chain horizontally and second to chain vertically.

enter image description here

Upvotes: 8

ikiSiTamvaaan
ikiSiTamvaaan

Reputation: 147

I had the same problem before, and from what I can I tell, we have the same problem.

The tutorial expects you to use android studio 3 version. When I got this problem, I realized that my android studio still 2.2.3. After installing the update for the version 3 and sdk etc to the latest version it worked.

Hope this helps.

Upvotes: 0

usernotnull
usernotnull

Reputation: 3628

The DESIGN tab is very prone to bugs! Just do what you'd want to do in the design but write it via XML. No need for tutorials it's self-explanatory, connect all the lefts and rights!

Upvotes: 0

Canato
Canato

Reputation: 3968

I got a solution, probably will not be the best one until someone really answer properly, but works. I hope this helps others guys who stuck in the same place as me, so you can continuous the work.

Looks like the interface of android studio is not working properly when came to create chains. Some options from people here work for like 2 or 3 elements, but I has 5 elements.

So the answer is solve this in the code XML.

My steps are for Horizontal arrangement, if you wanna vertical just change Right/Left for Top/Bottom

I put all the elements in the place that I want and remove all connections. (Than in my case I connect the top and bottom so they can be in the middle.)

Then I connect the first element in the left and the last element in the right. And connect the right of each element in the left side of the next element.

app:layout_constraintRight_toLeftOf="@id/right_element"

Image of elements connect normal, no chain yet

After that I go inside the code and put manually the connection to the left element.

app:layout_constraintLeft_toRightOf="@+id/left_element"

And the chain was created. Image of elements connect with chain

I hope this help, sorry for don't post the pictures, I don't have reputation enough yet XD.

Upvotes: 3

4dc0
4dc0

Reputation: 453

I disobeyed the tutorial by turning on Autoconnect (because I was trying everything).

I selected both widgets, then selected Center Horizontally. The chain was created, I turned Autoconnect back off, then continued the tutorial.

Upvotes: 0

Charith
Charith

Reputation: 87

Just a tip when following the tutorial is to make sure that the Android Studio is upto date. I was wondering where certain buttons are when following the tutorials but found i was using an older version.

In terms of the question, the best is given by James @ 6/6/17.

  1. Add three buttons into the view
  2. Select them all and right click
  3. Select "Center Horizontally"

This does the trick to create the chain

Upvotes: 0

james
james

Reputation: 167

The way I have been able to create a chain view in the blueprint layout is by drag click, select the objects to be linked. Then while they are selected right click and select "center horizontally" After doing this I can then create the other constraint and chain

Upvotes: 1

Pavan
Pavan

Reputation: 5136

i think android studio ui editor need more improvement for creating chain currently i am using Android Studio Preview 3.0 Canary 3

Sometime from editor it works perfectly but sometime it not, when linking not happen from ui editor we need to add constraint manually as per requirement Vertical or horizontal chain following are constraints

layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

and also we declare chain style manually in XML as follow

layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle

CHAIN_SPREAD -- the elements will be spread out (default style)

Weighted chain -- in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space

CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain will not be spread out

CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

hope android studio editor will improve this

Upvotes: 2

Anurag
Anurag

Reputation: 11

Resolved by adding constraints in both edit text (app:layout_constraintRight_toLeftOf="@+id/button") and button (app:layout_constraintBaseline_toBaselineOf="@+id/editText")

Complete example as below

<EditText
    android:id="@+id/editText"
    android:layout_width="245dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="16dp"
    android:ems="10"
    app:layout_constraintRight_toLeftOf="@+id/button"
    android:hint="@string/edit_message"
    android:inputType="textPersonName"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginTop="16dp"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    android:layout_marginRight="16dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBaseline_toBaselineOf="@+id/editText"
    app:layout_constraintLeft_toRightOf="@+id/editText"
    android:layout_marginLeft="16dp" />

Upvotes: 1

qacwnfq q
qacwnfq q

Reputation: 345

I solved this by creating the chain in blueprint mode. The tutorial never says you have to go back to it but if you do you can create the chain.

Upvotes: 0

Gustav Eriksson
Gustav Eriksson

Reputation: 123

I had the same issue. Solved it by going in into the XML as instructed by the tutorial: https://developer.android.com/training/basics/firstapp/building-ui.html

On the tutorial, click "See the final layout XML" and compare. My XML was missing:

app:layout_constraintLeft_toRightOf="@+id/editText"

Upvotes: 12

Swud
Swud

Reputation: 281

I was trying to figure this out too. I've discovered that one way to do it is to select both views, then right click and select Center Horizontally. This creates the chain, but then you have to adjust any other constraints accordingly. I'm new to Android, so I'm sure there will be other ways....

Upvotes: 20

Related Questions