Custom Android Views in Eclipse Visual Editor

Question

In my applications, I often rely on custom build views, such as in the following example.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:background="@color/light_grey"
android:layout_height="match_parent" 
android:layout_width="fill_parent" >

<TextView 
 style="@style/CardTitle" 
 android:id="@+id/card_title"
 android:layout_height="wrap_content" 
 android:layout_width="fill_parent"      
 />  

<com.whiterabbit.cards.ui.AspectRatioImageView
    android:id="@+id/card_picture"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:layout_marginLeft="30dip"
    android:layout_marginRight="30dip"       
    android:src="@drawable/boss"
    />



<ListView 
    android:id="@+id/card_properties" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"

/>

The problem is, I don't know how if it will be displayed correctly until I run it on a real device or on the emulator. Moreover, if I found something wrong I would have to perform changes on it and deploy the app again to see if the changes worked as you expected.

This can be a long and boring process, especially if the application requires some interaction to get to the activity you want to check.

Using the visual editor doesn't work as it cannot load the custom view.

Is there another way to check how views are displayed without running across the whole application?

Answer 1

You can do this in your Custom View:

if(!isInEditMode()){
   // Your custom code that is not letting the Visual Editor draw properly
   // i.e. thread spawning or other things in the constructor
}

http://developer.android.com/reference/android/view/View.html#isInEditMode()

This allows you to hide code from the ADT Plugin XML Viewer and hopefully display you a layout!

View.isInEditMode()

Indicates whether this View is currently in edit mode. A View is usually in edit mode when displayed within a developer tool. For instance, if this View is being drawn by a visual user interface builder, this method should return true. Subclasses should check the return value of this method to provide different behaviors if their normal behavior might interfere with the host environment. For instance: the class spawns a thread in its constructor, the drawing code relies on device-specific features, etc. This method is usually checked in the drawing code of custom widgets.

Answer 2

You could create a skeleton activity that loads just the view you want to see and populate it with enough data to make it display.

Answer 3

I'm using Android Studio so I'm not sure this answer will apply to your case.

I think you could override onDraw method in the custom view, like this exemple keeping the aspect ratio of an inner image:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // TODO: consider storing these as member variables to reduce
    // allocations per draw cycle.
    int paddingLeft = getPaddingLeft();
    int paddingTop = getPaddingTop();
    int paddingRight = getPaddingRight();
    int paddingBottom = getPaddingBottom();

    int w = getWidth() - paddingLeft - paddingRight;
    int h = getHeight() - paddingTop - paddingBottom;

    w = w<h ? w : h;
    h = w;

    // Draw the example drawable on top of the text.
    if (dieDrawable != null) {
        dieDrawable.setBounds(paddingLeft, paddingTop,
        paddingLeft + w, paddingTop + h);
        dieDrawable.draw(canvas);
    }
}

This method runs both in the emulator and the designer.

It runs as well for any event that redraws the view (onSizeChanged, onLayout, etc...)