diff --git a/ability/Fraction/README_zh.md b/ability/Fraction/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..044d8153454ad3b8ceede1692b312a1c951342c5
--- /dev/null
+++ b/ability/Fraction/README_zh.md
@@ -0,0 +1,17 @@
+# Fraction
+
+### 简介
+
+本样例为开发者提供一种新的布局方式Fraction。Fraction是基于Ability实现的布局方式，可放置于Ability容器中作为容器界面的一部分，拥有自己的生命周期。通过对Fraction事务的相关操作实现添加、替换、显示、隐藏、入栈出栈等功能。
+
+### 使用说明
+
+1. 首页点击替换fraction按钮可以替换fraction；
+2. 点击下一页可以跳转到下一个界面；
+3. 在该界面点击隐藏fraction按钮隐藏fraction，按钮变成显示fraction，再次点击会显示fraction；
+4. 在该界面点击入栈fraction按钮将fraction入栈，按钮变为出栈fraction，再次点击将fraction出栈。
+
+### 约束与限制
+
+本示例支持在标准系统上运行。
+
diff --git a/ability/Fraction/build.gradle b/ability/Fraction/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..91af1ca64995ab365fbf9f4d6b6c9a5f816d163f
--- /dev/null
+++ b/ability/Fraction/build.gradle
@@ -0,0 +1,36 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+ohos {
+ compileSdkVersion 5
+ defaultConfig {
+ compatibleSdkVersion 4
+ }
+}
+
+buildscript {
+ repositories {
+ maven {
+ url 'https://repo.huaweicloud.com/repository/maven/'
+ }
+ maven {
+ url 'https://developer.huawei.com/repo/'
+ }
+ jcenter()
+ }
+ dependencies {
+ classpath 'com.huawei.ohos:hap:2.4.4.2'
+ }
+}
+
+allprojects {
+ repositories {
+ maven {
+ url 'https://repo.huaweicloud.com/repository/maven/'
+ }
+ maven {
+ url 'https://developer.huawei.com/repo/'
+ }
+ jcenter()
+ }
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/build.gradle b/ability/Fraction/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..83f59debbd68242b503a22270f4378d7843ca204
--- /dev/null
+++ b/ability/Fraction/entry/build.gradle
@@ -0,0 +1,19 @@
+apply plugin: 'com.huawei.ohos.hap'
+ohos {
+ compileSdkVersion 5
+ defaultConfig {
+ compatibleSdkVersion 4
+ }
+ buildTypes {
+ release {
+ proguardOpt {
+ proguardEnabled false
+ rulesFiles 'proguard-rules.pro'
+ }
+ }
+ }
+}
+
+dependencies {
+ implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/src/main/config.json b/ability/Fraction/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..6251a0274857693d3d96c9c8e1e27fb628e229ff
--- /dev/null
+++ b/ability/Fraction/entry/src/main/config.json
@@ -0,0 +1,51 @@
+{
+ "app": {
+ "bundleName": "ohos.samples.fraction",
+ "version": {
+ "code": 1000000,
+ "name": "1.0"
+ }
+ },
+ "deviceConfig": {},
+ "module": {
+ "package": "ohos.samples.fraction",
+ "name": ".MyApplication",
+ "mainAbility": "ohos.samples.fraction.MainAbility",
+ "deviceType": [
+ "phone"
+ ],
+ "distro": {
+ "deliveryWithInstall": true,
+ "moduleName": "entry",
+ "moduleType": "entry",
+ "installationFree": false
+ },
+ "abilities": [
+ {
+ "skills": [
+ {
+ "entities": [
+ "entity.system.home"
+ ],
+ "actions": [
+ "action.system.home"
+ ]
+ }
+ ],
+ "orientation": "unspecified",
+ "name": "ohos.samples.fraction.MainAbility",
+ "icon": "$media:icon",
+ "description": "$string:mainability_description",
+ "label": "$string:app_name",
+ "type": "page",
+ "launchType": "standard"
+ },
+ {
+ "icon": "$media:icon",
+ "name": "ohos.samples.fraction.NextAbility",
+ "description": "",
+ "type": "page"
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/src/main/java/ohos/samples/fraction/MainAbility.java b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/MainAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..17c72a634d7781864de193be45b6d40b4d10e3b4
--- /dev/null
+++ b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/MainAbility.java
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package ohos.samples.fraction;
+
+import ohos.aafwk.ability.fraction.FractionAbility;
+import ohos.aafwk.content.Operation;
+import ohos.agp.components.Component;
+import ohos.aafwk.content.Intent;
+
+/**
+ * MainAbility
+ *
+ * @since 2021-06-15
+ */
+public class MainAbility extends FractionAbility {
+ private MainFraction mainFraction;
+ private NextFraction nextFraction;
+ private boolean isReplace;
+
+ @Override
+ public void onStart(Intent intent) {
+ super.onStart(intent);
+ super.setUIContent(ResourceTable.Layout_ability_main);
+ initComponents();
+ }
+
+ private void initComponents() {
+ mainFraction = new MainFraction();
+ nextFraction = new NextFraction();
+ getFractionManager().startFractionScheduler().add(
+ ResourceTable.Id_main_fraction, mainFraction, "mainFraction").submit();
+ findComponentById(ResourceTable.Id_next_button).setClickedListener(this::startByName);
+ findComponentById(ResourceTable.Id_replace_button).setClickedListener(this::replace);
+ }
+
+ private void replace(Component component) {
+ if (!isReplace) {
+ getFractionManager().startFractionScheduler().replace(
+ ResourceTable.Id_main_fraction, nextFraction).submit();
+ isReplace = true;
+ } else {
+ getFractionManager().startFractionScheduler().replace(
+ ResourceTable.Id_main_fraction, mainFraction).submit();
+ isReplace = false;
+ }
+ }
+
+ private void startByName(Component component) {
+ Intent intent = new Intent();
+ Operation operation = new Intent.OperationBuilder().withDeviceId("")
+ .withBundleName("ohos.samples.fraction")
+ .withAbilityName("ohos.samples.fraction.NextAbility")
+ .build();
+ intent.setOperation(operation);
+ startAbility(intent);
+ }
+
+}
diff --git a/ability/Fraction/entry/src/main/java/ohos/samples/fraction/MainFraction.java b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/MainFraction.java
new file mode 100644
index 0000000000000000000000000000000000000000..49fd7814fb6cbf4d63f9f35c12c70dc22ce790fa
--- /dev/null
+++ b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/MainFraction.java
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package ohos.samples.fraction;
+
+import ohos.aafwk.ability.fraction.Fraction;
+import ohos.aafwk.content.Intent;
+import ohos.agp.colors.RgbColor;
+import ohos.agp.components.Component;
+import ohos.agp.components.ComponentContainer;
+import ohos.agp.components.DirectionalLayout;
+import ohos.agp.components.LayoutScatter;
+import ohos.agp.components.Text;
+import ohos.agp.components.element.ShapeElement;
+import ohos.agp.utils.Color;
+import ohos.agp.utils.LayoutAlignment;
+import ohos.hiviewdfx.HiLog;
+import ohos.hiviewdfx.HiLogLabel;
+
+/**
+ * FractionDemo1
+ *
+ * @since 2021-06-15
+ */
+public class MainFraction extends Fraction {
+
+ @Override
+ protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
+ // set layout parameters
+ DirectionalLayout directionalLayout = new DirectionalLayout(getApplicationContext());
+ ComponentContainer.LayoutConfig params = new ComponentContainer.LayoutConfig(
+ ComponentContainer.LayoutConfig.MATCH_PARENT, 300);
+ directionalLayout.setLayoutConfig(params);
+ directionalLayout.setAlignment(LayoutAlignment.CENTER);
+ ShapeElement shapeElement = new ShapeElement();
+ shapeElement.setRgbColor(new RgbColor(255, 255, 0));
+ directionalLayout.setBackground(shapeElement);
+
+ // directionalLayout add text
+ Text text = new Text(getApplicationContext());
+ text.setText("MainFraction");
+ text.setLayoutConfig(new ComponentContainer.LayoutConfig(
+ ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT));
+ text.setTextSize(100);
+ text.setTextColor(Color.BLUE);
+ directionalLayout.addComponent(text);
+ return directionalLayout;
+ }
+}
diff --git a/ability/Fraction/entry/src/main/java/ohos/samples/fraction/NextAbility.java b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/NextAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..12f45121c75c12916d03cb4a540fcd54997c0d15
--- /dev/null
+++ b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/NextAbility.java
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package ohos.samples.fraction;
+
+import ohos.aafwk.ability.fraction.Fraction;
+import ohos.aafwk.ability.fraction.FractionAbility;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Button;
+import ohos.agp.components.Component;
+import ohos.hiviewdfx.HiLog;
+import ohos.hiviewdfx.HiLogLabel;
+
+/**
+ * NextAbility
+ *
+ * @since 2021-06-15
+ */
+public class NextAbility extends FractionAbility {
+ private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD000F00, "NextAbility");
+ private Button hideButton;
+ private Button pushButton;
+ private MainFraction mainFraction;
+ private NextFraction nextFraction;
+
+ @Override
+ public void onStart(Intent intent) {
+ super.onStart(intent);
+ super.setUIContent(ResourceTable.Layout_ability_next);
+ mainFraction = new MainFraction();
+ nextFraction = new NextFraction();
+ getFractionManager().startFractionScheduler().add(ResourceTable.Id_next_fraction,
+ nextFraction, "nextFraction").submit();
+ Component componentHide = findComponentById(ResourceTable.Id_hide_button);
+ if (componentHide instanceof Button) {
+ hideButton = (Button) componentHide;
+ hideButton.setClickedListener(this::hide);
+ }
+ Component componentPush = findComponentById(ResourceTable.Id_push_button);
+ if (componentPush instanceof Button) {
+ pushButton = (Button) componentPush;
+ pushButton.setClickedListener(this::push);
+ }
+ }
+
+ private void push(Component component) {
+ if ((getApplicationContext().getString(ResourceTable.String_push_into_stack)).equals(pushButton.getText())) {
+ getFractionManager().startFractionScheduler().add(ResourceTable.Id_next_fraction,
+ mainFraction, "mainFraction").pushIntoStack("stack").submit();
+ pushButton.setText(getApplicationContext().getString(ResourceTable.String_pop_from_stack));
+ } else {
+ getFractionManager().popFromStack();
+ pushButton.setText(getApplicationContext().getString(ResourceTable.String_push_into_stack));
+ }
+ }
+
+ private void hide(Component component) {
+ Fraction fraction = getFractionManager().getFractionByTag("nextFraction").get();
+ if ((getApplicationContext().getString(ResourceTable.String_hide_fraction)).equals(hideButton.getText())) {
+ hideButton.setText(getApplicationContext().getString(ResourceTable.String_show_fraction));
+ getFractionManager().startFractionScheduler().hide(fraction).submit();
+ HiLog.info(LABEL_LOG, "hide fraction");
+ } else {
+ hideButton.setText(getApplicationContext().getString(ResourceTable.String_hide_fraction));
+ getFractionManager().startFractionScheduler().show(fraction).submit();
+ HiLog.info(LABEL_LOG, "show fraction");
+ }
+ }
+
+}
diff --git a/ability/Fraction/entry/src/main/java/ohos/samples/fraction/NextFraction.java b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/NextFraction.java
new file mode 100644
index 0000000000000000000000000000000000000000..808ddbaaeaa105b7cd1bd7c727f054d1822bc7bf
--- /dev/null
+++ b/ability/Fraction/entry/src/main/java/ohos/samples/fraction/NextFraction.java
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package ohos.samples.fraction;
+
+import ohos.aafwk.ability.fraction.Fraction;
+import ohos.aafwk.content.Intent;
+import ohos.agp.colors.RgbColor;
+import ohos.agp.components.Component;
+import ohos.agp.components.ComponentContainer;
+import ohos.agp.components.DirectionalLayout;
+import ohos.agp.components.LayoutScatter;
+import ohos.agp.components.Text;
+import ohos.agp.components.element.ShapeElement;
+import ohos.agp.utils.Color;
+import ohos.agp.utils.LayoutAlignment;
+import ohos.hiviewdfx.HiLog;
+import ohos.hiviewdfx.HiLogLabel;
+
+/**
+ * FractionDemo2
+ *
+ * @since 2021-06-15
+ */
+public class NextFraction extends Fraction {
+
+ @Override
+ protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
+ // set layout parameters
+ DirectionalLayout directionalLayout = new DirectionalLayout(getApplicationContext());
+ ComponentContainer.LayoutConfig params = new ComponentContainer.LayoutConfig(
+ ComponentContainer.LayoutConfig.MATCH_PARENT, 300);
+ directionalLayout.setLayoutConfig(params);
+ directionalLayout.setAlignment(LayoutAlignment.CENTER);
+ ShapeElement shapeElement = new ShapeElement();
+ shapeElement.setRgbColor(new RgbColor(0, 255, 255));
+ directionalLayout.setBackground(shapeElement);
+
+ // directionalLayout add text
+ Text text = new Text(getApplicationContext());
+ text.setText("NextFraction");
+ text.setLayoutConfig(new ComponentContainer.LayoutConfig(
+ ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT));
+ text.setTextSize(100);
+ text.setTextColor(Color.YELLOW);
+ text.setPadding(20, 0, 20, 0);
+ directionalLayout.addComponent(text);
+
+ return directionalLayout;
+ }
+}
diff --git a/ability/Fraction/entry/src/main/resources/base/element/color.json b/ability/Fraction/entry/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb52339939bf8b0c62313c3010876dee51d37e12
--- /dev/null
+++ b/ability/Fraction/entry/src/main/resources/base/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "color_button_blue_empty",
+ "value": "#0000FF"
+ },
+ {
+ "name": "color_button_blue_pressed",
+ "value": "#0000CC"
+ },
+ {
+ "name": "color_button_blue_text",
+ "value": "#FFFFFF"
+ },
+ {
+ "name": "color_red",
+ "value": "#F5DC62"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/src/main/resources/base/element/float.json b/ability/Fraction/entry/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..39d19dd54faa22f3ef074e8f1dcc9837390636ff
--- /dev/null
+++ b/ability/Fraction/entry/src/main/resources/base/element/float.json
@@ -0,0 +1,44 @@
+{
+ "float": [
+ {
+ "name": "button_height",
+ "value": "40vp"
+ },
+ {
+ "name": "button_width",
+ "value": "280vp"
+ },
+ {
+ "name": "button_margin",
+ "value": "10vp"
+ },
+ {
+ "name": "button_text_size",
+ "value": "18fp"
+ },
+ {
+ "name": "dialog_padding",
+ "value": "20vp"
+ },
+ {
+ "name": "dialog_content_padding",
+ "value": "10vp"
+ },
+ {
+ "name": "title_text_size",
+ "value": "18fp"
+ },
+ {
+ "name": "content_text_size",
+ "value": "16fp"
+ },
+ {
+ "name": "dialog_button_height",
+ "value": "40vp"
+ },
+ {
+ "name": "dialog_check_box_size",
+ "value": "20vp"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/src/main/resources/base/element/pattern.json b/ability/Fraction/entry/src/main/resources/base/element/pattern.json
new file mode 100644
index 0000000000000000000000000000000000000000..8917cc7110d853dfa9141805d68cd7f7664596fd
--- /dev/null
+++ b/ability/Fraction/entry/src/main/resources/base/element/pattern.json
@@ -0,0 +1,39 @@
+{
+ "pattern": [
+ {
+ "name": "button_base",
+ "value": [
+ {
+ "name": "width",
+ "value": "$float:button_width"
+ },
+ {
+ "name": "height",
+ "value": "$float:button_height"
+ },
+ {
+ "name": "text_size",
+ "value": "$float:button_text_size"
+ },
+ {
+ "name": "margin",
+ "value": "$float:button_margin"
+ }
+ ]
+ },
+ {
+ "name": "button_blue",
+ "parent": "button_base",
+ "value": [
+ {
+ "name": "background_element",
+ "value": "$graphic:button_blue"
+ },
+ {
+ "name": "text_color",
+ "value": "$color:color_button_blue_text"
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/src/main/resources/base/element/string.json b/ability/Fraction/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..4fd3ed9a4a940a9123faf244af4ba4656851979b
--- /dev/null
+++ b/ability/Fraction/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,36 @@
+{
+ "string": [
+ {
+ "name": "app_name",
+ "value": "Fraction"
+ },
+ {
+ "name": "mainability_description",
+ "value": "FractionAbility"
+ },
+ {
+ "name": "push_into_stack",
+ "value": "Push into Stack"
+ },
+ {
+ "name": "pop_from_stack",
+ "value": "Pop from Stack"
+ },
+ {
+ "name": "hide_fraction",
+ "value": "Hide Fraction"
+ },
+ {
+ "name": "show_fraction",
+ "value": "Show Fraction"
+ },
+ {
+ "name": "replace_fraction",
+ "value": "Replace Fraction"
+ },
+ {
+ "name": "next_page",
+ "value": "Next Page"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ability/Fraction/entry/src/main/resources/base/graphic/button_blue.xml b/ability/Fraction/entry/src/main/resources/base/graphic/button_blue.xml
new file mode 100644
index 0000000000000000000000000000000000000000..c7ac8a58fa538cb49c2002099764577c5465bfe3
--- /dev/null
+++ b/ability/Fraction/entry/src/main/resources/base/graphic/button_blue.xml
@@ -0,0 +1,22 @@
+
+
+
+