Can I show a sample view when the layout is normally empty & only populated programmatically?

Question

I have a linear layout that I normally add ImageViews to programmatically, but I'd like to render better previews inside Android Studio when looking at layouts.

I can't use tools:src as mentioned here because I don't have any ImageView at all in the XML until runtime.

As a really naive approach, this works visually in Android Studio:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <include tools:layout="@layout/some_sample_layout"/>
</LinearLayout>

If @layout/some_sample_layout is then another LinearLayout:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        tools:src="@tools:sample/backgrounds/scenic" />
</LinearLayout>

But while it displays OK in Android Studio, it fails to compile:

Execution failed for task ':app:mergeDebugResources'.
> main_layout.xml: Error: ERROR: [44 68 44 68 25] must include a layout file:///main_layout.xml

Ideally I think that I'm looking for:

• some way to add an ImageView directly to the main LinearLayout but mark the whole view as "ignore unless tools" or
• to be able to "swap" in the body of the LinearLayout somehow.

Is this possible with tools at the moment?

Answer 1

I think the cleanest and most universal approach for displaying dynamically inflated views in AS designer would be to use <include /> tag, quite similar as in your example.

Our <include /> tag must have layout property, to make the app buildable. We can omit it by attaching dummy layout with <merge /> root. Because it has no children, no views will be inflated.

Universal lt_merge_empty.xml:

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="0dp"
    android:layout_height="0dp">

    <!--
        Empty merge tag, so we can use <include/> to show dynamically inflated layouts in designer windows
        For example:

        <include
                tools:layout="@layout/your_inflated_layout"
                layout="@layout/lt_merge_empty"
                />
    -->

</merge>

Then use it in your layout:

<include
        tools:layout="@layout/your_inflated_layout"
        layout="@layout/lt_merge_empty"
        />

Please note: for some reason, tools:layout must be placed above layout property, otherwise it won't be rendered.

Edit: This approach is more universal than @Sina's one bacause usually you will want to display the exact layout that you are dynamically inflating, so obviously you can't change its android:visibility to gone.

Answer 2

You must include a layout so include it but set its visibility to gone or set ImageView sizes to zero while having what you like with tools attributes. Here I've done both.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <include layout="@layout/some_sample_layout"/>
</LinearLayout>


<LinearLayout
    android:visibility="gone"
    tools:visibility="visible"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        tools:layout_width="100dp"
        tools:layout_height="100dp"
        tools:scaleType="centerCrop"
        tools:src="@tools:sample/backgrounds/scenic" />
</LinearLayout>