Android – FlexboxLayout and its usage

In May 2016 a new project was pushed to the official Google Github repo named flexbox-layout. It is an Android layout manager which offers similar behavior to the CSS flexible box layout module.

FlexboxLayout can be interpreted as an advanced LinearLayout because both layouts align their child views sequentially. The significant difference between LinearLayout and FlexboxLayout is that it has a feature for wrapping.

That means if you add the flexWrap=”wrap” attribute, this puts a view to a new line if there is not enough space left in the current line as shown in the picture below.

flexboxlayout

To use FlexboxLayout in your project first add the following dependency to your build.gradle:

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

Once after adding this dependency and sync the gradle you are ready to use this layout.

Usage of FlexboxLayout

FlexboxLayout 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>

Event we can use this from code instead of layout xml, here is the snippet –

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

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

 Supported attributes to use

  • flexDirection
  • flexWrap
  • justifyContent
  • alignItems
  • alignContent
  • showDividerHorizontal
  • dividerDrawableHorizontal
  • showDividerVertical
  • dividerDrawableVertical
  • showDivider
  • dividerDrawable

Supported attributes for a children

  • layout_order (integer)
  • layout_flexGrow (float)
  • layout_flexShrink (float)
  • layout_alignSelf
  • layout_flexBasisPercent (fraction)
  • layout_minWidth / layout_minHeight (dimension)
  • layout_maxWidth / layout_maxHeight (dimension)
  • layout_wrapBefore (boolean)

know the full documentation of all the attributes of this open source project to use in your Android app.

I am personally not using this library as I feel it is not enough matured to use. But if you want to contribute in any open source projects this is one such project to start of.

 

I hope this this article will help you to know about this latest layout. If you like this do not forget to share it with your friends and colleagues.

Happy coding!!!

Leave a Reply

Your email address will not be published. Required fields are marked *