Introduction to Flexbox Layout in HarmonyOS

While building application, layouts play a vital role in defining the structure for a user interface in your app. Layouts is more like a base on which components are laid over it and following some guidelines makes it more efficient and aesthetic the User.

Now lets dwell into Flexbox layout, here the word "Flex" stands for Flexible, in the sense it adapts to the environment or conditions. Similarly if the items is flex it flexes to different sizes to fill the space or environment.

Lets consider a simple example to start with, lets consider a series of blocks and you can see based on the screen size the blocks are flexible to adaptive based on the environment.

Here we are using Flexbox Layout library and how it is similar to CSS Flexible Box Layout Module and how to implement in the HarmonyOS. Also we will cover the steps involved to enjoy the feature of flexbox.

Let's view some of the features

• Creating Flexbox Layout with Flex Direction in ROW, ROW_REVERSE, COLUMN and COLUMN_REVERSE.
• Creating Flexbox Layout with Flex Wrap as NO_WRAP, WRAP and WRAP_REVERSE.
• Creating Flexbox Layout with Justify Content as FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND and SPACE_EVENLY.
• Creating Flexbox Layout with Align Items as FLEX_START, FLEX_END, CENTER, BASELINE, and STRETCH.
• Creating Flexbox Layout with Align Content as FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND and STRETCH.
• Updating attributes of Child view with order value.
• Updating attributes of Child view with flex grow and flex shrink values.
• Updating attributes of Child view with flex basis percent value.
• Updating attributes of Child view with width, height along with minimum and maximum values.
• Updating attributes of Child view with wrap before.
• Updating attributes of Child view with Align Self as AUTO, FLEX_START, FLEX_END, CENTER, BASELINE, and STRETCH.

let's see how to use Flexbox in your HarmonyOS Mobile App and process or setup required.

If you are new to *HarmonyOS * then do checkout the articles about HarmonyOS here.

More info on the Flexbox Layout library can be found here

Step by Step Implementation

1.DevEco Studio

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven't installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.

2.Project Creation
Once you have the DevEco Studio up running you can create a select a **"File" -> New -> New Project Option, **then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step you will have to "Configure the Project" with the project details, path and ensure to select

• Language as Java and
• API version to 5

After the initial setup you are ready to start working on the application.

*3.Dependency *

Next add the Flexbox layout Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file.

1. Define layout via XML

<com.google.harmony.flexbox.FlexboxLayout
        ohos:id="$+id:flexbox"
        ohos:height="match_parent"
        ohos:width="match_parent">
        <Text
            ohos:id="$+id:text_1"
            ohos:height="80vp"
            ohos:width="110vp"
            ohos:background_element="$graphic:flex_item_background"
            ohos:text_alignment="center"
            ohos:text="1"
            ohos:text_size="20fp" />
        <Text
            ohos:id="$+id:text_2"
            ohos:height="80vp"
            ohos:width="140vp"
            ohos:background_element="$graphic:flex_item_background"
            ohos:text_alignment="center"
            ohos:text="2"
            ohos:text_size="20fp" />
        <Text
            ohos:id="$+id:text_3"
            ohos:height="80vp"
            ohos:width="110vp"
            ohos:background_element="$graphic:flex_item_background"
            ohos:text_alignment="center"
            ohos:text="3"
            ohos:text_size="20fp" />
</com.google.harmony.flexbox.FlexboxLayout>

and access from code like this:

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
// To set Flex Direction
flexLayout.setFlexDirection(ROW);
...
// set other properties

1. Lets create Flexbox Layout will be created with flex direction in row mode.

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
// To set Flex Direction
flexLayout.setFlexDirection(ROW);
// ... other required properties
flexLayout.refresh();

1. Flexbox Layout will be created with flex wrap in wrap mode.

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
// To set Flex Wrap
flexLayout.setFlexWrap(WRAP);
// ... other required properties
flexLayout.refresh();

1. Flexbox Layout will be created with flex wrap in wrap and justify content with start

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
flexLayout.setFlexWrap(WRAP);
// To set Justify Content
flexLayout.setJustifyContent(FLEX_START);
// ... other required properties
flexLayout.refresh();

1. Align items with flex start.

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
flexLayout.setFlexWrap(WRAP);
// To set align items
flexLayout.setAlignItems(FLEX_START);
// ... other required properties
flexLayout.refresh();

1. AlignContent for the FlexboxLayout

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
flexLayout.setFlexWrap(WRAP);
// To set align Content
flexLayout.setAlignContent(FLEX_START);
// ... other required properties
flexLayout.refresh();

By now you must have got an idea how to use Flexbox Layout in HarmonyOS and how to add variations like Align, Wrap, direction factors and how the layout changed.

More info on the Flexbox library can be found here