Flexbox-Layout in Android
Last Updated :
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,
- flexDirection
- flexWrap
- justifyContent
- alignItems
- 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
< 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,
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
< 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
< 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
< 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
< 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.
Share your thoughts in the comments
Please Login to comment...