Recent Changes‎ > ‎

Revamped RelativeLayout Support

posted Jun 15, 2011, 9:09 AM by Tor Norbye
The support for RelativeLayouts has been revamped significantly in ADT 12. First, there are guideline suggestions when you drag into or within the layout. The guidelines suggest attachments to other widgets or parent boundaries, and it ensures that you don't accidentally introduce cycles.

Here's a button getting dragged into a RelativeLayout - it's attached to the nearest parent edges with a certain amount of margin. If the margin drops below a certain threshold, the widget will snap to be directly adjacent to the matching edge.

Dragging a second widget will show more suggestions - here we have horizontal and vertical attachments to the first button:
The guideline support works for the new resize support too. You can drag and attach any edge independently of the other edges. To remove a constraint, just drag the edge to a location where there is no match and release.

Another new feature is support for selection feedback: Existing constraints are drawn for the selection. This will show both the outgoing dependencies, as well as any incoming dependencies on this widget from other widgets.

Let's say you have the following layout:
If you select the bottom left button, note that it will both show the constraint that this button is attached below and left-edge-aligned with the button above, but it will also show the incoming dependencies from the button to its right:
The slight yellow tint here is also showing all the widgets that depend on this node, transitively, through constraints.

The guideline support makes sure that you cannot introduce cycles. For example, here we're resizing the right edge of the button on the bottom, and it offers to align the right edges:
Here's what happens if you try to drag the right edge of the top toggle button: notice that it does not offer to attach this to the button edge below since this edge's horizontal position indirectly depends on the horizontal position of itself.
Another complication that the RelativeLayout support handles is dealing with margins. Let's suppose a widget has margin=50dp in all directions. Did you know that if you layout_alignBottom with the widget, you will align with the visible bounds of the widget, but if you layout_below the widget, you will align with the margin bounds?

The layout editor knows this, so if the button on the right has the margin bounds, notice how dropping another button next to it will offer to align the two widgets along their visible bottom edge:
However, notice that if you try to align below, the layout editor will show the margin edge in a special way to indicate that this is where you can attach, and dragging anywhere closer is not going to offer a match:

Finally, note that you can also turn on visualizing all constraints in the layout. Here's a more complicated RelativeLayout where you can see top/left attachments, bottom/right attachments, centering, and some shared edges: