Try the Compose way  
Jetpack Compose is the recommended UI toolkit for Android. Learn how to work with layouts in Compose.  
[Slot-based layouts →](https://developer.android.com/develop/ui/compose/layouts/basics#slot-based-layouts)  
![](https://developer.android.com/static/images/android-compose-ui-logo.png)

Although Android offers a variety of widgets to provide small, reusable, interactive elements, you might also need to reuse larger components that require a special layout. To efficiently reuse complete layouts, use the`<include>`and`<merge>`tags to embed one layout inside another.

This lets you create complex layouts---such as a yes or no button panel or a custom progress bar with description text. And it means that you can extract any elements of your application that are common across multiple layouts, manage them separately, and include them in each layout. While you can create individual UI components by writing a custom[View](https://developer.android.com/reference/android/view/View), you can do it more easily by reusing a layout file.

## Create a reusable layout

Start by creating a new XML file and defining the layout you want to be able to reuse. For example, here's a layout that defines a title bar to include in each activity (`titlebar.xml`):  

```xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>
```

The root`View`must be exactly how you want it to appear in each layout where you plan to add this layout.
| **Note:** The[`tools:showIn`](https://developer.android.com/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.

## Use the \<include\> tag

Inside the layout where you want to add the reusable component, add the`<include>`tag. For example, here's a layout that includes the title bar from the preceding example:  

```xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>
```

You can also override all the layout parameters---any`android:layout_*`attributes---of the included layout's root view by specifying them in the`<include>`tag. This is shown in the following example:  

```xml
<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>
```

However, if you want to override layout attributes using the`<include>`tag, also override`android:layout_height`and`android:layout_width`to make the other layout attributes take effect.

## Use the \<merge\> tag

The`<merge>`tag helps eliminate redundant view groups in your view hierarchy when including one layout within another. One use case of`<merge>`is when you implement a custom view by extending a`ViewGroup`.

For example, if your main layout is a vertical[LinearLayout](https://developer.android.com/reference/android/widget/LinearLayout)in which two consecutive views can be reused in multiple layouts, then the reusable layout where you place the two views requires its own root view. However, using another`LinearLayout`as the root for the reusable layout results in a vertical`LinearLayout`inside a vertical`LinearLayout`. The nested`LinearLayout`serves no real purpose and slows down your UI performance.

Instead, you can extend a`LinearLayout`to create a custom view and use a layout XML to describe its child views. The top tag in the XML is`<merge>`, rather than`LinearLayout`, as shown in the following example:  

```xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>
```

When you include this layout in another layout---using the`<include>`tag---the system ignores the`<merge>`element and places the two buttons directly in the layout, in place of the`<include>`tag.

For more information about`<include>`, see[Layout resource](https://developer.android.com/guide/topics/resources/layout-resource#include-element).