Home

Awesome

FlexboxLayout

Circle CI

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 {
    implementation 'com.google.android.flexbox:flexbox:3.0.0'
}

Starting from 3.0.0, the groupId is changed to com.google.android.flexbox in preparation to uploading the artifacts to google maven. You can still download the artifacts from jcenter for the past versions with the prior groupId (com.google.android), but migrating the library 3.0.0 is recommended.

Note that the default values for alignItems and alignContent for FlexboxLayout have been changed from stretch to flex_start starting from 2.0.0, it may break the existing apps. Please make sure to set stretch explicitly if you want to apply the behavior of stretch.

Note that starting from 1.1.0, the library is expeced to use with AndroidX. Please migrate to AndroidX if you use 1.1.0 or above.

Please use 1.0.0 if you haven't migrated to AndroidX.

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.setOrder(-1);
lp.setFlexGrow(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.

FlexboxLayoutManager in action

Supported attributes/features comparison

Due to some characteristics of RecyclerView, some Flexbox attributes are not available/not implemented to the FlexboxLayoutManager. Here is a quick overview of the attributes/features comparison between the two implementations.

Attribute / FeatureFlexboxLayoutFlexboxLayoutManager (RecyclerView)
flexDirectionCheckCheck
flexWrapCheckCheck (except wrap_reverse)
justifyContentCheckCheck
alignItemsCheckCheck
alignContentCheck-
layout_orderCheck-
layout_flexGrowCheckCheck
layout_flexShrinkCheckCheck
layout_alignSelfCheckCheck
layout_flexBasisPercentCheckCheck
layout_(min/max)WidthCheckCheck
layout_(min/max)HeightCheckCheck
layout_wrapBeforeCheckCheck
DividerCheckCheck
View recycling-Check
Scrolling*1Check

*1 Partially possible by wrapping it with ScrollView. But it isn't likely to work with a large set of views inside the layout. Because it doesn't consider view recycling.

Supported attributes

Attributes for the FlexboxLayout:

Attributes for the children of a FlexboxLayout

Others

Known differences from the original CSS specification

This library tries to achieve the same capabilities of the original Flexible Box specification as much as possible, but due to some reasons such as the way specifying attributes can't be the same between CSS and Android XML, there are some known differences from the original specification.

(1) There is no flex-flow equivalent attribute

(2) There is no flex equivalent attribute

(3) layout_flexBasisPercent is introduced instead of flexBasis

(4) layout_wrapBefore is introduced.

(5) Default values for alignItems and alignContent are set to flex_start instead of stretch.

Xamarin Binding

Xamarin binding is now available on NuGet thanks to @btripp

Demo apps

Flexbox Playground demo app

The demo-playground module works as a playground demo app for trying various values for the supported attributes. You can install it by

./gradlew demo-playground:installDebug

Cat gallery demo app

The demo-cat-gallery module showcases the usage of the FlexboxLayoutManager inside the RecyclerView that handles various sizes of views aligned nicely regardless of the device width like the Google Photo app without loading all the images on the memory. Thus compared to using the {@link FlexboxLayout}, it's much less likely to abuse the memory, which sometimes leads to the OutOfMemoryError.

./gradlew demo-cat-gallery:installDebug

How to make contributions

Please read and follow the steps in CONTRIBUTING.md

License

Please see LICENSE