Constraint Layout not visible on the Layout file...And getting the error while inflating any view on it

Question

I am using the constraint layout (android.support.constraint.ConstraintLayout) as the main layout in my XML file. As we get the two View of layout(One is for User View And Second is for the drag and drop the view and provide the relation between them) .But i am getting only one window which is totally blank and look alike below :-

And getting this error while using any view in my layout.Please check below image for it

My layout file is as below:-

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteY="25dp"
    tools:layout_editor_absoluteX="0dp">

    <ImageView
        android:id="@+id/image_shot"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="0dp" />

</android.support.constraint.ConstraintLayout>

I have tried the below solution on SO, but it is not working for me,Please check the link , which i have searched

1. First Link
2. Second Link
3. Third Link

Please help me to short out from this problem.Thanks

Kierkegaard

That display is what you will see if the ConstraintLayout class cannot be found. Please share what version of Android Studio you are using and your gradle scripts. – Basseterre

Still the blank screen appear on the layout preview :( ..Thanks for input – Kierkegaard

Answer 1

This is because you don't give any constraint for ImageView. When you give constraint to ImageView then that warning will be removed.

Like below.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="25dp">

    <ImageView
        android:id="@+id/image_shot"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

set your gradle like below.

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-kapt' // for Databinding

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.hellokotlin"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    android {
        dataBinding {
            enabled = true
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:25.4.0'
    testImplementation 'junit:junit:4.12'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:recyclerview-v7:25.4.0'
    kapt 'com.android.databinding:compiler:2.3.1'       // for Databinding
}

Support lib version and buildToolsVersion

buildToolsVersion "25.0.2"

defaultConfig {
        applicationId "com.hellokotlin"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
implementation 'com.android.support:appcompat-v7:25.4.0'

Languor

Answer 2

Try to start with

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/constraintLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>

If preview is not showing try to change selected device or check imlemented library in gradle implementation 'com.android.support.constraint:constraint-layout:1.0.2'

Pliocene

I have already used the 'implementation 'com.android.support.constraint:constraint-layout:1.0.2'' but still the same problem is here..Thanks for input – Kierkegaard

Still the blank screen appear on the layout preview :( – Kierkegaard

Thanks for input..+1 for ur effort – Kierkegaard

Answer 3

As the error says, your layout is not Constraint so it's stuck in the left top corner. In order to add constraints using the design view change the absolute values first, e.g. :

tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="25dp"

and than constraint your layout as you wish. In the example below it's in the centre.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="0dp">

    <ImageView
        android:id="@+id/image_shot"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</android.support.constraint.ConstraintLayout>

Undertrick

Thanks for input..Still the blank screen appear on the layout preview :( – Kierkegaard

Answer 4

Just remove this attribute tools:showIn="@layout/activity_main" from xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Clean Project

Boughton

Answer 5

I was facing same issue as I was new to Constraint layout.

Adding implementation 'com.android.support.constraint:constraint-layout:1.1.3' in build.gradle (module) file resolve my issue.

Plumbaginaceous

Thanks for the input +1 for the effort – Kierkegaard