Google FlexboxLayout

While FlexboxLayout aims for compatibility with the W3C Flexible Box specification, there are key differences due to Android XML constraints:

1. No shorthand attributes: There are no direct equivalents for CSS flex-flow (which combines direction and wrap) or flex (which combines grow, shrink, and basis). You must specify the individual attributes instead.
2. layout_flexBasisPercent vs flex-basis: Unlike CSS which accepts various units (em, px, content), layout_flexBasisPercent only accepts percentage values. For fixed sizes or content behavior, use standard layout_width/layout_height or wrap_content.
3. layout_wrapBefore: This is an Android-specific addition for better control over line breaks.
4. Default Alignment: The default values for alignItems and alignContent are set to flex_start instead of stretch to improve measurement performance in deep layout hierarchies.

You can use FlexboxLayout as a direct replacement for LinearLayout or RelativeLayout by extending ViewGroup. It can be configured via XML attributes or programmatically in Java/Kotlin.

XML Usage: Use the app: namespace to define flex properties like flexWrap, alignItems, and alignContent on the container, and app:layout_* properties on the children.

Programmatic Usage: To modify a child's layout properties in code, cast its LayoutParams to FlexboxLayout.LayoutParams.

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexWrap="wrap"
    app:alignItems="stretch"
    app:alignContent="stretch" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="50%" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_alignSelf="center" />
</com.google.android.flexbox.FlexboxLayout>

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.setOrder(-1);
lp.setFlexGrow(2);
view.setLayoutParams(lp);

The following attributes control the behavior of the FlexboxLayout container:

• flexDirection: Determines the direction of the main and cross axes. Values: row (default), row_reverse, column, column_reverse.
• flexWrap: Controls if the container is single-line or multi-line. Values: nowrap (default for FlexboxLayout), wrap (default for FlexboxLayoutManager), wrap_reverse (not supported by FlexboxLayoutManager).
• justifyContent: Alignment along the main axis. Values: flex_start (default for FlexboxLayout), flex_end, center, space_between, space_around, space_evenly.
• alignItems: Alignment along the cross axis. Values: flex_start (default for FlexboxLayout), flex_end, center, baseline, stretch (default for FlexboxLayoutManager).
• alignContent: Alignment of flex lines in the container. Values: flex_start (default), flex_end, center, space_between, space_around, stretch.
• Dividers:
  • showDividerHorizontal / showDividerVertical: Set to none, beginning, middle, or end.
  • dividerDrawableHorizontal / dividerDrawableVertical: Reference to a drawable.
  • showDivider / dividerDrawable: Shorthand for both horizontal and vertical dividers. Warning: Avoid using these simultaneously with justifyContent="space_around" or alignContent="space_between" to prevent unexpected spacing.

When using FlexboxLayout, you can control the behavior of individual child views using specific layout_ prefixed attributes in your XML layout. These attributes allow you to manage ordering, growth, shrinking, alignment, and sizing constraints.

Ordering and Sizing

• layout_order (integer): Changes the visual order of children. Defaults to 1.
• layout_flexGrow (float): Determines how much a child grows to fill positive free space in a flex line. Defaults to 0. Similar to layout_weight in LinearLayout.
• layout_flexShrink (float): Determines how much a child shrinks when negative free space is distributed. Defaults to 1.
• layout_flexBasisPercent (fraction): Sets the initial main size of the child as a fraction of the parent's size. This overrides layout_width or layout_height. Only effective when the parent's size is definite (MeasureSpec.EXACTLY). Defaults to -1 (not set).
• layout_minWidth / layout_minHeight (dimension): Imposes minimum size constraints that layout_flexShrink cannot override.
• layout_maxWidth / layout_maxHeight (dimension): Imposes maximum size constraints that layout_flexGrow cannot override.

<!-- Example of child attributes in XML -->
<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_flexGrow="1.0"
        app:layout_order="2"
        app:layout_minWidth="50dp" />

</com.google.android.flexbox.FlexboxLayout>