How to do a FloatingActionButton for HarmonyOS

Step by Step Implementation

dependencies {
implementation 'io.openharmony.tpc.thirdlib:floatingactionbutton:1.0.0'
}
<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>
@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);
}
<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>
@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

<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>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store