Create flexible layouts with FlexboxLayout In Android

FlexboxLayout is an Android library made by Google that enables developers to easily build flexible, responsive, and efficient user interfaces (UIs). It helps developers create layouts using the flexbox layout model, which is known for providing better control over UI design compared to traditional linear layouts.

FlexboxLayout is open source, so developers can easily use it in their projects. It supports features such as wrapping, alignment, and ordering, allowing developers to easily create complex, dynamic UIs for their apps.

The Flexbox-Layout(Flexible box layout) is a kind of advanced linear layout where we have a child arranged in a direction, but if the room is not available for a child, it goes to the next line. This is called wrap, and this can be achieved with a simple code

To get started with the Flexbox layout, add the dependencies to build.gradle file.

implementation 'com.google.android.flexbox:flexbox:3.0.0'

Important attributes of flexible layout

Flex Direction

Flex direction specifies whether items are arranged vertically or horizontally. It has 4 values,

• row (default) – The flex items are laid out in a row, with the main axis running horizontally from left to right.
• row_reverse – The flex items are laid out in a row, with the main axis running horizontally from right to left.
• column – The flex items are laid out in a column, with the main axis running vertically from top to bottom.
• column_reverse – The flex items are laid out in a column, with the main axis running vertically from bottom to top.

The FlexDirection attribute can be set on an FlexboxLayout object in an XML layout file or programmatically in the Java/Kotlin code.

In XML:

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexDirection="column"
        ...>

In Kotlin:

val flexboxLayout = findViewById<FlexboxLayout>(R.id.flexbox_layout)
    flexboxLayout.flexDirection = FlexDirection.COLUMN

Output:

Flex Wrap

Wrapping up the children inside the flex container. It has 3 values,

• nowrap (default) – The flex items will not be wrapped and will remain on a single line. This is the default value.
• wrap – The flex items will not be wrapped and will remain on a single line. This is the default value.
• wrap_reverse – The flex items will be wrapped onto multiple lines, in the opposite direction of the FlexDirection attribute.

The flex items will be wrapped onto multiple lines, in the opposite direction of the FlexDirection attribute.

in XML,

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

In Kotlin:

val flexboxLayout = findViewById<FlexboxLayout>(R.id.flexbox_layout)
    flexboxLayout.flexWrap = FlexWrap.WRAP

Output:

Justify Content

In Android’s Flexbox layout, the JustifyContent attribute is used to align the flex items along the main axis of the flex container. The JustifyContent attribute can take one of the following values:

• flex_start – The flex items are aligned at the start of the main axis (left for a row and top for a column). This is the default value.
• flex_end – The flex items are aligned at the end of the main axis (right for a row and bottom for a column).
• center – The flex items are aligned at the end of the main axis (right for a row and bottom for a column).
• space_between  – The flex items are distributed such that the first item is at the start of the main axis and the last item is at the end, with equal space between the items.
• space_around – The flex items are distributed such that there is equal space around each item.
• space_evenly – The flex items are stretched to fill the flex container along the cross axis. This is the default value.


The JustifyContent attribute can be set on a FlexboxLayout object in XML layout file or programmatically in the Java/Kotlin code.

in XML,

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:justifyContent="center"
        ...>

In Kotlin:

val flexboxLayout = findViewById<FlexboxLayout>(R.id.flexbox_layout)
    flexboxLayout.justifyContent = JustifyContent.CENTER

ALIGN ITEM

In Android’s Flexbox layout, the AlignItems attribute is used to align the flex items along the cross axis of the flex container. The AlignItems attribute can take one of the following values:

• flex_start – The flex items are aligned at the start of the cross axis (top for a row and left for a column).
• flex_end – The flex items are aligned at the end of the cross axis (bottom for a row and right for a column).
• center – The flex items are centered along the cross axis.
• baseline – The flex items are aligned such that their baselines align.
• stretch – The flex items are stretched to fill the flex container along the cross axis. This is the default value.

The AlignItems attribute can be set on a FlexboxLayout object in XML layout file or programmatically in the Java/Kotlin code.

In XML:

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:alignItems="center"
        ...>

In Kotlin:

val flexboxLayout = findViewById<FlexboxLayout>(R.id.flexbox_layout)
    flexboxLayout.alignItems = AlignItems.CENTER

ALIGN CONTENT

In Flexbox layout, the align-content property is used to align the flex lines within a flex container along the cross axis. It is similar to align-items property but it works on flex lines rather than flex items. The align-content property only takes effect when there are multiple flex lines, and only works in the cross axis.

In Android’s Flexbox layout, the AlignContent attribute is used to align the flex lines within a flex container along the cross axis. The AlignContent attribute can take one of the following values:

• flex_start: The flex lines are aligned at the start of the cross axis (top for a row and left for a column).
• flex_end: The flex lines are aligned at the end of the cross axis (bottom for a row and right for a column).
• center: The flex lines are centered along the cross axis.
• space_between: The flex lines are distributed such that the first flex line is at the start of the cross axis and the last flex line is at the end, with equal space between the flex lines.
• space_around: The flex lines are distributed such that there is equal space around each flex line.
• stretch: The flex lines are stretched to fill the flex container along the cross axis. This is the default value.

The AlignContent attribute can be set on an FlexboxLayout object in XML layout file or programmatically in the Java/Kotlin code.

In XML:

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:alignContent="center"
        ...>

In Kotlin:

 val flexboxLayout = findViewById<FlexboxLayout>(R.id.flexbox_layout)
    flexboxLayout.alignContent = AlignContent.CENTER

This attribute controls the alignment of the flex lines in the flex container. If there has only one axis, the attribute does not work.

What’s next:

A Step-by-Step Guide to Using FlexboxLayout with RecyclerView in Android – Howtodoandroid

Done with the basic details of the flexbox layout. you can download this sample from Github.