Android Studio layout editor cannot render custom views

Question

In Android Studio, the layout editor cannot preview custom views in xml.

Very simple example:

public class MyCustomView extends FrameLayout {
    public MyCustomView(Context context) {
        super(context);
    }

    public MyCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyCustomView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
}

 

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

    <com.myprojectxxx.view.MyCustomView
        android:layout_width="48dp"
        android:layout_height="48dp" />

</LinearLayout>

Android Studio always says,

Rendering Problems

The following classes could not be found:

• com.myprojectxxx.view.MyCustomView (Fix Build Path, Create Class)

Tip: Try to build the project

Of course, I HAVE that class. If I click "Create Class", it complains that the same class already exists. If I rebuild that project, nothing changes.

And, yes, the project works very well on my Android device. Also, it is rendered very well in Eclipse ADT. However, in Android Studio, it always says that "CLASSES COULD NOT BE FOUND."

Android Studio does not have the ability to preview a xml file with custom views? What's wrong with this?

Answer 1

Custom view components are also supported and shown correctly in IDEA, But since IntelliJ IDEA uses class files from your output directory to render such components, you have to do build->make project on your project first.

reference

Answer 2

Facing the same issue, I had to override the three and four argument constructors:

public View(Context context, AttributeSet attrs, int defStyle) public View(Context context, AttributeSet attrs, int defStyle, int defStyleRes)

Then rebuild the project.

Answer 3

As I found out today, at last, the "Classdef not found" etc. errors during layout rendering are actually misleading. What they really mean is that there is some error during execution of your widget.

The simplest way to find out, where exactly the problem lays, is this:

1. In your XML layout file replace you custom view class (let's call it "MyFrameLayout" for clarity) with Android stock class ( e.g. with FrameLayout) and make sure that Layout Editor works. Add "tools:..." attributes to allow you to see content, not an empty layout. E.g. if you have EditText widget in your custom view, add this attribute to it, which will be used in Design mode only:

   tools:text="Sample content"
   

("tools: namespace is added by Android Studio automatically)

2. Return your original class name (e.g. "MyFrameLayout") to the XML layout. Does it work now?

If not:

3. Copy definition of your custom view to a temporary new class (e.g. "MyFrameLayoutBeforeFix"), for convenience. You will use it for comparison with "MyFrameLayout" class, which you will start modifying now.

4. Recreate your "MyFrameLayout" class from scratch, using Android Studio, starting with absolute minimum: it should compile. As a result the Java class will contain "extends "FrameLayout" and required constructors/methods e.g. in this case:

   package com.myprojectxxx.view;
   
   import android.content.Context;
   import android.util.AttributeSet;
   import android.widget.FrameLayout;
   
   public class MyFrameLayout  extends FrameLayout {
       public MyFrameLayout(Context context) {
           super(context);
       }
   
       public MyFrameLayout(Context context, AttributeSet attrs) {
           super(context, attrs);
       }
   
       public MyFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
           super(context, attrs, defStyleAttr);
       }
   }
   

5. Make sure that this custom view renders normally. It should, at least in year 2016!

6. Move code piece by piece from a "MyFrameLayoutBeforeFix" copy to this class, checking that there are no errors at each step...

Above sequence seems obvious but it worked for me. The trick is that Layout Editor starts your class in its own context, and this can cause some unexpected errors in your code, which "works" when started from inside your application...

Another trick is to use isInEditMode() check in your widget's code to skip parts, which may not work in Design view. E.g.:

MyClass myClass = isInEditMode() ? null : MyClass.getInstance();

Answer 4

No need for weird constructor parameters! This is total misunderstanding! Working case for Android Studio 4.1 and above with regular 2-arg (context + xmlattrs) constructor:

1. Navigate to your CustomView.kt class
2. Open "SPLIT" view
3. Click on this issues Icon
4. Read error message, observe where layout preview code gets crashed
5. Fix those errors! In my case the layout preview could not fetch the font, hence I have observed that constructor code was failing. I have fixed this by setting the default font which was recognized by Layout Preview with isInEditMode flag:

    private val defaultTypeface: Typeface = if (!isInEditMode) {
        ResourcesCompat.getFont(context, R.font.sfpro_bold)!!
    } else {
        Typeface.DEFAULT
    }