Home » Android » Android Studio Layout Editor ConstraintLayout: pack vs chain

Android Studio Layout Editor ConstraintLayout: pack vs chain

Posted by: admin June 15, 2020 Leave a comment

Questions:

In the Android Studio Layout Editor I see the words “pack” and “chain” with respect to a ConstraintLayout. I know they both have something to do with multiple views being connected to each other in a line, but their difference is not clear to me.

enter image description here

enter image description here

enter image description here

What is the difference between “pack” and “chain”?

How to&Answers:

Short answer

A Chain is a group of views that are bound together in a vertical or horizontal line. Pack means that the views should be kept very closely together, ie, touch each other (excluding any padding).

Pack

Pack means that the views are packed tightly together. Imagine that you are packing your clothes tightly together in a suitcase before going on a trip.

enter image description here

Points to note:

  • You can pack views horizontally or vertically.
  • Packing doesn’t in itself doesn’t constrain the views to each other.

    • If they are not already chained, then packing moves their absolute position in the Layout Editor so that they are adjacent to each other.
      enter image description here
    • If they are chained, then setting the Chain mode to packed binds them closely together.

      app:layout_constraintHorizontal_chainStyle="packed"
      

      enter image description here

Chain

A chain occurs when two adjacent views both have constraints to each other. Imagine an iron link chain.

enter image description here

The documentation shows this well.

enter image description here

This chain can continue where every link (view) in the chain has a two-way link to its neighbors.

enter image description here

Chain mode/style

As I briefly mentioned above, there are different modes or styles for a chain. They are shown below (image from docs).

  1. Spread (default)
  2. Spread inside
  3. Weighted
  4. Packed

enter image description here

All of these are chained. Only the bottom one is packed.