Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Debug Custom View in ADT's Graphical Layout Editor

How do I debug a Custom View in the Graphical Preview of a Layout XML using the ADT Eclipse plugin?


I wrote a custom view, put it in a layout XML, and I can preview it in the ADT Graphical Layout Editor. I can view my custom view like how the Google guys did in Google I/O 2011: Android Development Tools. However, my custom view behaves wrongly in the preview (no problem on emulators/devices, but I'm not using View.isInEditMode()). I think a variable has a wrong value, but I can't confirm. I've tried:

  • android.util.Log.d()
    • No output in LogCat or Console
  • System.out.println()
    • No output in LogCat or Console
  • Toast.makeText().show()
    • NullPointerException at android.widget.Toast.show
  • Set breakpoint in my custom view
    • Doesn't break in Eclipse
  • throw new IllegalStateException(debugMessage) (?!)
    • debugMessage does not appear in Error Log
  • Set activity title by ((Activity)getContext()).setTitle(debugMessage)
    • No effect
  • Set window title by ((Activity)getContext()).getWindow().setTitle(debugMessage)
    • NullPointerException (window is null)
  • Add TextView dynamically

    final TextView textView = new TextView(getContext());
    textView.setText(debugMessage);
    this.addView(textView);
    
    • debugMessage is displayed but my layout is ruined
    • only works if the custom view is a ViewGroup
like image 694
Pang Avatar asked Jan 05 '13 03:01

Pang


People also ask

What is customized view?

Custom Views is just a way to make an android developer a painter. When you need to create some custom and reuse the views when it is not provided by the Android Ecosystem. Custom Views can be used as widgets like TextView, EditText etc.

What is layout validation?

Layout Validation is a visual tool for simultaneously previewing layouts for different devices and display configurations, helping you catch problems in your layouts earlier in the process.


1 Answers

Good question! I am wondering the same. Having a good preview in layout editor is really really difficult and it seems to be quite little documentation about what you can and you can't do when "isineditmode" is true (for example, analise custom XML attributes in the incoming AttributeSet on the constructor of the views doesn't seem to work, etc, etc.).

I even have problems with finding views by ID in a custom view. A simple thing like

mTextView = (TextView)myLayout.findViewById(R.id.view_id);

after inflating my custom view layout returns null only when running the layout from the editor (i.e. isineditmode() == true). When running the app on a phone it works.

I leave you here what helped me when trying to better preview my layouts in the layout editor:

1- Finding the views: I use the TAG property, as the findViewWithTag() function does work when in edit mode. So I use the Id for the TAG

<TextView
    android:id="@+id/myTextViewId"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ...
    android:tag="mytextViewId" />

and then find the views using the tag:

if(isineditmode()){
    ((TextView)myLayout.findViewWithTag("myTextViewId")).setText("Test text");
}

2- Checking some values to know why sometimes my custom view cannot be instantiated in edit mode, or checking if some proerties can be queried in edit mode and know their value. I use a especial textview in the parent layout in which my custom view will be placed, and I leave it hidden and with a special tag:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > 

    ...

    <com.example.myCustomView ... />

    ...

    <TextView
        android:id="@+id/DebugView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:tag="debug"
        android:textSize="16sp"
        android:textColor="#FFFFFF"
        android:visibility="gone"
     />

</LinearLayout>

This linear layout would be the parent of my custom view, and the one I need to open in the layout editor in order to preview my custom view. The "debug" textview visibilty is "gone" so I won't disturb if no needed. Then, when I need to check something I do the following in the java code of my custom view:

if(isineditmode()){
    TextView wDebugView = (TextView)this.getRootView().findViewWithTag("debug");
    wDebugView.setVisibility(View.VISIBLE);
    wDebugView.setText(Integer.valueOf(getPaddingTop()).toString());
}

In this example I check a property of the view, like the top padding.

Important note: you need to manually convert to String the value to show in the "debug" view, otherwise it will crash and give you an error.

Hope it helps.

And if anyone has some idea of why finding views by id doesn't work, any help would be appreciated.

like image 160
Pek Ifly Avatar answered Sep 22 '22 18:09

Pek Ifly