[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Reuse layouts with <include>\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to work with layouts in Compose. \n[Slot-based layouts →](/develop/ui/compose/layouts/basics#slot-based-layouts) \n\nAlthough Android offers a variety of widgets to provide small, reusable, interactive elements,\nyou might also need to reuse larger components that require a special layout. To efficiently reuse\ncomplete layouts, use the `\u003cinclude\u003e` and `\u003cmerge\u003e` tags to embed\none layout inside another.\n\nThis lets you create complex layouts---such as a yes or no button panel or a custom progress\nbar with description text. And it means that you can extract any elements of your application that\nare common across multiple layouts, manage them separately, and include them in each layout. While\nyou can create individual UI components by writing a custom\n[View](/reference/android/view/View), you can do it more easily by\nreusing a layout file.\n\nCreate a reusable layout\n------------------------\n\nStart by creating a new XML file and defining the layout you want to be able to reuse. For\nexample, here's a layout that defines a title bar to include in each activity\n(`titlebar.xml`): \n\n```xml\n\u003cFrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:tools=\"http://schemas.android.com/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:background=\"@color/titlebar_bg\"\n tools:showIn=\"@layout/activity_main\" \u003e\n\n \u003cImageView android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:src=\"@drawable/gafricalogo\" /\u003e\n\u003c/FrameLayout\u003e\n```\n\nThe root `View` must be exactly how you want it to appear in each\nlayout where you plan to add this layout.\n| **Note:** The [`tools:showIn`](/studio/write/tool-attributes#toolsshowin) attribute in the preceding XML file is a special attribute that is used only at design time in Android Studio and is removed during compilation. It specifies a layout that *includes* this file, so you can preview and edit this file as it appears while embedded in a parent layout.\n\nUse the \\\u003cinclude\\\u003e tag\n-----------------------\n\nInside the layout where you want to add the reusable component, add the\n`\u003cinclude\u003e` tag. For example, here's a layout that includes the title bar from\nthe preceding example: \n\n```xml\n\u003cLinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n android:orientation=\"vertical\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:background=\"@color/app_bg\"\n android:gravity=\"center_horizontal\"\u003e\n\n \u003cinclude layout=\"@layout/titlebar\"/\u003e\n\n \u003cTextView android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:text=\"@string/hello\"\n android:padding=\"10dp\" /\u003e\n ...\n\u003c/LinearLayout\u003e\n```\n\nYou can also override all the layout parameters---any `android:layout_*`\nattributes---of the included layout's root view by specifying them in the\n`\u003cinclude\u003e` tag. This is shown in the following example: \n\n```xml\n\u003cinclude android:id=\"@+id/news_title\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n layout=\"@layout/title\"/\u003e\n```\n\nHowever, if you want to override layout attributes using the `\u003cinclude\u003e` tag,\nalso override `android:layout_height` and `android:layout_width` to make the\nother layout attributes take effect.\n\nUse the \\\u003cmerge\\\u003e tag\n---------------------\n\nThe `\u003cmerge\u003e` tag helps eliminate redundant view groups in your view hierarchy\nwhen including one layout within another. One use case of `\u003cmerge\u003e` is when you\nimplement a custom view by extending a `ViewGroup`.\n\nFor example, if your main layout is a vertical\n[LinearLayout](/reference/android/widget/LinearLayout) in which two\nconsecutive views can be reused in multiple layouts, then the reusable layout where you place the\ntwo views requires its own root view. However, using another `LinearLayout` as the root\nfor the reusable layout results in a vertical `LinearLayout` inside a vertical\n`LinearLayout`. The nested `LinearLayout` serves no real purpose and slows\ndown your UI performance.\n\nInstead, you can extend a `LinearLayout` to create a custom view and use a layout XML\nto describe its child views. The top tag in the XML is `\u003cmerge\u003e`, rather than\n`LinearLayout`, as shown in the following example: \n\n```xml\n\u003cmerge xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n\n \u003cButton\n android:layout_width=\"fill_parent\"\n android:layout_height=\"wrap_content\"\n android:text=\"@string/add\"/\u003e\n\n \u003cButton\n android:layout_width=\"fill_parent\"\n android:layout_height=\"wrap_content\"\n android:text=\"@string/delete\"/\u003e\n\n\u003c/merge\u003e\n```\n\nWhen you include this layout in another layout---using the `\u003cinclude\u003e`\ntag---the system ignores the `\u003cmerge\u003e` element and places the two buttons\ndirectly in the layout, in place of the `\u003cinclude\u003e` tag.\n\nFor more information about `\u003cinclude\u003e`, see\n[Layout resource](/guide/topics/resources/layout-resource#include-element)."]]