ConstraintLayout cannot be instantiated along with other classes in Android XML Preview

user_9060223 0
Viewed 586

Some classes are not rendered in my Android Studio XML Preview (they simply show a gray rectangle with the class name). I think that there are some incompatibilities among the versions of the library I used. Here's my XML layout.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="user"
            type="com.mobile.githubuser.model.GithubUserProfileSummary" />
    </data>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/act_details_toolbar"
                android:layout_width="0dp"
                android:layout_height="@dimen/toolbar_height"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:title="@string/act_user_details_toolbar_title" />

            <com.google.android.material.imageview.ShapeableImageView
                style="@style/Widget.GithubUser.ShapeableImageView.Circular"
                android:id="@+id/shapeableImageView"
                android:layout_width="@dimen/user_details_avatar_size"
                android:layout_height="@dimen/user_details_avatar_size"
                android:layout_marginTop="@dimen/keyline_5"
                android:src="@{user.avatar}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/act_details_toolbar" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/keyline_4"
                android:layout_marginTop="@dimen/keyline_4"
                android:layout_marginEnd="@dimen/keyline_4"
                android:text="@{user.name}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceHeadline2"
                android:textColor="?attr/colorOnBackground"
                app:layout_constraintTop_toBottomOf="@+id/shapeableImageView"
                tools:layout_editor_absoluteX="16dp"
                tools:text="april_ludgate" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/keyline_4"
                android:layout_marginTop="@dimen/keyline_2"
                android:layout_marginEnd="@dimen/keyline_4"
                android:text="@{`@` + user.username}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceSubtitle2"
                android:textColor="?attr/colorOnBackground"
                android:textSize="16sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView"
                tools:text="April Ludgate" />

            <include
                android:id="@+id/act_details_details"
                layout="@layout/include_user_details"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/keyline_4"
                android:layout_marginTop="@dimen/keyline_5"
                android:layout_marginEnd="@dimen/keyline_4"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView2" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/act_details_tab_layout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/keyline_5"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/act_details_details" />

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/act_details_pager"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:clipChildren="false"
                android:clipToPadding="false"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/act_details_tab_layout" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</layout>

I included another layout there. Here is my included layout file XML.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/materialTextView2">

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/materialTextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/drawable_company"
        android:drawablePadding="@dimen/keyline_2"
        android:text="@string/company_label"
        android:textAlignment="center"
        android:textAppearance="?attr/textAppearanceBody1"
        android:textColor="?attr/colorOnBackground"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/materialTextView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/keyline_0"
        android:drawableStart="@drawable/drawable_location"
        android:drawablePadding="@dimen/keyline_2"
        android:text="@string/location_label"
        android:textAlignment="center"
        android:textAppearance="?attr/textAppearanceBody1"
        android:textColor="?attr/colorOnBackground"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialTextView3" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/materialTextView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/keyline_0"
        android:drawableStart="@drawable/drawable_repository"
        android:drawablePadding="@dimen/keyline_2"
        android:text="@string/repository_label"
        android:textAlignment="center"
        android:textAppearance="?attr/textAppearanceBody1"
        android:textColor="?attr/colorOnBackground"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialTextView4" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="materialTextView3,materialTextView4,materialTextView5" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/materialTextView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/keyline_2"
        android:text="@{`: ` + user.organizations}"
        android:textAppearance="?attr/textAppearanceBody1"
        android:textColor="?attr/colorOnBackground"
        app:layout_constraintBottom_toBottomOf="@+id/materialTextView3"
        app:layout_constraintStart_toEndOf="@id/barrier2"
        app:layout_constraintTop_toTopOf="@+id/materialTextView3"
        tools:text=": Google, Inc." />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/materialTextView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/keyline_2"
        android:text="@{`: ` + user.location}"
        android:textAppearance="?attr/textAppearanceBody1"
        android:textColor="?attr/colorOnBackground"
        app:layout_constraintBottom_toBottomOf="@+id/materialTextView4"
        app:layout_constraintStart_toEndOf="@id/barrier2"
        app:layout_constraintTop_toTopOf="@+id/materialTextView4"
        tools:text=": Pittsburgh, PA, U.S.A." />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/materialTextView10"
        formatNumberToTextWithColon="@{1234}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/keyline_2"
        android:textAppearance="?attr/textAppearanceBody1"
        android:textColor="?attr/colorOnBackground"
        app:layout_constraintBottom_toBottomOf="@+id/materialTextView5"
        app:layout_constraintStart_toEndOf="@id/barrier2"
        app:layout_constraintTop_toTopOf="@+id/materialTextView5"
        tools:text=": 1,234" />

</androidx.constraintlayout.widget.ConstraintLayout>

When I click the "i" icon on the Android Studio Preview, I receive these messages.

The following classes could not be instantiated:
- androidx.constraintlayout.widget.Barrier (Open Class, Show Exception, Clear Cache)
- androidx.constraintlayout.widget.ConstraintLayout (Open Class, Show Exception, Clear Cache)
- com.google.android.material.tabs.TabLayout (Open Class, Show Exception, Clear Cache)
- com.google.android.material.appbar.MaterialToolbar (Open Class, Show Exception, Clear Cache)
Tip: Use View.isInEditMode() in your custom views to skip code or show sample data when shown in the IDE.  If this is an unexpected error you can also try to build the project, then manually refresh the layout.
Exception Details
java.lang.NoSuchFieldError: ConstraintLayout_Layout_barrierMargin
    at androidx.constraintlayout.widget.Barrier.init(Barrier.java:204)
    at androidx.constraintlayout.widget.ConstraintHelper.<init>(ConstraintHelper.java:85)
    at androidx.constraintlayout.widget.Barrier.<init>(Barrier.java:123)
    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:403)
    at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:186)
    at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:144)
    at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadView(LayoutlibCallbackImpl.java:309)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:417)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:428)
    at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:332)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:961)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1123)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:1097)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1084)
    at android.view.LayoutInflater_Delegate.parseInclude(LayoutInflater_Delegate.java:204)
    at android.view.LayoutInflater.parseInclude(LayoutInflater.java:1161)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1119)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:1097)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1084)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1126)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:1097)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1084)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:682)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:501)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:328)
    at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:373)
    at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:141)
    at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:678)
    at com.android.tools.idea.rendering.RenderTask.lambda$inflate$8(RenderTask.java:809)
    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)

Here are the dependencies in my build.gradle file.

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

apply plugin: 'kotlin-kapt'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.mobile.githubuser"
        minSdkVersion 26
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    dataBinding {
        enabled = true
    }
    android.sourceSets.all {
        java.srcDir('src/main/kotlin')
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$rootProject.kotlinVersion"
    implementation "androidx.appcompat:appcompat:$rootProject.appCompatVersion"
    implementation "androidx.core:core-ktx:$rootProject.coreKtxVersion"
    implementation "androidx.constraintlayout:constraintlayout:$rootProject.constraintLayoutVersion"
    implementation "androidx.viewpager2:viewpager2:$rootProject.viewPagerVersion"

    implementation "com.google.android.material:material:$rootProject.mdcVersion"
    implementation "com.github.bumptech.glide:glide:$rootProject.glideVersion"
}

The versions are located inside the project gradle file which can be seen here.

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        kotlinVersion = '1.3.72'
        mdcVersion = '1.2.0-alpha03'
        constraintLayoutVersion = '2.0.0-beta1'
        appCompatVersion = '1.1.0-alpha03'
        coreKtxVersion = '1.3.0'
        viewPagerVersion = '1.0.0'
        glideVersion = '4.11.0'
    }
    repositories {
        google()
        jcenter()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

I've tried.

  • Installing both the SDK for Android 10.0 and Android 8.1
  • I've tried to invalidate and restart the project multiple times
  • I've tried to clean and rebuild the project multiple times
  • I updated my Android Studio IDE to 4.0.1
  • Changing the themes in my XML (although this shouldn't be necessary)

I'm using constraint layout version 2.0.0-beta1 to use MotionLayout. Previously, when I used version 1.1.3 (the stable version), the preview worked just fine, i.e. it can render the ConstraintLayout. However, the MDC components like MaterialToolbar and ShapeableImageView have always failed to be rendered even when I was using constraint layout version 1.1.3. Are there incompatibilities in my dependencies here? How can I fix this?

material-components-android android-constraintlayout android-gradle-plugin android-studio android
2 Answers

Try declaring with 'def' keyword,or just hardcode the versions for now directly in dependencies, I get feeling there is some problem with gradle syncing,

ext {
        def kotlinVersion = '1.3.72'
        def mdcVersion = '1.2.0-alpha03'
        def constraintLayoutVersion = '2.0.0-beta1'
        def appCompatVersion = '1.1.0-alpha03'
        def coreKtxVersion = '1.3.0'
        def viewPagerVersion = '1.0.0'
        def glideVersion = '4.11.0'
    }

OR

dependencies {
    ...
    implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta1"
}
user_93459370

First of all if you are using ViewDataBiding to outer layout then you have use ViewDataBinding for inner layout also.

There is main problem is with constarintLayoutVersion '2.0.0-beta1'. If you use stable version 1.1.3 then it will work.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<data>
    <variable
        name="user"
        type="com.harman.uilearning.ViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/materialTextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableStart="@android:drawable/arrow_down_float"
    android:drawablePadding="10dp"
    android:text="Company Label"
    android:textAlignment="center"
    android:textAppearance="?attr/textAppearanceBody1"
    android:textColor="?attr/colorOnBackground"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/materialTextView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableStart="@android:drawable/arrow_down_float"
    android:drawablePadding="10dp"
    android:text="location_label"
    android:textAlignment="center"
    android:textAppearance="?attr/textAppearanceBody1"
    android:textColor="?attr/colorOnBackground"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/materialTextView3"/>

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/materialTextView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableStart="@android:drawable/arrow_down_float"
    android:drawablePadding="10dp"
    android:text="repository_label"
    android:textAlignment="center"
    android:textAppearance="?attr/textAppearanceBody1"
    android:textColor="?attr/colorOnBackground"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/materialTextView4"/>

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:barrierDirection="right"
    app:constraint_referenced_ids="materialTextView3,materialTextView4,materialTextView5" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/materialTextView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:text="user.organizations"
    android:textAppearance="?attr/textAppearanceBody1"
    android:textColor="?attr/colorOnBackground"
    app:layout_constraintBottom_toBottomOf="@+id/materialTextView3"
    app:layout_constraintStart_toEndOf="@id/barrier2"
    app:layout_constraintTop_toTopOf="@+id/materialTextView3"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text=": Google, Inc." />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/materialTextView9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:text="user.location"
    android:textAppearance="?attr/textAppearanceBody1"
    android:textColor="?attr/colorOnBackground"
    app:layout_constraintBottom_toBottomOf="@+id/materialTextView4"
    app:layout_constraintStart_toEndOf="@id/barrier2"
    app:layout_constraintTop_toTopOf="@+id/materialTextView4"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text=": Pittsburgh, PA, U.S.A." />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/materialTextView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:textAppearance="?attr/textAppearanceBody1"
    android:textColor="?attr/colorOnBackground"
    app:layout_constraintBottom_toBottomOf="@+id/materialTextView5"
    app:layout_constraintStart_toEndOf="@id/barrier2"
    app:layout_constraintTop_toTopOf="@+id/materialTextView5"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text=": 1,234" />

 </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
user_138963050
Related