Advantages and implementation of FlexboxLayout in Android

Flexbox Layout is same as CSS Flexible Layout module in android. Flexbox can be judge as advance form on LinearLayout, both layout are aligned sequentially. The difference is that, Flexbox has feature of wrapping. For using FlexboxLayout in your app, you need to add gradle dependency in you app gradle file:

dependencies {

…

…

compile 'com.google.android:flexbox:0.1.3'

}

Let us see in detail about the cases where Flexbox is useful:

1. In Flexbox when you arrange items in horizontal manner with attribute (flexWrap=”Wrap”). If there is not enough space left in current line, then It take to the new line.

 

2.To achieve this, You need to set multiple layout design for various screen aspects (like layout-600dp, layout-720dp, layout-1020dp). But by using Flexbox, you can reduce the number of layouts design.

You can use this Flexbox layout instead of linearlayout as below.

<com .google.android.flexbox.flexboxlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexwrap="wrap">

By this child aligned to new line instead of overflowing its parent.

 

3. Can also pad space in between them when you have space at the end, but can’t able to load a new item. Then attribute (layout_flexgrow=”1″), will make the line between items with equal space.

<android .support.design.widget.TextInputLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
app:layout_flexgrow="1">

 

4. Flexbox with RecyclerView,

A latest version of Alpha version, the Flexbox extends RecyclerView.LayoutManager, we can use the scrollable container in much more memory-efficient way.

Real world examples for RecyclerView with Flexbox are, GooglePhotos and NewStand, where there will be lots of cards and need to be handle various width of items.

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();

layoutManager.setFlexWrap(FlexWrap.WRAP);

void bindTo(Drawable drawable) {

mImageView.setImageDrawable(drawable);

ViewGroup.LayoutParams lp = mImageView.getLayoutParams();

if (lp instanceof FlexboxLayoutManager.LayoutParams) {

FlexboxLayoutManager.LayoutParams flexboxLp =

(FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();

flexboxLp.setFlexGrow(1.0f);

}

//Your own code

}

 

5. FlexDirection

The direction of its children is controlled by FlexDirection.

– row, row_reverse, column and column_reverse

i. row : Its children will aligned in LTR direction (Left to Right).

ii. row_reverse : Its children will aligned in RTL direction (Right to Left).

iii. column : Its children will aligned one below another starting from Top of the layout.

iv. column_reverse : Its children will aligned one above another starting from Bottom of the layout.

 

6. JustifyContent

Child items are positioned along the main axis is controlled by justifyContent similar to flexDirection, But flexDirection controls the “order of the child items” whereas JustifyContent controls the “relative positioning”.

– flex_start, flex_end, center, space_between and space_around

i. flex_start : Start its child from a new line when its wrap in LTR direction.

ii. flex_end : Start its child from a new line when its wrap in RTL direction.

iii. center : Start its child from a new line when its wrap from its center.

iv. space_between : will provide equal space in between its child.

v. space_around : will provide equal space in between its child including padding in first and last child in a row.

 

7. AlignItems

AlignItems controls the positioning and sizing of items along the cross axis. The possible values are stretch, flex_start, flex_end, center, and baseline.

 

8. AlignContent

There is a thin line of difference in between AlignItems and AlignContent. AlignItems controls how items are positioned within their own line, Whereas AlignContent controls the line itself. Similar to TableRow within TableLayout, Using “alignContent” is similar to applying layout attributes to TableRow, whereas “alignItems” is similar to applying layout attributes to the child views representing the individual cells in table. The possible values are stretch, flex_start, flex_end, center, space_between, and space_around.

In this blog, you have seen pros of FlexboxLayout which overcomes the cons of LinearLayout. In our next blog we can see how to implement FlexboxLayout in RecyclerView.

 

For reference :  https://github.com/Manikandan92/flexboxLayout

 

–
Pangaj JG
Android Developer,
Mallow Technologies