Flexbox-Layout in Android

10 Aug, 2021
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,
flexDirectionflexWrapjustifyContentalignItems alignContent
flexDirection
flexWrap
justifyContent
alignItems 
alignContent
At first, look at a quick overview of these attributes:
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:
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:
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:
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:
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.
 
gabaa406
Picked
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Flutter - Stack Widget
Introduction to Android Development
Animation in Android with Example
Data Binding in Android with Example
Fragment Lifecycle in Android
Activity Lifecycle in Android with Demo App