Flexbox-Layout in Android

Before playing, let’s learn about what FlexBox actually is. 

Hey, do you know the front-end also? If yes, then you should know what actually flexbox is in CSS. To learn more about CSS Flexible Box Layout Module click here. And if not, then don’t worry; here is the explanation: 

Here the word “Flex” stands for Flexible. In this layout, items will “flex” to different sizes to fill the space. It helps us to make a responsive UI.

Now the question is why we are discussing Front-end technology instead of Android. Because in Android also we need to make such responsive UI. Just like CSS FlexBox Layout, Google has also made the FlexboxLayout library to use in android. We will discuss five different attributes of this Layout step by step through some simple examples. These five attributes are,

1. flexDirection
2. flexWrap
3. justifyContent
4. alignItems 
5. alignContent

At first, look at a quick overview of these attributes:

1. flexDirection

Basically, the flexDirection attribute determines the direction of the main axis. It has four possible parameters and they are,

• row
• row_reverse
• column
• colum_reverse 

Now, we can use these parameters in our flexbox layout in the following ways:

• In XML,  app:flexDirection=”parameter“
• Programmatically,

                    flexboxLayout.flexDirection = FlexDirection.PARAMETER      // Kotlin (Property access syntax)

                   flexboxLayout.setFlexDirection(FlexDirection.PARAMETER);   // Java

* In place of the word, parameter write down relevant parameters.

Let us use the following flexbox layout to test all parameters of the corresponding attribute.

XML

<!-- to test flexDirection -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="100dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

</com.google.android.flexbox.FlexboxLayout>

Let’s see the result:

2. flexWrap

The flexWrap attribute controls whether the flex container is single-line or multi-line, and the direction of the cross axis (Perpendicular to the main axis). In simple words, It is like the LinearLayout with supported line breaks. It has three possible parameters and they are,

• nowrap
• wrap
• wrap_reverse

Now, we can use these parameters in our flexbox layout in the following ways:

• In XML,  app:flexWrap=”parameter”
• Programmatically,

                   flexboxLayout.flexWrap = FlexWrap.PARAMETER      // Kotlin (Property access syntax)

                   flexboxLayout.setFlexWrap(FlexWrap.PARAMETER);   // Java

 * In place of the word, parameter write down relevant parameters.

Let us use the following flexbox layout to test all parameters of the corresponding attribute. 

XML

<!-- to test flewWrap -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:flexWrap="wrap"
            app:alignContent="flex_start">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>

</com.google.android.flexbox.FlexboxLayout>

Let’s see the result:

3. justifyContent

The justifyContent attribute controls the alignment along the main axis. It has six possible parameters and they are :

• flex_start
• flex_end
• center
• space_between 
• space_around 
• space_evenly 

Now, we can use these parameters in our flexbox layout in the following ways:-

• In XML,  app:justifyContent=”parameter”
• Programmatically,

                  flexboxLayout.justifyContent = JustifyContent.PARAMETER      // Kotlin (Property access syntax)

                  flexboxLayout.setJustifyContent(JustifyContent.PARAMETER);   // Java

      * In place of the word, parameter write down relevant parameters.

Let us use the following flexbox layout to test all parameters of the corresponding attribute.

XML

<!-- to test justifyContent -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout3"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="100dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

</com.google.android.flexbox.FlexboxLayout>

Let’s see the result:

4. alignItems

The alignItems attribute controls the alignment along the cross axis. It has five possible parameters and they are, 

• flex_start
• flex_end
• center
• baseline 
• stretch 

 Now, we can use these parameters in our flexbox layout in the following ways:

• In XML,  app:alignItems=”parameter”
• Programmatically,

                 flexboxLayout.alignItems =AlignItems.PARAMETER      // Kotlin (Property access syntax)

                 flexboxLayout.setAlignItems(AlignItems.PARAMETER);   // Java

     * In place of the word, parameter write down relevant parameters.

Let us use the following flexbox layout to test all parameters of the corresponding attribute.

XML

<!-- to test alignItems -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout4"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="100dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

</com.google.android.flexbox.FlexboxLayout>

Let’s see the result:

5. alignContent

This attribute controls the alignment of the flex lines in the flex container. If there has only one axis, the attribute does not work. It has six possible parameters and they are, 

• flex_start (default)
• flex_end
• center
• space_between
• space_around
• stretch

Now, we can use these parameters in our flexbox layout in the following ways: 

In XML,  app:alignContent=”parameter”

Programmatically,

                flexboxLayout.alignContent = AlignContent.PARAMETER      // Kotlin (Property access syntax)

                flexboxLayout.setAlignContent(AlignContent.PARAMETER);   // Java

* In place of the word, parameter write down relevant parameters.

Let us use the following flexbox layout to test all parameters of the corresponding attribute. 

XML

<!-- to test alignContent -->
<com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flexboxLayout5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:flexWrap="wrap"
            app:alignContent="flex_start">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_3"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_2"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>

            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_1"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="90dp"
                android:layout_height="80dp"
                android:src="@drawable/gfg_4"
                android:scaleType="centerCrop"/>

</com.google.android.flexbox.FlexboxLayout>

Let’s see the result:

Now, do you want to play with all these attributes in this application? Firstly, You can try to make this on your own. Otherwise, you can take help from the source code of my project. For the project’s source code -> CLICK HERE.