How to do a FloatingActionButton for HarmonyOS
Here we are again with another interesting component in the mobile application Ecosystem, it is none other than FloatingActionButton. It represents the primary action in an application.
It is this simple circular button that triggers the primary action in your app and changes its appearance as it responds to the button click. In this article, we are going to see the various ways types of FloatingAction buttons and ways to implement them in HarmonyOS.
In most scenarios you must have seen the floating button in the bottom right corner for easy access, however, this position is not mandatory we can customize the position, color, icon, and the number of sublayers you prefer as shown below.
We can also have nested floating buttons which leads to layered floating buttons, in case your app requires more action items then this could be used.
let’s see the usage of the FloatingActionButtton Library in HarmonyOS Mobile App and the setup required.
If you are new to HarmonyOS then do check out the articles about HarmonyOS here.
More info on the FloatingActionButtton 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, and 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 FloatingActionButtton 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.
dependencies {
implementation 'io.openharmony.tpc.thirdlib:floatingactionbutton:1.0.0'
}
4. Define layout via XML
Add the com.github.clans.fab.FloatingActionButton to your layout XML file.
<StackLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:parent"
ohos:height="match_parent"
ohos:width="match_parent">
<com.github.clans.fab.FloatingActionButton
ohos:id="$+id:fabBtn"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_margin="12vp"
ohos:fab_elevation="4vp"
ohos:image_src="$media:ic_menu"
ohos:layout_alignment="bottom|right"
ohos:right_margin="16vp"/>
</StackLayout>
5. Now we can add the java API for customization as shown below.
@Override
public void onStart(Intent intent) {
super.onStart(intent);
ComponentContainer root_layout = (ComponentContainer)LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_slice_home, null, false);
mFab = (FloatingActionButton) mRootId.findComponentById(ResourceTable.Id_fabBtn);
}
The below code helps to define the FloatingAction Menu in HarmonyOS
Add the com.github.clans.fab.FloatingActionMenu to your layout XML file.
<com.github.clans.fab.FloatingActionMenu
ohos:id="$+id:menu_green"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_bottom="true"
ohos:align_parent_right="true"
ohos:bottom_margin="10vp"
ohos:left_margin="10vp"
ohos:menu_animationDelayPerItem="500"
ohos:menu_colorNormal="#43A047"
ohos:menu_colorPressed="#2E7D32"
ohos:menu_icon="$media:ic_star"
ohos:right_margin="150vp"
ohos:top_margin="10vp"
>
<com.github.clans.fab.FloatingActionButton
ohos:height="match_content"
ohos:width="match_content"
ohos:fab_colorNormal="#43A047"
ohos:fab_colorPressed="#2E7D32"
ohos:fab_label="lorem_ipsum"
ohos:fab_size="1"
ohos:image_src="$media:ic_edit"/>
</com.github.clans.fab.FloatingActionMenu>
Now we can add the java API for customization as shown below.
@Override
public void onStart(Intent intent) {
super.onStart(intent);
ComponentContainer root_layout = (ComponentContainer)LayoutScatter.getInstance(getContext()).parse(com.github.clans.fab.sample.ResourceTable.Layout_slice_menu, null, false);
menuGreen = (FloatingActionMenu) root_layout.findComponentById(ResourceTable.Id_menu_green);
}
List of XML attributes supported for Floating action Button
Let's see some of the Customising Floating action buttons in action, the first being the loading action button, onclick it gives the loading effect as shown below.
Until now we have seen the standard floating action button and let's see some customizations.
<com.github.clans.fab.FloatingActionMenu
ohos:id="$+id:menu_red"
ohos:height="match_content"
ohos:width="match_parent"
ohos:align_parent_bottom="true"
ohos:align_parent_right="true"
ohos:bottom_padding="10vp"
ohos:right_margin="10vp"
ohos:menu_backgroundColor="#ccffffff"
ohos:menu_fab_size="normal"
ohos:menu_showShadow="true"
ohos:menu_shadowColor="#66000000"
ohos:menu_shadowRadius="4dp"
ohos:menu_shadowXOffset="1dp"
ohos:menu_shadowYOffset="3dp"
ohos:menu_colorNormal="#DA4336"
ohos:menu_colorPressed="#E75043"
ohos:menu_colorRipple="#99FFFFFF"
ohos:menu_animationDelayPerItem="50"
ohos:menu_icon="$media:/fab_add"
ohos:menu_buttonSpacing="0dp"
ohos:menu_labels_margin="0dp"
ohos:menu_labels_paddingTop="4dp"
ohos:menu_labels_paddingRight="8dp"
ohos:menu_labels_paddingBottom="4dp"
ohos:menu_labels_paddingLeft="8dp"
ohos:menu_labels_padding="8dp"
ohos:menu_labels_textColor="#FFFFFF"
ohos:menu_labels_textSize="14sp"
ohos:menu_labels_cornerRadius="3dp"
ohos:menu_labels_colorNormal="#333333"
ohos:menu_labels_colorPressed="#444444"
ohos:menu_labels_colorRipple="#66FFFFFF"
ohos:menu_labels_showShadow="true"
ohos:menu_labels_singleLine="false"
ohos:menu_labels_ellipsize="none"
ohos:menu_labels_maxLines="-1"
ohos:menu_labels_position="left"
ohos:menu_openDirection="up"
ohos:menu_fab_label="your_label_here"><com.github.clans.fab.FloatingActionButton
ohos:id="$+id:fab1"
ohos:height="match_content"
ohos:width="match_content"
ohos:fab_label="Call"
ohos:fab_size="1"
ohos:image_src="$media:ic_call_white_24dp"/>
<com.github.clans.fab.FloatingActionButton
ohos:id="$+id:fab2"
ohos:height="match_content"
ohos:width="match_content"
ohos:fab_label="Message"
ohos:fab_size="1"
ohos:image_src="$media:ic_chat_white_24dp"/>
<com.github.clans.fab.FloatingActionButton
ohos:id="$+id:fab3"
ohos:height="match_content"
ohos:width="match_content"
ohos:fab_label="Delete"
ohos:fab_size="1"
ohos:image_src="$media:ic_delete_forever_white_24dp"/></com.github.clans.fab.FloatingActionMenu>
Below the output from the above code.
I think FloatingAction Button is one of the simple, smallest and at the same time most intricating features, if used efficiently we can create powerful components on the Application side.
More info on the FloatingAction library can be found here
Check out more articles on HarmonyOS here.