Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Flow

public class Flow
extends View

java.lang.Object
   ↳ View
     ↳ androidx.constraintlayout.helper.widget.Flow


Flow virtual layout. Added in 2.0 Allows positioning of referenced widgets horizontally or vertically, similar to a Chain. The elements referenced are indicated via constraint_referenced_ids, as with other ContraintHelper implementations. Those referenced widgets are then laid out by the Flow virtual layout in three possible ways:

  • wrap none : simply create a chain out of the referenced elements
  • wrap chain : create multiple chains (one after the other) if the referenced elements do not fit
  • wrap aligned : similar to wrap chain, but will align the elements by creating rows and columns
As VirtualLayout are ConstraintHelper, they are normal views; you can thus treat them as such, and setting up constraints on them (position, dimension) or some view attributes (background, padding) will work. The main difference between VirtualLayouts and ViewGroups is that:
  • VirtualLayout keep the hierarchy flat
  • Other views can thus reference / constrain to not only the VirtualLayout, but also the views laid out by the VirtualLayout
  • VirtualLayout allow on the fly behavior modifications (e.g. for Flow, chaing the orientation)

flow_wrapMode = "none"

This will simply create an horizontal or vertical chain out of the referenced widgets. This is the default behavior of Flow. XML attributes that are allowed in this mode:
  • flow_horizontalStyle = "spread|spread_inside|packed"
  • flow_verticalStyle = "spread|spread_inside|packed"
  • flow_horizontalBias = "float"
  • flow_verticalBias = "float"
  • flow_horizontalGap = "dimension"
  • flow_verticalGap = "dimension"
  • flow_horizontalAlign = "start|end"
  • flow_verticalAlign = "top|bottom|center|baseline
While the elements are laid out as a chain in the orientation defined, the way they are laid out in the other dimension is controlled by flow_horizontalAlign and flow_verticalAlign attributes.

flow_wrapMode = "chain"

Similar to wrap none in terms of creating chains, but if the referenced widgets do not fit the horizontal or vertical dimension (depending on the orientation picked), they will wrap around to the next line / column. XML attributes are the same same as in wrap_none, with the addition of attributes specifying chain style and chain bias applied to the first chain. This way, it is possible to specify different chain behavior between the first chain and the rest of the chains eventually created.
  • flow_firstHorizontalStyle = "spread|spread_inside|packed"
  • flow_firstVerticalStyle = "spread|spread_inside|packed"
  • flow_firstHorizontalBias = "float"
  • flow_firstVerticalBias = "float"
One last important attribute is flow_maxElementsWrap, which specify the number of elements before wrapping, regardless if they fit or not in the available space.

flow_wrapMode = "aligned"

Same XML attributes as for WRAP_CHAIN, with the difference that the elements are going to be laid out in a set of rows and columns instead of chains. The attribute specifying chains style and bias are thus not going to be applied.

Summary

Fields

public static final int CHAIN_PACKED

public static final int CHAIN_SPREAD

public static final int CHAIN_SPREAD_INSIDE

public static final int HORIZONTAL

public static final int HORIZONTAL_ALIGN_CENTER

public static final int HORIZONTAL_ALIGN_END

public static final int HORIZONTAL_ALIGN_START

public static final int VERTICAL

public static final int VERTICAL_ALIGN_BASELINE

public static final int VERTICAL_ALIGN_BOTTOM

public static final int VERTICAL_ALIGN_CENTER

public static final int VERTICAL_ALIGN_TOP

public static final int WRAP_ALIGNED

public static final int WRAP_CHAIN

public static final int WRAP_NONE

Public constructors

Flow(Context context)
Flow(Context context, AttributeSet attrs)
Flow(Context context, AttributeSet attrs, int defStyleAttr)

Public methods

void addView(View view)

Add a view to the helper.

int[] getReferencedIds()

Helpers typically reference a collection of ids

void loadParameters(ConstraintSet.Constraint constraint, HelperWidget child, ConstraintLayout.LayoutParams layoutParams, mapIdToWidget)
void onMeasure(androidx.constraintlayout.solver.widgets.VirtualLayout layout, int widthMeasureSpec, int heightMeasureSpec)
void removeView(View view)

Remove a given view from the helper.

void resolveRtl(ConstraintWidget widget, boolean isRtl)
void setFirstHorizontalBias(float bias)

Similar to setHorizontalBias(), but only applied to the first chain.

void setFirstHorizontalStyle(int style)

Similar to setHorizontalStyle(), but only applies to the first chain.

void setFirstVerticalBias(float bias)

Similar to setVerticalBias(), but only applied to the first chain.

void setFirstVerticalStyle(int style)

Similar to setVerticalStyle(), but only applies to the first chain.

void setHorizontalAlign(int align)

Set up the horizontal alignment of the elements in the layout, if the layout orientation is set to Flow.VERTICAL Can be either: Flow.HORIZONTAL_ALIGN_START Flow.HORIZONTAL_ALIGN_END Flow.HORIZONTAL_ALIGN_CENTER

void setHorizontalBias(float bias)

Set the horizontal bias applied to the chain

void setHorizontalGap(int gap)

Set up the horizontal gap between elements

void setHorizontalStyle(int style)

Set horizontal chain style.

void setMaxElementsWrap(int max)

Set up the maximum number of elements before wrapping.

void setOrientation(int orientation)

Set the orientation of the layout

void setPadding(int padding)

Set padding around the content

void setPaddingBottom(int paddingBottom)

Set padding bottom around the content

void setPaddingLeft(int paddingLeft)

Set padding left around the content

void setPaddingRight(int paddingRight)

Set padding right around the content

void setPaddingTop(int paddingTop)

Set padding top around the content

void setReferencedIds(int[] ids)

Helpers typically reference a collection of ids

void setVerticalAlign(int align)

Set up the vertical alignment of the elements in the layout, if the layout orientation is set to Flow.HORIZONTAL Can be either: Flow.VERTICAL_ALIGN_TOP Flow.VERTICAL_ALIGN_BOTTOM Flow.VERTICAL_ALIGN_CENTER Flow.VERTICAL_ALIGN_BASELINE

void setVerticalBias(float bias)

Set the vertical bias applied to the chain

void setVerticalGap(int gap)

Set up the vertical gap between elements

void setVerticalStyle(int style)

Set vertical chain style.

void setWrapMode(int mode)

Set wrap mode for the layout.

void updatePostConstraints(ConstraintLayout constainer)
void updatePreLayout(ConstraintWidgetContainer container, Helper helper, map)

Protected methods

View[] getViews(ConstraintLayout layout)
void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

Inherited methods

Fields

CHAIN_PACKED

public static final int CHAIN_PACKED

CHAIN_SPREAD

public static final int CHAIN_SPREAD

CHAIN_SPREAD_INSIDE

public static final int CHAIN_SPREAD_INSIDE

HORIZONTAL

public static final int HORIZONTAL

HORIZONTAL_ALIGN_CENTER

public static final int HORIZONTAL_ALIGN_CENTER

HORIZONTAL_ALIGN_END

public static final int HORIZONTAL_ALIGN_END

HORIZONTAL_ALIGN_START

public static final int HORIZONTAL_ALIGN_START

VERTICAL

public static final int VERTICAL

VERTICAL_ALIGN_BASELINE

public static final int VERTICAL_ALIGN_BASELINE

VERTICAL_ALIGN_BOTTOM

public static final int VERTICAL_ALIGN_BOTTOM

VERTICAL_ALIGN_CENTER

public static final int VERTICAL_ALIGN_CENTER

VERTICAL_ALIGN_TOP

public static final int VERTICAL_ALIGN_TOP

WRAP_ALIGNED

public static final int WRAP_ALIGNED

WRAP_CHAIN

public static final int WRAP_CHAIN

WRAP_NONE

public static final int WRAP_NONE

Public constructors

Flow

public Flow (Context context)

Parameters
context Context

Flow

public Flow (Context context, 
                AttributeSet attrs)

Parameters
context Context

attrs AttributeSet

Flow

public Flow (Context context, 
                AttributeSet attrs, 
                int defStyleAttr)

Parameters
context Context

attrs AttributeSet

defStyleAttr int

Public methods

addView

public void addView (View view)

Add a view to the helper. The referenced view need to be a child of the helper's parent. The view also need to have its id set in order to be added.

getReferencedIds

public int[] getReferencedIds ()

Helpers typically reference a collection of ids

Returns
int[] ids referenced

loadParameters

public void loadParameters (ConstraintSet.Constraint constraint, 
                HelperWidget child, 
                ConstraintLayout.LayoutParams layoutParams, 
                 mapIdToWidget)

Parameters
constraint ConstraintSet.Constraint

child HelperWidget

layoutParams ConstraintLayout.LayoutParams

mapIdToWidget

onMeasure

public void onMeasure (androidx.constraintlayout.solver.widgets.VirtualLayout layout, 
                int widthMeasureSpec, 
                int heightMeasureSpec)

Parameters
layout androidx.constraintlayout.solver.widgets.VirtualLayout

widthMeasureSpec int

heightMeasureSpec int

removeView

public void removeView (View view)

Remove a given view from the helper.

resolveRtl

public void resolveRtl (ConstraintWidget widget, 
                boolean isRtl)

Parameters
widget ConstraintWidget

isRtl boolean

setFirstHorizontalBias

public void setFirstHorizontalBias (float bias)

Similar to setHorizontalBias(), but only applied to the first chain.

setFirstHorizontalStyle

public void setFirstHorizontalStyle (int style)

Similar to setHorizontalStyle(), but only applies to the first chain.

setFirstVerticalBias

public void setFirstVerticalBias (float bias)

Similar to setVerticalBias(), but only applied to the first chain.

setFirstVerticalStyle

public void setFirstVerticalStyle (int style)

Similar to setVerticalStyle(), but only applies to the first chain.

setHorizontalAlign

public void setHorizontalAlign (int align)

Set up the horizontal alignment of the elements in the layout, if the layout orientation is set to Flow.VERTICAL Can be either: Flow.HORIZONTAL_ALIGN_START Flow.HORIZONTAL_ALIGN_END Flow.HORIZONTAL_ALIGN_CENTER

setHorizontalBias

public void setHorizontalBias (float bias)

Set the horizontal bias applied to the chain

Parameters
bias float: from 0 to 1

setHorizontalGap

public void setHorizontalGap (int gap)

Set up the horizontal gap between elements

setHorizontalStyle

public void setHorizontalStyle (int style)

Set horizontal chain style. Can be: Flow.CHAIN_SPREAD Flow.CHAIN_SPREAD_INSIDE Flow.CHAIN_PACKED

setMaxElementsWrap

public void setMaxElementsWrap (int max)

Set up the maximum number of elements before wrapping.

setOrientation

public void setOrientation (int orientation)

Set the orientation of the layout

Parameters
orientation int: either Flow.HORIZONTAL or FLow.VERTICAL

setPadding

public void setPadding (int padding)

Set padding around the content

setPaddingBottom

public void setPaddingBottom (int paddingBottom)

Set padding bottom around the content

setPaddingLeft

public void setPaddingLeft (int paddingLeft)

Set padding left around the content

setPaddingRight

public void setPaddingRight (int paddingRight)

Set padding right around the content

setPaddingTop

public void setPaddingTop (int paddingTop)

Set padding top around the content

setReferencedIds

public void setReferencedIds (int[] ids)

Helpers typically reference a collection of ids

Parameters
ids int

Returns
void ids referenced

setVerticalAlign

public void setVerticalAlign (int align)

Set up the vertical alignment of the elements in the layout, if the layout orientation is set to Flow.HORIZONTAL Can be either: Flow.VERTICAL_ALIGN_TOP Flow.VERTICAL_ALIGN_BOTTOM Flow.VERTICAL_ALIGN_CENTER Flow.VERTICAL_ALIGN_BASELINE

setVerticalBias

public void setVerticalBias (float bias)

Set the vertical bias applied to the chain

Parameters
bias float: from 0 to 1

setVerticalGap

public void setVerticalGap (int gap)

Set up the vertical gap between elements

setVerticalStyle

public void setVerticalStyle (int style)

Set vertical chain style. Can be: Flow.CHAIN_SPREAD Flow.CHAIN_SPREAD_INSIDE Flow.CHAIN_PACKED

setWrapMode

public void setWrapMode (int mode)

Set wrap mode for the layout. Can be: Flow.WRAP_NONE (default) -- no wrap behavior, create a single chain Flow.WRAP_CHAIN -- if not enough space to fit the referenced elements, will create additional chains after the first one Flow.WRAP_ALIGNED -- if not enough space to fit the referenced elements, will wrap the elements, keeping them aligned (like a table)

updatePostConstraints

public void updatePostConstraints (ConstraintLayout constainer)

Parameters
constainer ConstraintLayout

updatePreLayout

public void updatePreLayout (ConstraintWidgetContainer container, 
                Helper helper, 
                 map)

Parameters
container ConstraintWidgetContainer

helper Helper

map

Protected methods

getViews

protected View[] getViews (ConstraintLayout layout)

Parameters
layout ConstraintLayout

Returns
View[]

onMeasure

protected void onMeasure (int widthMeasureSpec, 
                int heightMeasureSpec)

Parameters
widthMeasureSpec int

heightMeasureSpec int