update OpenHarmony 2.0 Canary

2024-11-23 00:20:07 +00:00 · 2021-06-02 12:34:30 +08:00 · 2021-06-02 12:34:30 +08:00 · e40995cd1f
commit e40995cd1f
parent 9c3d319c82
1683 changed files with 46695 additions and 70 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,15 @@
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.trp filter=lfs diff=lfs merge=lfs -text
+*.apk filter=lfs diff=lfs merge=lfs -text
+*.jar filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.asm filter=lfs diff=lfs merge=lfs -text
+*.8svn filter=lfs diff=lfs merge=lfs -text
+*.9svn filter=lfs diff=lfs merge=lfs -text
+*.dylib filter=lfs diff=lfs merge=lfs -text
+*.exe filter=lfs diff=lfs merge=lfs -text
+*.a filter=lfs diff=lfs merge=lfs -text
+*.so filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.dll filter=lfs diff=lfs merge=lfs -text
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,11 @@
+# from HUAWEI DevEco Studio/IDEA
+*.iml
+.idea
+local.properties
+
+# from gradle
+.gradle/
+build/
+
+# from Mac
+.DS_Store
--- a/217
+++ b/217
@ -0,0 +1,217 @@
+License Notice
+
+Copyright 2021 Huawei Device Co., Ltd.
+Testing Materials under this file are licensed under License Agreement for Testing Materials. All other materials under this file, including codes are licensed under Apache License V 2.O
+
+--------------------------------------------------------------------------------
+License Agreement for Testing Materials
+
+
+THIS LICENSE AGREEMENT FOR TESTING MATERIALS (“AGREEMENT”) IS A LEGAL AGREEMENT BETWEEN YOU (EITHER A SINGLE INDIVIDUAL, OR SINGLE LEGAL ENTITY) AND LICENSORS FOR THE USE OF THE TESTING MATERIALS ACCOMPANYING THIS AGREEMENT FOR TESTING PURPOSE. BY DOWNLOADING, REPRODUCING OR OTHERWISE USING THE TESTING MATERIALS YOU INDICATE THAT YOU AGREE TO BE BOUND BY ALL OF THE TERMS OF THIS AGREEMENT. IF YOU DO NOT AGREE TO THE TERMS OF THIS AGREEMENT, YOU MAY NOT DOWNLOAD, REPRODUCE OR OTHERWISE USING THE TESTING MATERIALS, AND YOU SHALL PROMPTLY DESTROY AND DELETE ALL THE TESTING MATERIALS.
+
+1.	Definition  
+"Testing Materials" shall mean the materials provided by licensors under this agreement for testing the function of OpenHarmony Operating System,an open source project governed under OpenAtom Foundation. The Testing Materials include but not limited to photos, pictures, graphics, videos and audios.
+
+"Licensors" shall mean the copyright holders or their licensees who have the right to license the Testing Materials under this Agreement.
+
+"YOU" shall mean an individual or legal entity exercising permissions granted by this Agreement. 
+
+2.	GRANT OF LICENSE
+
+Subject to the terms and conditions of this Agreement, Licensors hereby grant YOU, a non-transferable, non-exclusive, royalty-free, revocable, worldwide copyright license (without the right to sublicense) to reproduce and use Testing Materials internally solely for the purpose of testing the function of OpenHarmony Operating System. YOU agree not to use the TESTING MATERIALS for any other purposes.
+
+Except as expressly licensed in Section 2, in no event shall the license granted in this Section 2 be construed as granting YOU expressly or by implication, estoppels or otherwise, licenses to any intellectual property rights, including but not limited to patent rights, copyrights, trademark or trade secret in the TESTING MATERIALS.
+
+Any use beyond the internal testing purpose as stated in Section 2 is prohibited.
+No right is granted to YOU under this Agreement to distribute the Testing Materials or any part of them or their derivative works independently or accompany with your products or services.
+
+3.	NO WARRANTY
+YOU AGREE THAT THE TESTING MATERIALS IS PROVIDED BY LICENSORS ON AN "AS IS" BASIS. LICENSORS MAKES NO WARRANTY, EXPRESSED OR IMPLIED OR STATUTORY, WITH RESPECT TO ANY OF THE TESTING MATERIALS, INCLUDING WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, SATISFACTORY QUALITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT.
+
+YOU EXPRESSLY ASSUME ALL LIABILITIES AND RISKS FOR USE OF THE TESTING MATERIALS. SHOULD THE TESTING MATERIALS PROVE DEFECTIVE, YOU ASSUME THE ENTIRE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+4.	NO LIABILITY
+PLEASE NOTE THAT YOU SHOULD USE THE TESTING MATERIALS AT YOUR OWN RISK.
+
+IN NO EVENT SHALL LICENSORS BE LIABLE FOR ANY DIRECT OR INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE OF OR INABILITY TO USE THE TESTING MATERIALS, WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHER LEGAL THEORY, EVEN IF LICENSORS HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+--------------------------------------------------------------------------------
+
+
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form. 
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
--- a/OAT.xml
+++ b/OAT.xml
@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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.
+
+     Notes:
+     This is project config file for OpenHarmony OSS Audit Tool, if you have any questions or concerns, please email chenyaxun.
+-->
+<!-- OAT(OSS Audit Tool) configuration guide:
+basedir: Root dir, the basedir + project path is the real source file location.
+licensefile:
+1.If the project don't have "LICENSE" in root dir, please define all the license files in this project in , OAT will check license files according to this rule.
+
+tasklist(only for batch mode):
+1. task: Define oat check thread, each task will start a new thread.
+2. task name: Only an name, no practical effect.
+3. task policy: Default policy for projects under this task, this field is required and the specified policy must defined in policylist.
+4. task filter: Default filefilter for projects under this task, this field is required and the specified filefilter must defined in filefilterlist.
+5. task project: Projects to be checked, the path field define the source root dir of the project.
+
+
+policyList:
+1. policy: All policyitems will be merged to default OAT.xml rules, the name of policy doesn't affect OAT check process.
+2. policyitem: The fields type, name, path, desc is required, and the fields rule, group, filefilter is optional,the default value is:
+<policyitem type="" name="" path="" desc="" rule="may" group="defaultGroup" filefilter="defaultPolicyFilter"/>
+3. policyitem type:
+    "compatibility" is used to check license compatibility in the specified path;
+    "license" is used to check source license header in the specified path;
+    "copyright" is used to check source copyright header in the specified path;
+    "import" is used to check source dependency in the specified path, such as import ... ,include ...
+    "filetype" is used to check file type in the specified path, supported file types: archive, binary
+    "filename" is used to check whether the specified file exists in the specified path(support projectroot in default OAT.xml), supported file names: LICENSE, README, README.OpenSource
+
+4. policyitem name: This field is used for define the license, copyright, "*" means match all, the "!" prefix means could not match this value. For example, "!GPL" means can not use GPL license.
+5. policyitem path: This field is used for define the source file scope to apply this policyitem, the "!" prefix means exclude the files. For example, "!.*/lib/.*" means files in lib dir will be exclude while process this policyitem.
+6. policyitem rule and group: These two fields are used together to merge policy results. "may" policyitems in the same group means any one in this group passed, the result will be passed.
+7. policyitem filefilter: Used to bind filefilter which define filter rules.
+8. filefilter: Filter rules, the type filename is used to filter file name, the type filepath is used to filter file path.
+
+Note:If the text contains special characters, please escape them according to the following rules:
+" == &gt;
+& == &gt;
+' == &gt;
+< == &gt;
+> == &gt;
+-->
+<configuration>
+    <oatconfig>
+        <filefilterlist>
+            <filefilter name="licenseFileNamePolicyFilter" desc="Filters for LICENSE file policies">
+                <filteritem type="filepath" name="network/Bluetooth/entry/src/main/java/ohos/samples/bluetooth/adapter/" desc="Not contains 3rd code，license file is not required in this subdirectory."/>
+            </filefilter>
+            <filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies" >
+                <filteritem type="filepath" name="ability/DistributedMusicPlayer/entry/src/main/resources/rawfile/Homey.mp3" desc="Provided by the UX team."/>
+                <filteritem type="filepath" name="ability/DistributedMusicPlayer/entry/src/main/resources/rawfile/Technology.mp3" desc="Provided by the UX team."/>
+                <filteritem type="filepath" name="UI/JsAnimation/entry/src/main/js/default/common/animator/show.mp4" desc="Provided by the UX team."/>
+                <filteritem type="filepath" name="UI/JsAnimation/entry/src/main/js/default/common/animator/butterfly.mp4" desc="Provided by the UX team."/>
+                <filteritem type="filepath" name="UI/JsShopping/entry/src/main/js/default/common/detailImg/swiperImg/swiper.mp4" desc="Provided by the UX team."/>
+            </filefilter>
+        </filefilterlist>
+    </oatconfig>
+</configuration>
--- a/README.en.md
+++ b/README.en.md
@ -1,36 +0,0 @@
-# app_samples
-
-#### Description
-{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
-
-#### Software Architecture
-Software architecture description
-
-#### Installation
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Instructions
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Contribution
-
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
-
-
-#### Gitee Feature
-
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
--- a/README.md
+++ b/README.md
@ -1,39 +1,30 @@
-# app_samples
+# App Samples<a name="EN-US_TOPIC_0000001115464207"></a>

-#### 介绍
-{**以下是 Gitee 平台说明，您可以替换此简介**
-Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
-无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+-   [Introduction](#section1470103520301)
+-   [Usage](#section17988202503116)
+-   [Limitations](#section18841871178)
+-   [Repositories Involved](#section741114082513)
+-   [Licensing](#section5315468537)

-#### 软件架构
-软件架构说明
+## Introduction<a name="section1470103520301"></a>
+
+OpenHarmony provides a series of app samples to help you quickly get familiar with the APIs and app development process of the OpenHarmony SDK. Each app sample is an independent project in DevEco Studio. You can import a project into DevEco Studio to learn how to use APIs in the sample by browsing code, building the project, and installing and running the app.
+
+## Usage<a name="section17988202503116"></a>
+
+1.  Import an independent app sample project into DevEco Studio for compilation, building, running, and debugging. For details, see  [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387).
+2.  Some samples contain multiple modules. You can compile and build a single module to generate a HAP file or compile and build the entire project to generate multiple HAP files.
+3.  After HAP installation and execution, you can view the execution effect of the sample on the device and then conduct debugging.
+
+## Limitations<a name="section18841871178"></a>
+
+1.  Before installing and running the sample, check the  **deviceType**  field in the  **config.json**  file to obtain the device types supported by the sample. You can modify this field to enable the sample to run on your target device. \(The  **config.json**  file is generally stored in the  **entry/src/main**  directory, which may be different depending on the samples.\)
+2.  App samples in the following directories can run on the standard system \(reference memory ≥ 128 MiB\). Other app examples can run only on the large system \(reference memory ≥ 1 GiB\):
+    -   common/Clock
+    -   common/JsHelloWorld


-#### 安装教程
+## Repositories Involved<a name="section741114082513"></a>

-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 使用说明
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 参与贡献
-
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
-
-
-#### 特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+1.  [applications\_sample\_camera](https://gitee.com/openharmony/applications_sample_camera/blob/master/README.md)
+2.  [applications\_sample\_wifi\_iot](https://gitee.com/openharmony/applications_sample_wifi_iot/blob/master/README.md)
--- a/README_zh.md
+++ b/README_zh.md
@ -0,0 +1,33 @@
+# 应用示例<a name="ZH-CN_TOPIC_0000001115464207"></a>
+
+-   [概要简介](#section1470103520301)
+-   [使用说明](#section17988202503116)
+-   [约束与限制](#section18841871178)
+-   [相关仓](#section741114082513)
+-   [许可证](#section5315468537)
+
+## 概要简介<a name="section1470103520301"></a>
+
+为帮助开发者快速熟悉OpenHarmony SDK所提供的API和应用开发流程，OpenHarmony提供了一系列的应用示例，即Sample。每一个应用示例都是一个独立的DevEco Studio工程项目，开发者可以将工程导入到DevEco Studio开发工具，通过浏览代码、编译工程、安装和运行应用示例来了解应用示例中涉及API的使用方法。
+
+## 使用说明<a name="section17988202503116"></a>
+
+1.  将独立的应用示例工程导入DevEco Studio进行编译构建及运行调试，具体使用可参考[DevEco Studio使用说明](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。
+2.  部分应用示例中含有多个模块，开发者可以选择对单个模块进行编译构建，生成一个HAP应用安装包，也可以对整个工程进行编译构建，生成多个HAP应用安装包。
+3.  安装运行后，即可在设备上查看应用示例运行效果，以及进行相关调试。
+
+## 约束与限制<a name="section18841871178"></a>
+
+1.  安装运行应用示例之前，请先通过config.json文件中的"deviceType"字段来确认该应用示例支持的设备类型，可尝试通过修改该字段使其可以在相应类型的设备上运行（config.json文件一般在代码的entry/src/main路径下，不同的Sample可能会有不同）。
+2.  以下路径下的应用示例支持在**标准系统**（参考内存≥128MiB）上运行，其余应用示例仅支持在**大型系统**（参考内存≥1GiB）上运行。
+    -   common/Clock
+    -   common/JsHelloWorld
+
+
+## 相关仓<a name="section741114082513"></a>
+
+1.  CAMERA\_SAMPLE\_APP组件的应用示例：[applications\_sample\_camera](https://gitee.com/openharmony/applications_sample_camera/blob/master/README_zh.md)
+2.  WIFI\_IOT\_APP组件的应用示例：[applications\_sample\_wifi\_iot](https://gitee.com/openharmony/applications_sample_wifi_iot/blob/master/README_zh.md)
+
+
+
--- a/UI/Animation/README_zh.md
+++ b/UI/Animation/README_zh.md
@ -0,0 +1,9 @@
+# 动画<a name="ZH-CN_TOPIC_0000001080120356"></a>
+
+-   动画是组件的基础特性之一，精心设计的动画使 UI 变化更直观，有助于改进应用程序的外观并改善用户体验。
+
+    1、帧动画是利用视觉暂留现象，将一系列静止的图片按序播放，给用户产生动画的效果。
+
+    2、AnimatorValue 数值从0到1变化，本身与 Component 无关。开发者可以设置0到1变化过程的属性，例如：时长、变化曲线、重复次数等，并通过值的变化改变组件的属性，实现组件的动画效果。
+
+    3、AnimatorProperty 可以为 Component 设置某个属性或多个属性而实现动画效果。
--- a/UI/Animation/build.gradle
+++ b/UI/Animation/build.gradle
@ -0,0 +1,37 @@
+// 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()
+    }
+}
+
--- a/UI/Animation/entry/build.gradle
+++ b/UI/Animation/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'])
+}
--- a/UI/Animation/entry/src/main/config.json
+++ b/UI/Animation/entry/src/main/config.json
@ -0,0 +1,54 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.animation",
+    "version": {
+      "code": 2000000,
+      "name": "2.0"
+    },
+    "apiVersion": {
+      "compatible": 4,
+      "target": 5,
+      "releaseType": "Release"
+    },
+    "type": "normal"
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.animation",
+    "name": ".Animation",
+    "reqCapabilities": [
+      "video_support"
+    ],
+    "deviceType": [
+      "default"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry"
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "portrait",
+        "visible": true,
+        "formsEnabled": false,
+        "name": "ohos.samples.animation.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ]
+  }
+}
--- a/UI/Animation/entry/src/main/java/ohos/samples/animation/MainAbility.java
+++ b/UI/Animation/entry/src/main/java/ohos/samples/animation/MainAbility.java
@ -0,0 +1,32 @@
+/*
+ * 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.animation;
+
+import ohos.samples.animation.slice.MainAbilitySlice;
+
+import ohos.aafwk.ability.Ability;
+import ohos.aafwk.content.Intent;
+
+/**
+ * MainAbility
+ */
+public class MainAbility extends Ability {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setMainRoute(MainAbilitySlice.class.getName());
+    }
+}
--- a/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorFrameSlice.java
+++ b/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorFrameSlice.java
@ -0,0 +1,66 @@
+/*
+ * 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.animation.slice;
+
+import ohos.samples.animation.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Component;
+import ohos.agp.components.DirectionalLayout;
+import ohos.agp.components.element.FrameAnimationElement;
+
+/**
+ * AnimatorFrameSlice
+ */
+public class AnimatorFrameSlice extends AbilitySlice {
+    private FrameAnimationElement frameAnimationElement;
+
+    private DirectionalLayout componentContainer;
+
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_animator_frame_slice_layout);
+        initAnimator();
+        initComponents();
+    }
+
+    private void initAnimator() {
+        frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_animation_element);
+    }
+
+    private void initComponents() {
+        componentContainer = (DirectionalLayout) findComponentById(ResourceTable.Id_frame_container);
+        Component startButton = findComponentById(ResourceTable.Id_start_animation_button);
+        startButton.setClickedListener(this::startAnimation);
+
+        Component component = new Component(getContext());
+        component.setWidth(500);
+        component.setHeight(500);
+        component.setBackground(frameAnimationElement);
+        componentContainer.addComponent(component);
+    }
+
+    private void startAnimation(Component component) {
+        frameAnimationElement.start();
+    }
+
+    @Override
+    protected void onStop() {
+        componentContainer.removeAllComponents();
+    }
+}
--- a/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorGroupAbilitySlice.java
+++ b/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorGroupAbilitySlice.java
@ -0,0 +1,92 @@
+/*
+ * 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.animation.slice;
+
+import ohos.samples.animation.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.animation.Animator;
+import ohos.agp.animation.AnimatorGroup;
+import ohos.agp.animation.AnimatorValue;
+import ohos.agp.components.Component;
+
+/**
+ * AnimatorGroupAbilitySlice
+ */
+public class AnimatorGroupAbilitySlice extends AbilitySlice {
+    private AnimatorValue targetAnimator1;
+
+    private AnimatorValue targetAnimator2;
+
+    private AnimatorValue targetAnimator3;
+
+    private AnimatorValue targetAnimator4;
+
+    private AnimatorGroup animatorGroup;
+
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_animator_group_slice_layout);
+        initComponents();
+        animatorGroup = new AnimatorGroup();
+    }
+
+    private void initComponents() {
+        Component targetImage1 = findComponentById(ResourceTable.Id_target_image1);
+        targetAnimator1 = getValueAnimator(targetImage1);
+        Component targetImage2 = findComponentById(ResourceTable.Id_target_image2);
+        targetAnimator2 = getValueAnimator(targetImage2);
+        Component targetImage3 = findComponentById(ResourceTable.Id_target_image3);
+        targetAnimator3 = getValueAnimator(targetImage3);
+        Component targetImage4 = findComponentById(ResourceTable.Id_target_image4);
+        targetAnimator4 = getValueAnimator(targetImage4);
+
+        findComponentById(ResourceTable.Id_serially_animator_button).setClickedListener(this::startSeriallyAnimator);
+        findComponentById(ResourceTable.Id_parallel_animator_button).setClickedListener(this::startParallelAnimator);
+        findComponentById(ResourceTable.Id_builder_animator_button).setClickedListener(this::startBuilderAnimator);
+    }
+
+    private void startBuilderAnimator(Component component) {
+        AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();
+        animatorGroupBuilder.addAnimators(targetAnimator1)
+            .addAnimators(targetAnimator2, targetAnimator3)
+            .addAnimators(targetAnimator4);
+        animatorGroup.start();
+    }
+
+    private void startParallelAnimator(Component component) {
+        animatorGroup.runParallel(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
+        animatorGroup.start();
+    }
+
+    private void startSeriallyAnimator(Component component) {
+        animatorGroup.runSerially(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
+        animatorGroup.start();
+    }
+
+    private AnimatorValue getValueAnimator(Component component) {
+        AnimatorValue animator = new AnimatorValue();
+        animator.setDuration(2000);
+        animator.setLoopedCount(0);
+        animator.setCurveType(Animator.CurveType.BOUNCE);
+        animator.setValueUpdateListener(
+            (animatorValue, value) -> component.setContentPosition(component.getContentPositionX(),
+                (int) (800 * value)));
+        return animator;
+    }
+}
--- a/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorPropertySlice.java
+++ b/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorPropertySlice.java
@ -0,0 +1,89 @@
+/*
+ * 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.animation.slice;
+
+import ohos.samples.animation.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.animation.Animator;
+import ohos.agp.animation.AnimatorProperty;
+import ohos.agp.components.Component;
+
+/**
+ * AnimatorAbilitySlice
+ */
+public class AnimatorPropertySlice extends AbilitySlice {
+    private Component propertyAnimationImage;
+
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_animator_property_slice_layout);
+        initComponents();
+    }
+
+    private void initComponents() {
+        propertyAnimationImage = findComponentById(ResourceTable.Id_property_animation_image);
+        Component scaleButton = findComponentById(ResourceTable.Id_animator_scale_button);
+        Component rotateButton = findComponentById(ResourceTable.Id_animator_rotate_button);
+        Component alphaButton = findComponentById(ResourceTable.Id_animator_alpha_button);
+        Component translateButton = findComponentById(ResourceTable.Id_animator_translate_button);
+
+        scaleButton.setClickedListener(this::startScaleAnimation);
+        rotateButton.setClickedListener(this::startRotateAnimation);
+        alphaButton.setClickedListener(this::startAlphaAnimation);
+        translateButton.setClickedListener(this::startTranslateAnimation);
+    }
+
+    private void startScaleAnimation(Component component) {
+        propertyAnimationImage.setScale(1, 1);
+        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
+        animator.setCurveType(Animator.CurveType.ANTICIPATE_OVERSHOOT);
+        animator.scaleY(0.7f);
+        animator.scaleX(1.5f);
+        animator.setDuration(2000);
+        animator.setLoopedCount(2);
+        animator.start();
+    }
+
+    private void startRotateAnimation(Component component) {
+        propertyAnimationImage.setRotation(0);
+        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
+        animator.setCurveType(Animator.CurveType.ANTICIPATE_OVERSHOOT);
+        animator.rotate(360);
+        animator.setDuration(2000);
+        animator.setLoopedCount(2);
+        animator.start();
+    }
+
+    private void startAlphaAnimation(Component component) {
+        propertyAnimationImage.setAlpha(1);
+        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
+        animator.alpha(0.2f);
+        animator.setDuration(1000);
+        animator.setLoopedCount(2);
+        animator.start();
+    }
+
+    private void startTranslateAnimation(Component component) {
+        AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
+        animator.moveToX(0);
+        animator.setDuration(1000);
+        animator.setLoopedCount(2);
+        animator.start();
+    }
+}
--- a/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorValueSlice.java
+++ b/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/AnimatorValueSlice.java
@ -0,0 +1,66 @@
+/*
+ * 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.animation.slice;
+
+import ohos.samples.animation.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.animation.Animator;
+import ohos.agp.animation.AnimatorValue;
+import ohos.agp.components.Component;
+
+/**
+ * AnimatorValueSlice
+ */
+public class AnimatorValueSlice extends AbilitySlice {
+    private Component valueAnimationImage;
+
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_animator_value_slice_layout);
+        initComponents();
+    }
+
+    private void initComponents() {
+        valueAnimationImage = findComponentById(ResourceTable.Id_value_animation_image);
+        Component springButton = findComponentById(ResourceTable.Id_animator_spring_button);
+        springButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.SPRING));
+        Component anticipateButton = findComponentById(ResourceTable.Id_animator_anticipate_button);
+        anticipateButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.ANTICIPATE));
+        Component cycleButton = findComponentById(ResourceTable.Id_animator_cycle_button);
+        cycleButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.CYCLE));
+        Component overshootButton = findComponentById(ResourceTable.Id_animator_overshoot_button);
+        overshootButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.OVERSHOOT));
+        Component smoothStepButton = findComponentById(ResourceTable.Id_animator_smoothStep_button);
+        smoothStepButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.SMOOTH_STEP));
+        Component cubicHermit = findComponentById(ResourceTable.Id_animator_cubic_button);
+        cubicHermit.setClickedListener(component -> startValueAnimator(Animator.CurveType.CUBIC_HERMITE));
+    }
+
+    private void startValueAnimator(int curvyType) {
+        AnimatorValue animator = new AnimatorValue();
+        animator.setDuration(2000);
+        animator.setDelay(0);
+        animator.setLoopedCount(1);
+        animator.setCurveType(curvyType);
+        animator.setValueUpdateListener(
+            (animatorValue, value) -> valueAnimationImage.setContentPosition((int) (700 * value),
+                valueAnimationImage.getContentPositionY()));
+        animator.start();
+    }
+}
--- a/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/MainAbilitySlice.java
+++ b/UI/Animation/entry/src/main/java/ohos/samples/animation/slice/MainAbilitySlice.java
@ -0,0 +1,46 @@
+/*
+ * 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.animation.slice;
+
+import ohos.samples.animation.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Component;
+
+/**
+ * MainAbilitySlice
+ */
+public class MainAbilitySlice extends AbilitySlice {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_main_ability_slice);
+        initComponents();
+    }
+
+    private void initComponents() {
+        Component frameButton = findComponentById(ResourceTable.Id_animator_frame_button);
+        Component propertyButton = findComponentById(ResourceTable.Id_animator_property_button);
+        Component valueButton = findComponentById(ResourceTable.Id_animator_value_button);
+        Component groupButton = findComponentById(ResourceTable.Id_animator_group_button);
+
+        frameButton.setClickedListener(component -> present(new AnimatorFrameSlice(), new Intent()));
+        propertyButton.setClickedListener(component -> present(new AnimatorPropertySlice(), new Intent()));
+        valueButton.setClickedListener(component -> present(new AnimatorValueSlice(), new Intent()));
+        groupButton.setClickedListener(component -> present(new AnimatorGroupAbilitySlice(), new Intent()));
+    }
+}
--- a/UI/Animation/entry/src/main/resources/base/element/string.json
+++ b/UI/Animation/entry/src/main/resources/base/element/string.json
@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "Animation"
+    },
+    {
+      "name": "mainability_description",
+      "value": "hap sample empty page"
+    }
+  ]
+}
--- a/UI/Animation/entry/src/main/resources/base/graphic/animation_element.xml
+++ b/UI/Animation/entry/src/main/resources/base/graphic/animation_element.xml
@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<animation-list xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+                ohos:oneshot="false">
+    <item ohos:duration="100" ohos:element="$media:01"/>
+    <item ohos:duration="100" ohos:element="$media:02"/>
+    <item ohos:duration="100" ohos:element="$media:03"/>
+    <item ohos:duration="100" ohos:element="$media:04"/>
+    <item ohos:duration="100" ohos:element="$media:05"/>
+    <item ohos:duration="100" ohos:element="$media:06"/>
+    <item ohos:duration="100" ohos:element="$media:07"/>
+    <item ohos:duration="100" ohos:element="$media:08"/>
+    <item ohos:duration="100" ohos:element="$media:09"/>
+    <item ohos:duration="100" ohos:element="$media:10"/>
+    <item ohos:duration="100" ohos:element="$media:11"/>
+    <item ohos:duration="100" ohos:element="$media:12"/>
+</animation-list>
--- a/UI/Animation/entry/src/main/resources/base/graphic/button_background.xml
+++ b/UI/Animation/entry/src/main/resources/base/graphic/button_background.xml
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <corners
+        ohos:radius="75"/>
+    <solid
+        ohos:color="#0d000000"/>
+</shape>
--- a/UI/Animation/entry/src/main/resources/base/layout/animator_frame_slice_layout.xml
+++ b/UI/Animation/entry/src/main/resources/base/layout/animator_frame_slice_layout.xml
@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:alignment="horizontal_center"
+    ohos:orientation="vertical">
+
+    <DirectionalLayout
+        ohos:top_margin="20vp"
+        ohos:height="match_content"
+        ohos:id="$+id:frame_container"
+        ohos:background_element="$media:01"
+        ohos:width="match_content"/>
+
+    <Button
+        ohos:id="$+id:start_animation_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:padding="10vp"
+        ohos:left_margin="24vp"
+        ohos:right_margin="24vp"
+        ohos:text="Start"
+        ohos:text_size="16vp"
+        ohos:top_margin="20vp"/>
+</DirectionalLayout>
--- a/UI/Animation/entry/src/main/resources/base/layout/animator_group_slice_layout.xml
+++ b/UI/Animation/entry/src/main/resources/base/layout/animator_group_slice_layout.xml
@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <DirectionalLayout
+        ohos:height="0vp"
+        ohos:width="match_parent"
+        ohos:alignment="horizontal_center"
+        ohos:orientation="horizontal"
+        ohos:padding="10vp"
+        ohos:top_margin="20vp"
+        ohos:weight="1">
+
+        <Component
+            ohos:id="$+id:target_image1"
+            ohos:height="60vp"
+            ohos:width="60vp"
+            ohos:background_element="#00ffff"/>
+
+        <Component
+            ohos:id="$+id:target_image2"
+            ohos:height="60vp"
+            ohos:width="60vp"
+            ohos:background_element="#00ffff"
+            ohos:left_margin="10vp"/>
+
+        <Component
+            ohos:id="$+id:target_image3"
+            ohos:height="60vp"
+            ohos:width="60vp"
+            ohos:background_element="#00ffff"
+            ohos:left_margin="10vp"/>
+
+        <Component
+            ohos:id="$+id:target_image4"
+            ohos:height="60vp"
+            ohos:width="60vp"
+            ohos:background_element="#00ffff"
+            ohos:left_margin="10vp"/>
+    </DirectionalLayout>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:bottom_margin="50vp"
+        ohos:margin="24vp">
+
+        <Button
+            ohos:id="$+id:serially_animator_button"
+            ohos:height="match_content"
+            ohos:width="match_parent"
+            ohos:background_element="$graphic:button_background"
+            ohos:padding="10vp"
+            ohos:text="Serially Animator Group"
+            ohos:text_size="16vp"/>
+
+        <Button
+            ohos:id="$+id:parallel_animator_button"
+            ohos:height="match_content"
+            ohos:width="match_parent"
+            ohos:background_element="$graphic:button_background"
+            ohos:padding="10vp"
+            ohos:text="Parallel Animator Group"
+            ohos:text_size="16vp"
+            ohos:top_margin="20vp"/>
+
+        <Button
+            ohos:id="$+id:builder_animator_button"
+            ohos:height="match_content"
+            ohos:width="match_parent"
+            ohos:background_element="$graphic:button_background"
+            ohos:padding="10vp"
+            ohos:text="Animator Group Builder"
+            ohos:text_size="16vp"
+            ohos:top_margin="20vp"/>
+    </DirectionalLayout>
+</DirectionalLayout>
--- a/UI/Animation/entry/src/main/resources/base/layout/animator_property_slice_layout.xml
+++ b/UI/Animation/entry/src/main/resources/base/layout/animator_property_slice_layout.xml
@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:alignment="horizontal_center"
+    ohos:orientation="vertical">
+
+    <Component
+        ohos:id="$+id:property_animation_image"
+        ohos:height="70vp"
+        ohos:width="70vp"
+        ohos:background_element="#00ffff"
+        ohos:top_margin="20vp"/>
+
+    <Button
+        ohos:id="$+id:animator_scale_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Scale"
+        ohos:text_size="16fp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_rotate_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Rotate"
+        ohos:text_size="16fp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_alpha_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Alpha"
+        ohos:text_size="16fp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_translate_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Translate"
+        ohos:text_size="16fp"
+        ohos:top_margin="30vp"/>
+</DirectionalLayout>
--- a/UI/Animation/entry/src/main/resources/base/layout/animator_value_slice_layout.xml
+++ b/UI/Animation/entry/src/main/resources/base/layout/animator_value_slice_layout.xml
@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <Component
+        ohos:id="$+id:value_animation_image"
+        ohos:height="70vp"
+        ohos:width="70vp"
+        ohos:background_element="#00ffff"
+        ohos:top_margin="20vp"/>
+
+    <Button
+        ohos:id="$+id:animator_spring_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Spring"
+        ohos:text_size="16vp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_anticipate_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Anticipate"
+        ohos:text_size="16vp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_cycle_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Cycle"
+        ohos:text_size="16vp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_overshoot_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Overshoot"
+        ohos:text_size="16vp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_smoothStep_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Smooth Step"
+        ohos:text_size="16vp"
+        ohos:top_margin="30vp"/>
+
+    <Button
+        ohos:id="$+id:animator_cubic_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:button_background"
+        ohos:left_margin="24vp"
+        ohos:padding="10vp"
+        ohos:right_margin="24vp"
+        ohos:text="Cubic Hermit"
+        ohos:text_size="16vp"
+        ohos:top_margin="30vp"/>
+</DirectionalLayout>
--- a/UI/Animation/entry/src/main/resources/base/layout/main_ability_slice.xml
+++ b/UI/Animation/entry/src/main/resources/base/layout/main_ability_slice.xml
@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <Button
+        ohos:id="$+id:animator_frame_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Animator Frame"
+        ohos:text_alignment="left"
+        ohos:text_size="16vp"/>
+
+    <Button
+        ohos:id="$+id:animator_value_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Animator Value"
+        ohos:text_alignment="left"
+        ohos:text_size="16vp"/>
+
+    <Button
+        ohos:id="$+id:animator_property_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Animator Property"
+        ohos:text_alignment="left"
+        ohos:text_size="16vp"/>
+
+    <Button
+        ohos:id="$+id:animator_group_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Animator Group"
+        ohos:text_alignment="left"
+        ohos:text_size="16vp"/>
+</DirectionalLayout>
--- a/UI/Animation/entry/src/main/resources/base/media/01.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/01.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/02.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/02.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/03.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/03.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/04.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/04.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/05.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/05.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/06.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/06.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/07.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/07.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/08.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/08.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/09.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/09.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/10.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/10.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/11.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/11.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/12.jpg
+++ b/UI/Animation/entry/src/main/resources/base/media/12.jpg
--- a/UI/Animation/entry/src/main/resources/base/media/ic_arrow_right.png
+++ b/UI/Animation/entry/src/main/resources/base/media/ic_arrow_right.png
--- a/UI/Animation/entry/src/main/resources/base/media/icon.png
+++ b/UI/Animation/entry/src/main/resources/base/media/icon.png
--- a/UI/Animation/screenshots/device/animator_frame.png
+++ b/UI/Animation/screenshots/device/animator_frame.png
--- a/UI/Animation/screenshots/device/animator_group.png
+++ b/UI/Animation/screenshots/device/animator_group.png
--- a/UI/Animation/screenshots/device/animator_property.png
+++ b/UI/Animation/screenshots/device/animator_property.png
--- a/UI/Animation/screenshots/device/animator_value.png
+++ b/UI/Animation/screenshots/device/animator_value.png
--- a/UI/Animation/screenshots/device/main_ability.png
+++ b/UI/Animation/screenshots/device/main_ability.png
--- a/UI/Animation/settings.gradle
+++ b/UI/Animation/settings.gradle
@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+include 'entry'
--- a/UI/CommonLayout/README_zh.md
+++ b/UI/CommonLayout/README_zh.md
@ -0,0 +1,13 @@
+# 常用布局<a name="ZH-CN_TOPIC_0000001127379517"></a>
+
+-   DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件（Component）按照水平或者垂直方向排布，能够方便地对齐布局内的组件。
+
+    该布局和其他布局的组合，可以实现更加丰富的布局方式。
+
+    DirectionalLayout 的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。使用 orientation 设置布局内组件的排列方式，默认为垂直排列。
+
+    DependentLayout 是 Java UI 系统里的一种常见布局。
+
+    与 DirectionalLayout 相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。
+
+    DependentLayout 的排列方式是相对于其他同级组件或者父组件的位置进行布局。
--- a/UI/CommonLayout/build.gradle
+++ b/UI/CommonLayout/build.gradle
@ -0,0 +1,37 @@
+// 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()
+    }
+}
+
--- a/UI/CommonLayout/entry/build.gradle
+++ b/UI/CommonLayout/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'])
+}
--- a/UI/CommonLayout/entry/src/main/config.json
+++ b/UI/CommonLayout/entry/src/main/config.json
@ -0,0 +1,54 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.commonlayout",
+    "version": {
+      "code": 2000000,
+      "name": "2.0"
+    },
+    "apiVersion": {
+      "compatible": 4,
+      "target": 5,
+      "releaseType": "Release"
+    },
+    "type": "normal"
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.commonlayout",
+    "name": ".CommonLayout",
+    "reqCapabilities": [
+      "video_support"
+    ],
+    "deviceType": [
+      "default"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry"
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "formsEnabled": false,
+        "name": "ohos.samples.commonlayout.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ]
+  }
+}
--- a/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/MainAbility.java
+++ b/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/MainAbility.java
@ -0,0 +1,32 @@
+/*
+ * 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.commonlayout;
+
+import ohos.samples.commonlayout.slice.MainAbilitySlice;
+
+import ohos.aafwk.ability.Ability;
+import ohos.aafwk.content.Intent;
+
+/**
+ * CommonLayout MainAbility
+ */
+public class MainAbility extends Ability {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setMainRoute(MainAbilitySlice.class.getName());
+    }
+}
--- a/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/slice/DependentLayoutAbilitySlice.java
+++ b/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/slice/DependentLayoutAbilitySlice.java
@ -0,0 +1,32 @@
+/*
+ * 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.commonlayout.slice;
+
+import ohos.samples.commonlayout.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+
+/**
+ * DependentLayoutAbilitySlice
+ */
+public class DependentLayoutAbilitySlice extends AbilitySlice {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_dependentlayout_ability_slice);
+    }
+}
--- a/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/slice/DirectionalLayoutAbilitySlice.java
+++ b/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/slice/DirectionalLayoutAbilitySlice.java
@ -0,0 +1,32 @@
+/*
+ * 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.commonlayout.slice;
+
+import ohos.samples.commonlayout.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+
+/**
+ * MainAbility
+ */
+public class DirectionalLayoutAbilitySlice extends AbilitySlice {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_directionalLayout_ability_slice);
+    }
+}
--- a/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/slice/MainAbilitySlice.java
+++ b/UI/CommonLayout/entry/src/main/java/ohos/samples/commonlayout/slice/MainAbilitySlice.java
@ -0,0 +1,43 @@
+/*
+ * 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.commonlayout.slice;
+
+import ohos.samples.commonlayout.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Component;
+
+/**
+ * MainAbilitySlice
+ */
+public class MainAbilitySlice extends AbilitySlice {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_main_ability_slice);
+        initComponents();
+    }
+
+    private void initComponents() {
+        Component showDirectionalLayoutButton = findComponentById(ResourceTable.Id_directional_layout_button);
+        Component showDependentLayoutButton = findComponentById(ResourceTable.Id_dependent_layout_button);
+        showDirectionalLayoutButton.setClickedListener(
+            component -> present(new DirectionalLayoutAbilitySlice(), new Intent()));
+        showDependentLayoutButton.setClickedListener(
+            component -> present(new DependentLayoutAbilitySlice(), new Intent()));
+    }
+}
--- a/UI/CommonLayout/entry/src/main/resources/base/element/string.json
+++ b/UI/CommonLayout/entry/src/main/resources/base/element/string.json
@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "CommonLayout"
+    },
+    {
+      "name": "mainability_description",
+      "value": "hap sample empty page"
+    }
+  ]
+}
--- a/UI/CommonLayout/entry/src/main/resources/base/graphic/color_gray_element.xml
+++ b/UI/CommonLayout/entry/src/main/resources/base/graphic/color_gray_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <solid
+        ohos:color="#ff888888"/>
+</shape>
--- a/UI/CommonLayout/entry/src/main/resources/base/graphic/color_light_gray_element.xml
+++ b/UI/CommonLayout/entry/src/main/resources/base/graphic/color_light_gray_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <solid
+        ohos:color="#ffbbbbbb"/>
+</shape>
--- a/UI/CommonLayout/entry/src/main/resources/base/layout/dependentlayout_ability_slice.xml
+++ b/UI/CommonLayout/entry/src/main/resources/base/layout/dependentlayout_ability_slice.xml
@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DependentLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_content"
+    ohos:width="match_parent"
+    ohos:background_element="$graphic:color_light_gray_element">
+
+    <Text
+        ohos:id="$+id:title_text"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:color_gray_element"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="Title"
+        ohos:text_alignment="horizontal_center"
+        ohos:text_size="25fp"
+        ohos:text_weight="1000"
+        ohos:top_margin="15vp"/>
+
+    <Text
+        ohos:id="$+id:catalog_text"
+        ohos:height="120vp"
+        ohos:width="match_content"
+        ohos:align_parent_left="true"
+        ohos:background_element="$graphic:color_gray_element"
+        ohos:below="$id:title_text"
+        ohos:bottom_margin="15vp"
+        ohos:left_margin="15vp"
+        ohos:multiple_lines="true"
+        ohos:right_margin="15vp"
+        ohos:text="Catalog"
+        ohos:text_alignment="center"
+        ohos:text_font="serif"
+        ohos:text_size="10vp"
+        ohos:top_margin="15vp"/>
+
+    <Text
+        ohos:id="$+id:content_text"
+        ohos:height="120vp"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:color_gray_element"
+        ohos:below="$id:title_text"
+        ohos:bottom_margin="15vp"
+        ohos:end_of="$id:catalog_text"
+        ohos:right_margin="15vp"
+        ohos:text="Content"
+        ohos:text_alignment="center"
+        ohos:text_font="serif"
+        ohos:text_size="25fp"
+        ohos:top_margin="15vp"/>
+
+    <Button
+        ohos:id="$+id:previous_button"
+        ohos:height="match_content"
+        ohos:width="70vp"
+        ohos:background_element="$graphic:color_gray_element"
+        ohos:below="$id:content_text"
+        ohos:bottom_margin="15vp"
+        ohos:italic="false"
+        ohos:left_of="$id:next_button"
+        ohos:right_margin="15vp"
+        ohos:text="Previous"
+        ohos:text_font="serif"
+        ohos:text_size="15fp"
+        ohos:text_weight="5"/>
+
+    <Button
+        ohos:id="$+id:next_button"
+        ohos:height="match_content"
+        ohos:width="70vp"
+        ohos:align_parent_right="true"
+        ohos:background_element="$graphic:color_gray_element"
+        ohos:below="$id:content_text"
+        ohos:bottom_margin="15vp"
+        ohos:italic="false"
+        ohos:right_margin="15vp"
+        ohos:text="Next"
+        ohos:text_font="serif"
+        ohos:text_size="15fp"
+        ohos:text_weight="5"/>
+</DependentLayout>
--- a/UI/CommonLayout/entry/src/main/resources/base/layout/directionalLayout_ability_slice.xml
+++ b/UI/CommonLayout/entry/src/main/resources/base/layout/directionalLayout_ability_slice.xml
@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent">
+
+    <Text
+        ohos:id="$+id:vertical_text"
+        ohos:height="25vp"
+        ohos:width="match_parent"
+        ohos:background_element="#0d000000"
+        ohos:bottom_margin="10vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="vertical"
+        ohos:text_size="16fp"
+        ohos:top_margin="10vp"/>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:orientation="vertical">
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:bottom_margin="3vp"
+            ohos:left_margin="15vp"
+            ohos:text="Button 1"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:bottom_margin="3vp"
+            ohos:left_margin="15vp"
+            ohos:text="Button 2"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:bottom_margin="3vp"
+            ohos:left_margin="15vp"
+            ohos:text="Button 3"
+            ohos:text_size="16fp"/>
+    </DirectionalLayout>
+
+    <Text
+        ohos:id="$+id:horizontal_text"
+        ohos:height="25vp"
+        ohos:width="match_parent"
+        ohos:background_element="#0d000000"
+        ohos:bottom_margin="10vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="horizontal"
+        ohos:text_size="16fp"
+        ohos:top_margin="20vp"/>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:orientation="horizontal">
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:left_margin="15vp"
+            ohos:text="Button 1"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:left_margin="15vp"
+            ohos:text="Button 2"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:left_margin="15vp"
+            ohos:text="Button 3"
+            ohos:text_size="16fp"/>
+    </DirectionalLayout>
+
+    <Text
+        ohos:id="$+id:alignment_text"
+        ohos:height="25vp"
+        ohos:width="match_parent"
+        ohos:background_element="#0d000000"
+        ohos:bottom_margin="10vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="alignment"
+        ohos:text_size="16fp"
+        ohos:top_margin="20vp"/>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp">
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:layout_alignment="left"
+            ohos:text="Button 1"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:layout_alignment="horizontal_center"
+            ohos:text="Button 2"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="100vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:layout_alignment="right"
+            ohos:text="Button 3"
+            ohos:text_size="16fp"/>
+    </DirectionalLayout>
+
+    <Text
+        ohos:id="$+id:weight_text"
+        ohos:height="25vp"
+        ohos:width="match_parent"
+        ohos:background_element="#0d000000"
+        ohos:bottom_margin="10vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="weight"
+        ohos:text_size="16fp"
+        ohos:top_margin="20vp"/>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:left_margin="15vp"
+        ohos:orientation="horizontal"
+        ohos:right_margin="15vp">
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="50vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:text="Button 1"
+            ohos:weight="1"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="50vp"
+            ohos:background_element="$graphic:color_gray_element"
+            ohos:text="Button 2"
+            ohos:weight="2"
+            ohos:text_size="16fp"/>
+
+        <Button
+            ohos:height="30vp"
+            ohos:width="50vp"
+            ohos:background_element="$graphic:color_light_gray_element"
+            ohos:text="Button 3"
+            ohos:weight="3"
+            ohos:text_size="16fp"/>
+    </DirectionalLayout>
+</DirectionalLayout>
--- a/UI/CommonLayout/entry/src/main/resources/base/layout/main_ability_slice.xml
+++ b/UI/CommonLayout/entry/src/main/resources/base/layout/main_ability_slice.xml
@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:orientation="vertical">
+
+    <Button
+        ohos:id="$+id:directional_layout_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="DirectionalLayout"
+        ohos:text_alignment="left"
+        ohos:text_size="16vp"/>
+
+    <Button
+        ohos:id="$+id:dependent_layout_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="DependentLayout"
+        ohos:text_alignment="left"
+        ohos:text_size="16vp"/>
+</DirectionalLayout>
--- a/UI/CommonLayout/entry/src/main/resources/base/media/ic_arrow_right.png
+++ b/UI/CommonLayout/entry/src/main/resources/base/media/ic_arrow_right.png
--- a/UI/CommonLayout/entry/src/main/resources/base/media/icon.png
+++ b/UI/CommonLayout/entry/src/main/resources/base/media/icon.png
--- a/UI/CommonLayout/screenshots/device/dependent_layout.png
+++ b/UI/CommonLayout/screenshots/device/dependent_layout.png
--- a/UI/CommonLayout/screenshots/device/directional_layout.png
+++ b/UI/CommonLayout/screenshots/device/directional_layout.png
--- a/UI/CommonLayout/screenshots/device/main.png
+++ b/UI/CommonLayout/screenshots/device/main.png
--- a/UI/CommonLayout/settings.gradle
+++ b/UI/CommonLayout/settings.gradle
@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+include ':entry'
--- a/UI/Components/README_zh.md
+++ b/UI/Components/README_zh.md
@ -0,0 +1,5 @@
+# Components<a name="ZH-CN_TOPIC_0000001080439928"></a>
+
+-   本示例中文本 Text 是用来显示字符串的组件，在界面上显示为一块文本区域。
+
+    按钮 Button 是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。
--- a/UI/Components/build.gradle
+++ b/UI/Components/build.gradle
@ -0,0 +1,37 @@
+// 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()
+    }
+}
+
--- a/UI/Components/entry/build.gradle
+++ b/UI/Components/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'])
+}
--- a/UI/Components/entry/src/main/config.json
+++ b/UI/Components/entry/src/main/config.json
@ -0,0 +1,54 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.components",
+    "version": {
+      "code": 2000000,
+      "name": "2.0"
+    },
+    "apiVersion": {
+      "compatible": 4,
+      "target": 5,
+      "releaseType": "Release"
+    },
+    "type": "normal"
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.components",
+    "name": ".Components",
+    "reqCapabilities": [
+      "video_support"
+    ],
+    "deviceType": [
+      "default"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry"
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "formsEnabled": false,
+        "name": "ohos.samples.components.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ]
+  }
+}
--- a/UI/Components/entry/src/main/java/ohos/samples/components/MainAbility.java
+++ b/UI/Components/entry/src/main/java/ohos/samples/components/MainAbility.java
@ -0,0 +1,32 @@
+/*
+ * 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.components;
+
+import ohos.samples.components.slice.MainAbilitySlice;
+
+import ohos.aafwk.ability.Ability;
+import ohos.aafwk.content.Intent;
+
+/**
+ * MainAbility
+ */
+public class MainAbility extends Ability {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setMainRoute(MainAbilitySlice.class.getName());
+    }
+}
--- a/UI/Components/entry/src/main/java/ohos/samples/components/slice/ButtonAbilitySlice.java
+++ b/UI/Components/entry/src/main/java/ohos/samples/components/slice/ButtonAbilitySlice.java
@ -0,0 +1,35 @@
+/*
+ * 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.components.slice;
+
+import ohos.samples.components.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Component;
+
+/**
+ * ButtonAbilitySlice
+ */
+public class ButtonAbilitySlice extends AbilitySlice {
+    @Override
+    protected void onStart(Intent intent) {
+        super.onStart(intent);
+        setUIContent(ResourceTable.Layout_button_main_ability);
+        Component button = findComponentById(ResourceTable.Id_start_btn_example);
+        button.setClickedListener(component -> present(new ButtonExampleSlice(), new Intent()));
+    }
+}
--- a/UI/Components/entry/src/main/java/ohos/samples/components/slice/ButtonExampleSlice.java
+++ b/UI/Components/entry/src/main/java/ohos/samples/components/slice/ButtonExampleSlice.java
@ -0,0 +1,32 @@
+/*
+ * 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.components.slice;
+
+import ohos.samples.components.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+
+/**
+ * ButtonExampleSlice
+ */
+public class ButtonExampleSlice extends AbilitySlice {
+    @Override
+    protected void onStart(Intent intent) {
+        super.onStart(intent);
+        setUIContent(ResourceTable.Layout_button_example_slice);
+    }
+}
--- a/UI/Components/entry/src/main/java/ohos/samples/components/slice/MainAbilitySlice.java
+++ b/UI/Components/entry/src/main/java/ohos/samples/components/slice/MainAbilitySlice.java
@ -0,0 +1,51 @@
+/*
+ * 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.components.slice;
+
+import ohos.samples.components.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Component;
+
+/**
+ * MainAbilitySlice
+ */
+public class MainAbilitySlice extends AbilitySlice {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+        super.setUIContent(ResourceTable.Layout_main_ability_slice);
+        initComponents();
+    }
+
+    private void initComponents() {
+        Component startShowText = findComponentById(ResourceTable.Id_start_text);
+        Component startShowButton = findComponentById(ResourceTable.Id_start_button);
+        startShowText.setClickedListener(component -> startText());
+        startShowButton.setClickedListener(component -> startButton());
+    }
+
+    private void startText() {
+        Intent intent = new Intent();
+        this.present(new TextAbilitySlice(), intent);
+    }
+
+    private void startButton() {
+        Intent intent = new Intent();
+        this.present(new ButtonAbilitySlice(), intent);
+    }
+}
--- a/UI/Components/entry/src/main/java/ohos/samples/components/slice/TextAbilitySlice.java
+++ b/UI/Components/entry/src/main/java/ohos/samples/components/slice/TextAbilitySlice.java
@ -0,0 +1,52 @@
+/*
+ * 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.components.slice;
+
+import ohos.samples.components.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+import ohos.agp.components.Component;
+import ohos.agp.components.Text;
+
+/**
+ * TextAbilitySlice
+ */
+public class TextAbilitySlice extends AbilitySlice {
+    @Override
+    protected void onStart(Intent intent) {
+        super.onStart(intent);
+        setUIContent(ResourceTable.Layout_text_main_ability);
+        initComponents();
+    }
+
+    private void initComponents() {
+        Text startAutomaticText = (Text) findComponentById(ResourceTable.Id_text_automated);
+        startAutomaticText.setText(startAutomaticText.getText() + "T");
+        Text startLanternText = (Text) findComponentById(ResourceTable.Id_text_lantern);
+        startLanternText.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
+        startLanternText.startAutoScrolling();
+        Component startExampleText = findComponentById(ResourceTable.Id_start_txt_example);
+        startExampleText.setClickedListener(component -> startExample());
+    }
+
+    private void startExample() {
+        Intent intent = new Intent();
+        this.present(new TextExampleSlice(), intent);
+    }
+
+}
+
--- a/UI/Components/entry/src/main/java/ohos/samples/components/slice/TextExampleSlice.java
+++ b/UI/Components/entry/src/main/java/ohos/samples/components/slice/TextExampleSlice.java
@ -0,0 +1,32 @@
+/*
+ * 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.components.slice;
+
+import ohos.samples.components.ResourceTable;
+
+import ohos.aafwk.ability.AbilitySlice;
+import ohos.aafwk.content.Intent;
+
+/**
+ * TextExampleSlice
+ */
+public class TextExampleSlice extends AbilitySlice {
+    @Override
+    protected void onStart(Intent intent) {
+        super.onStart(intent);
+        setUIContent(ResourceTable.Layout_text_example_slice);
+    }
+}
--- a/UI/Components/entry/src/main/resources/base/element/string.json
+++ b/UI/Components/entry/src/main/resources/base/element/string.json
@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "Components"
+    },
+    {
+      "name": "mainability_description",
+      "value": "hap sample empty page"
+    }
+  ]
+}
--- a/UI/Components/entry/src/main/resources/base/graphic/capsule_button_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/capsule_button_element.xml
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <corners
+        ohos:radius="100"/>
+    <solid
+        ohos:color="#ff007dff"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/circle_button_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/circle_button_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="oval">
+    <solid
+        ohos:color="#ff007dff"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/color_blue_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/color_blue_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <solid
+        ohos:color="#ff007dff"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/color_gray_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/color_gray_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <solid
+        ohos:color="#ff888888"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/color_light_gray_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/color_light_gray_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <solid
+        ohos:color="#ffeeeeee"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/green_capsule_button_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/green_capsule_button_element.xml
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <corners
+        ohos:radius="100"/>
+    <solid
+        ohos:color="#ff008b00"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/green_circle_button_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/green_circle_button_element.xml
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="oval">
+    <stroke
+        ohos:width="5"
+        ohos:color="#ff008b00"/>
+    <solid
+        ohos:color="#ffeeeeee"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/green_text_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/green_text_element.xml
@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <corners
+        ohos:radius="20"/>
+    <stroke
+        ohos:width="2"
+        ohos:color="#ff008b00"/>
+    <solid
+        ohos:color="#ffeeeeee"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/oval_button_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/oval_button_element.xml
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="oval">
+    <solid
+        ohos:color="#ff007dff"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/graphic/text_element.xml
+++ b/UI/Components/entry/src/main/resources/base/graphic/text_element.xml
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<shape xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+       ohos:shape="rectangle">
+    <corners
+        ohos:radius="20"/>
+    <solid
+        ohos:color="#ff888888"/>
+</shape>
--- a/UI/Components/entry/src/main/resources/base/layout/button_example_slice.xml
+++ b/UI/Components/entry/src/main/resources/base/layout/button_example_slice.xml
@ -0,0 +1,197 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:background_element="$graphic:color_light_gray_element"
+    ohos:orientation="vertical">
+
+    <Text
+        ohos:id="$+id:txt_num"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:green_text_element"
+        ohos:layout_alignment="horizontal_center"
+        ohos:text="0123456789"
+        ohos:text_alignment="center"
+        ohos:text_size="20fp"/>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:alignment="horizontal_center"
+        ohos:bottom_margin="5vp"
+        ohos:orientation="horizontal"
+        ohos:top_margin="5vp">
+
+        <Button
+            ohos:id="$+id:btn_one"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="1"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_two"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:left_margin="5vp"
+            ohos:right_margin="5vp"
+            ohos:text="2"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_three"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="3"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+    </DirectionalLayout>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:alignment="horizontal_center"
+        ohos:bottom_margin="5vp"
+        ohos:orientation="horizontal">
+
+        <Button
+            ohos:id="$+id:btn_four"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="4"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_five"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:left_margin="5vp"
+            ohos:right_margin="5vp"
+            ohos:text="5"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_six"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="6"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+    </DirectionalLayout>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:alignment="horizontal_center"
+        ohos:bottom_margin="5vp"
+        ohos:orientation="horizontal">
+
+        <Button
+            ohos:id="$+id:btn_seven"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="7"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_eight"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:left_margin="5vp"
+            ohos:right_margin="5vp"
+            ohos:text="8"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_nine"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="9"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+    </DirectionalLayout>
+
+    <DirectionalLayout
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:alignment="horizontal_center"
+        ohos:bottom_margin="5vp"
+        ohos:orientation="horizontal">
+
+        <Button
+            ohos:id="$+id:btn_star"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="*"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn0"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:left_margin="5vp"
+            ohos:right_margin="5vp"
+            ohos:text="0"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+
+        <Button
+            ohos:id="$+id:btn_pound"
+            ohos:height="40vp"
+            ohos:width="40vp"
+            ohos:background_element="$graphic:green_circle_button_element"
+            ohos:text="#"
+            ohos:text_alignment="center"
+            ohos:text_size="15fp"/>
+    </DirectionalLayout>
+
+    <Button
+        ohos:id="$+id:btn_call"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:green_capsule_button_element"
+        ohos:bottom_margin="5vp"
+        ohos:bottom_padding="2vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_padding="10vp"
+        ohos:right_padding="10vp"
+        ohos:text="CALL"
+        ohos:text_alignment="center"
+        ohos:text_size="15fp"
+        ohos:top_padding="2vp"/>
+</DirectionalLayout>
--- a/UI/Components/entry/src/main/resources/base/layout/button_main_ability.xml
+++ b/UI/Components/entry/src/main/resources/base/layout/button_main_ability.xml
@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:alignment="horizontal_center"
+    ohos:orientation="vertical">
+
+    <Button
+        ohos:id="$+id:btn_base"
+        ohos:height="50vp"
+        ohos:width="150vp"
+        ohos:background_element="$graphic:color_blue_element"
+        ohos:bottom_margin="15vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:left_padding="8vp"
+        ohos:right_padding="8vp"
+        ohos:text="button"
+        ohos:text_size="18fp"
+        ohos:top_margin="10vp"/>
+
+    <Button
+        ohos:id="$+id:btn_oval"
+        ohos:height="50vp"
+        ohos:width="150vp"
+        ohos:background_element="$graphic:oval_button_element"
+        ohos:bottom_margin="15vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:left_padding="8vp"
+        ohos:right_padding="8vp"
+        ohos:text="button"
+        ohos:text_size="18fp"/>
+
+    <Button
+        ohos:id="$+id:btn_capsule"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:capsule_button_element"
+        ohos:bottom_margin="15vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:left_padding="15vp"
+        ohos:right_padding="15vp"
+        ohos:text="button"
+        ohos:text_size="18fp"/>
+
+    <Button
+        ohos:id="$+id:btn_circle"
+        ohos:height="50vp"
+        ohos:width="50vp"
+        ohos:background_element="$graphic:circle_button_element"
+        ohos:bottom_margin="15vp"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_margin="15vp"
+        ohos:left_padding="15vp"
+        ohos:right_padding="15vp"
+        ohos:text="+"
+        ohos:text_size="18fp"/>
+
+    <Button
+        ohos:id="$+id:start_btn_example"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:layout_alignment="horizontal_center"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Button Example Ability"
+        ohos:text_alignment="left"
+        ohos:text_size="18fp"/>
+</DirectionalLayout>
--- a/UI/Components/entry/src/main/resources/base/layout/main_ability_slice.xml
+++ b/UI/Components/entry/src/main/resources/base/layout/main_ability_slice.xml
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:alignment="horizontal_center"
+    ohos:orientation="vertical"
+    ohos:padding="5vp">
+
+    <Button
+        ohos:id="$+id:start_text"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Start Text"
+        ohos:text_alignment="left"
+        ohos:text_size="18fp"
+        ohos:top_margin="10vp"/>
+
+    <Button
+        ohos:id="$+id:start_button"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Start Button"
+        ohos:text_alignment="left"
+        ohos:text_size="18fp"
+        ohos:top_margin="10vp"/>
+</DirectionalLayout>
--- a/UI/Components/entry/src/main/resources/base/layout/text_example_slice.xml
+++ b/UI/Components/entry/src/main/resources/base/layout/text_example_slice.xml
@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DependentLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_content"
+    ohos:width="match_parent"
+    ohos:background_element="$graphic:color_light_gray_element">
+
+    <Text
+        ohos:id="$+id:text_title"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:text_element"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="Title"
+        ohos:text_alignment="horizontal_center"
+        ohos:text_size="18fp"
+        ohos:text_weight="1000"
+        ohos:top_margin="15vp"/>
+
+    <Text
+        ohos:id="$+id:text_content"
+        ohos:height="120vp"
+        ohos:width="match_parent"
+        ohos:background_element="$graphic:text_element"
+        ohos:below="$id:text_title"
+        ohos:bottom_margin="15vp"
+        ohos:left_margin="15vp"
+        ohos:right_margin="15vp"
+        ohos:text="Content"
+        ohos:text_alignment="center"
+        ohos:text_font="serif"
+        ohos:text_size="18fp"
+        ohos:top_margin="15vp"/>
+
+    <Button
+        ohos:id="$+id:btn_previous"
+        ohos:height="match_content"
+        ohos:width="90vp"
+        ohos:background_element="$graphic:text_element"
+        ohos:below="$id:text_content"
+        ohos:bottom_margin="15vp"
+        ohos:left_of="$id:btn_next"
+        ohos:left_padding="5vp"
+        ohos:right_margin="25vp"
+        ohos:right_padding="5vp"
+        ohos:text="Previous"
+        ohos:text_font="serif"
+        ohos:text_size="18fp"/>
+
+    <Button
+        ohos:id="$+id:btn_next"
+        ohos:height="match_content"
+        ohos:width="90vp"
+        ohos:align_parent_end="true"
+        ohos:background_element="$graphic:text_element"
+        ohos:below="$id:text_content"
+        ohos:bottom_margin="15vp"
+        ohos:left_padding="5vp"
+        ohos:right_margin="15vp"
+        ohos:right_padding="5vp"
+        ohos:text="Next"
+        ohos:text_font="serif"
+        ohos:text_size="18fp"/>
+</DependentLayout>
--- a/UI/Components/entry/src/main/resources/base/layout/text_main_ability.xml
+++ b/UI/Components/entry/src/main/resources/base/layout/text_main_ability.xml
@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+
+<DirectionalLayout
+    xmlns:ohos="http://schemas.openharmony.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:width="match_parent"
+    ohos:alignment="horizontal_center"
+    ohos:orientation="vertical">
+
+    <Text
+        ohos:id="$+id:text"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:color_gray_element"
+        ohos:text="Text"
+        ohos:text_alignment="center"
+        ohos:text_size="28fp"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:text_element"
+        ohos:text="Text"
+        ohos:text_alignment="center"
+        ohos:text_size="28fp"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:text_element"
+        ohos:bottom_margin="15vp"
+        ohos:left_margin="15vp"
+        ohos:left_padding="15vp"
+        ohos:right_padding="15vp"
+        ohos:text="Text"
+        ohos:text_alignment="center"
+        ohos:text_color="blue"
+        ohos:text_size="28fp"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text"
+        ohos:height="match_content"
+        ohos:width="match_content"
+        ohos:background_element="$graphic:text_element"
+        ohos:bottom_margin="15vp"
+        ohos:italic="true"
+        ohos:left_margin="15vp"
+        ohos:left_padding="15vp"
+        ohos:right_padding="15vp"
+        ohos:text="Text"
+        ohos:text_alignment="center"
+        ohos:text_color="blue"
+        ohos:text_font="serif"
+        ohos:text_size="28fp"
+        ohos:text_weight="700"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text"
+        ohos:height="100vp"
+        ohos:width="300vp"
+        ohos:background_element="$graphic:text_element"
+        ohos:bottom_margin="15vp"
+        ohos:italic="true"
+        ohos:left_margin="15vp"
+        ohos:left_padding="15vp"
+        ohos:right_padding="15vp"
+        ohos:text="Text"
+        ohos:text_alignment="horizontal_center|bottom"
+        ohos:text_color="blue"
+        ohos:text_font="serif"
+        ohos:text_size="28fp"
+        ohos:text_weight="700"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text"
+        ohos:height="match_content"
+        ohos:width="75vp"
+        ohos:background_element="$graphic:text_element"
+        ohos:italic="true"
+        ohos:max_text_lines="2"
+        ohos:multiple_lines="true"
+        ohos:text="TextText"
+        ohos:text_alignment="center"
+        ohos:text_color="blue"
+        ohos:text_font="serif"
+        ohos:text_size="28fp"
+        ohos:text_weight="700"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text_automated"
+        ohos:height="match_content"
+        ohos:width="90vp"
+        ohos:auto_font_size="true"
+        ohos:background_element="$graphic:text_element"
+        ohos:italic="true"
+        ohos:left_padding="8vp"
+        ohos:max_text_lines="1"
+        ohos:min_height="30vp"
+        ohos:multiple_lines="true"
+        ohos:right_padding="8vp"
+        ohos:text="T"
+        ohos:text_alignment="center"
+        ohos:text_color="blue"
+        ohos:text_font="serif"
+        ohos:text_weight="700"
+        ohos:top_margin="10vp"/>
+
+    <Text
+        ohos:id="$+id:text_lantern"
+        ohos:height="match_content"
+        ohos:width="75vp"
+        ohos:background_element="$graphic:text_element"
+        ohos:italic="true"
+        ohos:text="TextText"
+        ohos:text_alignment="center"
+        ohos:text_color="blue"
+        ohos:text_font="serif"
+        ohos:text_size="28fp"
+        ohos:text_weight="700"
+        ohos:top_margin="10vp"/>
+
+    <Button
+        ohos:id="$+id:start_txt_example"
+        ohos:height="match_content"
+        ohos:width="match_parent"
+        ohos:element_right="$media:ic_arrow_right"
+        ohos:left_padding="24vp"
+        ohos:padding="10vp"
+        ohos:text="Text Example Ability"
+        ohos:text_alignment="left"
+        ohos:text_size="18fp"/>
+</DirectionalLayout>
--- a/UI/Components/entry/src/main/resources/base/media/ic_arrow_right.png
+++ b/UI/Components/entry/src/main/resources/base/media/ic_arrow_right.png
--- a/UI/Components/entry/src/main/resources/base/media/icon.png
+++ b/UI/Components/entry/src/main/resources/base/media/icon.png
--- a/UI/Components/screenshots/device/button.png
+++ b/UI/Components/screenshots/device/button.png
--- a/UI/Components/screenshots/device/buttonexample.png
+++ b/UI/Components/screenshots/device/buttonexample.png
--- a/UI/Components/screenshots/device/components.png
+++ b/UI/Components/screenshots/device/components.png
--- a/UI/Components/screenshots/device/text.png
+++ b/UI/Components/screenshots/device/text.png
--- a/UI/Components/screenshots/device/textexample.png
+++ b/UI/Components/screenshots/device/textexample.png
--- a/UI/Components/settings.gradle
+++ b/UI/Components/settings.gradle
@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+include 'entry'
--- a/UI/Dialog/README_zh.md
+++ b/UI/Dialog/README_zh.md
@ -0,0 +1,3 @@
+# 对话框<a name="ZH-CN_TOPIC_0000001080439946"></a>
+
+-   UI 提供了多种类型的 Dialog 组件，本示例主要演示了 CommonDialog ,ListDialog 以及自定义对话框的基本使用。
--- a/Show More
+++ b/Show More