Search code examples
androidandroid-studioandroid-constraintlayoutgraphical-layout-editor

Android Studio Layout Editor ConstraintLayout: pack vs chain

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

Solution

  • 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.