Android studio preview is not fixed and solutions to common problems

Android Studio provides a powerful "Preview" tool to help you preview how your layout file will be rendered on the user's device. XML layout is probably the most commonly used resource in Android development. Each activity in your project has at least one layout file. Android studio's preview tool helps you implement these great designs and iterate over them quickly without even running your application. It also allows you to view different configurations of the layout, such as how it looks in portrait or landscape, or how textview looks in multiple locales, such as English, German, or Greek.

Even if the preview tool is powerful and can make your development day easy, at the same time, it also has some disadvantages that will drive the program ape crazy. This article talks about common problems and tips for preview.

A while ago, I used Android studio. I don't know what button was clicked wrong. The preview view window is not fixed on one side. As long as you click the XML interface, the preview window is hidden, and you can't develop it at all. Looking around, I found that there was no docked mode attribute in the setting.

There is no docked mode attribute

I found a lot of information on the Internet before I solved it. The method is as follows:

operation

Here is a list of the most common problems and solutions about preview (please right-click the picture and zoom in with a new label):

Question 1: preview appears to be empty

Suppose you have a layout whose content will be filled with data obtained from the back end... You soon realize that because the content is dynamic, the preview tool can't fill the screen and you can't see anything. A relatively simple solution to this problem is to test on the real machine. At that time, you have these data, but the meaning of preview is lost.

The problem in this case is that textview and ImageView have nothing to display. This is a common problem when dealing with dynamic content. Even if the code compilation is OK, no one can understand the layout without looking at the XML code.

When creating a layout that uses any back-end data dependent view, it is a good practice to populate it only during preview. Declaring XML attributes by using the tools namespace instead of Android allows you to specify attributes that are used only during preview. For example, we use tools: text = "title" and tools: SRC = "@ drawable / cool_pic", and we're done!

The properties declared using the tools prefix are exactly the same as Android, but only for preview. Using tools: text instead of Android: text ensures that all your content will appear only during preview, and all tools related things will not appear when the program runs.

What happens if you don't have enough aspect ratio pictures (jpg, etc.) that meet all the requirements of ImageView? You can let the design lion provide some resources to test various adaptations, but this may require some additional effort and maintenance; You can also use tools: RCS or tools: layout_ Height and tools: Layout_ Width to test the display effect without modifying the real properties.

Question 2: test the maximum width and height

Or when your layout is designed to display some content from an external source, it is sometimes required to have some maximum width or / and height (that is, the maxheight attribute is used) to ensure that your layout looks beautiful, even if the external source sends images larger than expected or some aspect ratio is not agreed. In this case, you can use tools: layout_ Height and tools: Layout_ Width, and set a fixed color tools: background to preview the space that pictures of various sizes can occupy in ImageView.

Problem 3: fix damaged Preview

As shown in the following figure, errors often occur: when creating a custom view, make sure that your view can be instantiated without using any external dependencies that may not exist during preview. Remember that the preview does not run in the application, but on the JVM in the IDE. This will simulate how it works on Android devices, and you should assume that you cannot access any number of dependencies that are not within the view framework. Using an image loader such as glide will not be possible. For the same reason, any dependency injection framework will not work because it will not initialize in the preview context, causing the view to throw an exception when extended.

In this case, you can use view. Isineditmode(). Use it to check if you are previewing and skip dependencies that are not available during preview:

Question 4: merge layout overlap

The merge tag can help you reduce duplication of layout code.

However, the problem with merge is that all its internal components will be folded together and displayed in the preview at the same time, causing visual confusion. As shown in the following figure, textview is overlaid on ImageView:

You can use the tool: Tools: showin = "layout" to display the contents of layouts within some other existing layouts that use it. Note that if you use different parent layouts in multiple places, only one layout can be selected for preview.

Starting with Android studio 2.2, you can now use the tool: parenttag = "LinearLayout", for example, to lay out the rendering as LinearLayout. The following figure shows the effect after use, and there is no overlap:

Question 5: Show hidden views during preview

Your activity may contain some views that need to be hidden when oncreat, but show them after some events. By setting the visibility: "gone" of these views in the layout, you can ensure that they will never be visible during preview.

The problem is that these views will disappear from the preview, and if some other developers open the layout and look for them in the preview, they will not be able to find it. This is a problem because it requires more energy and time to understand what is happening on the screen.

You can use the tools: visibility = "visible" attribute to display it only in the preview panel.

Q6: item and header / footer preview of listview

Use tools: listitem / tools: listreader / tools: listfolder to add item, header and footer to the preview. For example:

This feature has a bug (invalid) in as2.2 and was fixed in 2.3.

Most of this article is translated from https://www.novoda.com/blog/layout-preview-101/ , a few modifications are made according to the actual situation and question 6 is added.