/ Layout

A library project which brings the similar capabilities of CSS Flexible Box Layout

A library project which brings the similar capabilities of CSS Flexible Box Layout

FlexboxLayout

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

Installation
Add the following dependency to your build.gradle file:

dependencies {
    compile 'com.google.android:flexbox:0.3.0'
}

Usage

There are two ways of using Flexbox in your layout.

FlexboxLayout

The first one is FlexboxLayout that extends the ViewGroup like LinearLayout and RelativeLayout.
You can specify the attributes from a layout XML like:

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

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

Or from code like:

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.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

FlexboxLayoutManager (within RecyclerView)

The second one is FlexboxLayoutManager that can be used within RecyclerView.

RecyclerView recyclerView = (RecyclerView) context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);
recyclerView.setLayoutManager(layoutManager);

or for the attributes for the children of the FlexboxLayoutManager you can do like:

mImageView.setImageDrawable(drawable);
ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}

The advantage of using FlexboxLayoutManager is that it recycles the views that go off the screen
for reuse for the views that are appearing as the user scrolls instead of inflating every individual view,
which consumes much less memory especially when the number of items contained in the Flexbox container is large.

layout_flexShrink

layout_flexGrow

layout_order

divider-beginning-middle

align-content

align-items

justify-content

flex-wrap

flexbox-layoutmanager

GitHub