Preview layout with merge root tag in Intellij IDEA / Android Studio

Question

Suppose we are developing a composite component based on LinearLayout. So, we create the class as follows:

public class SomeView extends LinearLayout { public SomeView(Context context, AttributeSet attrs) { super(context, attrs); setOrientation(LinearLayout.VERTICAL); View.inflate(context, R.layout.somelayout, this); } } 

If we use LinearLayout as the root of somelayout.xml , we will have an extra level of presentation, so we use the merge tag:

 <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Some text" android:textSize="20sp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Some other text"/> </merge> 

But on the Preview tab in the IDE, the merge always acts like a FrameLayout, and we will see something like this:

(This is Android Studio, Intellij IDEA is the same about Eclipse that I don't know)

Previewing speeds up the development of layouts a lot, it’s sad to lose so much help even for some layouts. Maybe there is a way to indicate how Preview should interpret the merge tag in a specific layout?

Answer 1

A new parentTag attribute has been added to the merge attribute ( in Android Studio 2.2 ), which can be used to specify the type of layout that the layout will render in the preview of the layout editor.

So using your example:

 <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:parentTag="LinearLayout" tools:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Some text" android:textSize="20sp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Some other text"/> </merge> 

Note To display the layout in the editor, both android:layout_width and android:layout_height must be specified.

Answer 2

Edit: deprecated answer. See Reply from starkay2.

---

Android Studio 0.5.8 added tool support: showIn. Use it to view <merge> layouts.

http://tools.android.com/recent/androidstudio058released

layout / layout_merge.xml with tools: showIn:

 <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:showIn="@layout/simple_relativelayout"> ...... </merge> 

layout / simple_relativelayout.xml with include:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/layout_merge"/> </RelativeLayout> 

Answer 3

It is also possible to use a custom class as a parent instead of a union, e.g.

 <com.mycompany.SomeView xmlns:android="http://schemas.android.com/apk/res/android"> ... </com.mycompany.SomeView> 

And then immediately inflate this layout and show the result of the SomeView result. Android Studio will directly check the parent class of SomeView and handle the preview, for example LinerLayout . You can use the onFinishInflate() method in SomeView to bind the findViewById() views. The advantage of this solution is that you can put all the layout definitions or the style definition directly into the layout file, you cannot use a method like setOrientation() in the code.