Custom View does not render in Design View in Android Studio?

Question

I have created a custom view to info at the bottom is screen with divider on top. I am having trouble to render it in Design view of Android Studio (V4.1) although it works fine in apps.

class InfoDivider @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0,
    defStyleRes: Int = 0
) : LinearLayout(context, attrs, defStyle, defStyleRes) {

    var text: String? by Delegates.observable<String?>("") { _, old, new ->
        if (old != new)
            update()
    }


    init {
        LayoutInflater.from(context)
            .inflate(R.layout.info_divider, this, true)

        orientation = VERTICAL

        if (attrs != null) {
            val math = context.obtainStyledAttributes(attrs, R.styleable.InfoDivider)

            if (math.hasValue(R.styleable.InfoDivider_text)) {
                this.text = math.getString(R.styleable.InfoDivider_text)
            }


            math.recycle()
        }
    }

    private fun update() {
        txt_message.text = text
    }
}

It throws some issue only in design view

java.lang.NoSuchMethodError: kotlin.jvm.internal.MutablePropertyReference1Impl.<init>(Ljava/lang/Class;Ljava/lang/String;Ljava/lang/String;I)V
    at com.test.custom_views.info_dividers.InfoDivider.<clinit>(InfoDivider.kt)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
    at org.jetbrains.android.uipreview.ViewLoader.createNewInstance(ViewLoader.java:413)
    at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:203)
    at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:161)
    at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadView(LayoutlibCallbackImpl.java:309)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:416)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:427)
    at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:331)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:961)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:659)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:501)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:353)
    at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:404)
    at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:141)
    at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:713)
    at com.android.tools.idea.rendering.RenderTask.lambda$inflate$6(RenderTask.java:844)
    at java.util.concurrent.CompletableFuture$AsyncSupply.run(CompletableFuture.java:1604)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
    at java.lang.Thread.run(Thread.java:748)

It looks like this

How it should look like this

Answer 1

For anyone who might be stuck in the same issue.

The root cause is Kotlin Delegated Properties.

The solution could be 1 of these 3:

• Removing the code that uses Delegated Properties

• Keep the Delegated Properties logic and lower your Kotlin version to 1.3 - tested by myself, it works but you have to give up some of the Kotlin features that only Kotlin 1.4 could provide like trailing comma, auto smart cast...

• Keep the Delegated Properties, Kotlin version grater than 1.4 and upgrade your Android Studio to 4.2 beta - latest version at the time this answer was written.

This is where I found the answers above

Kotlin delegate property causes a preview rendering error in Android Studio

https://issuetracker.google.com/issues/165312270

Answer 2

class InfoDivider @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0,
    defStyleRes: Int = 0
) : LinearLayout(context, attrs, defStyle, defStyleRes) {




    init {
        LayoutInflater.from(context)
            .inflate(R.layout.info_divider, this, true)

        orientation = VERTICAL

        if (attrs != null) {
            val math = context.obtainStyledAttributes(attrs, R.styleable.InfoDivider)

            if (math.hasValue(R.styleable.InfoDivider_text)) {
                txt_message.text = math.getString(R.styleable.InfoDivider_text)
            }


            math.recycle()
        }

    }

    fun setText(str: String) {
        txt_message.text = str
    }
}