Android Studio 3.1.3, design view is always empty

Question

I'm new to Android development and I have this problem with my Android Studio 3.1.3 demo project or any project that I create.

Even though I can drag and drop different controls on my design view (ConstraintLayout) nothing shows on the design view, it shows for a split sec and then it disappears.

I can see all the elements that I drag and drop in activity_main.xml Text tab, Component Tree and even in run mode, but not in design tab, nothing shows in design view and it is always blank not even hello world shows on it.

I tried Invalidate Cache Restart, Restarting my PC, changing Zoom - In and out, and Inferring constraints, but no luck. Controls

I can't do much unless I see things from design view.

Empty Design View:

Run mode view

activity_main.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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Button" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        tools:layout_editor_absoluteX="154dp"
        tools:layout_editor_absoluteY="181dp" />

</android.support.constraint.ConstraintLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.libra.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.libra.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Answer 1

Your layout has a problem with the CheckBox widget. It has no constraint. tools:layout_editor_absoluteX and tools:layout_editor_absoluteY are only affect on design mode, but not in real running apps.

Note: Don't drag/drop the widget on design view, it will generate many weird properties that are not gonna work in all cases, like the two properties you got. Do it in the code instead. If you want the CheckBox to be in the centre, do like this:

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="CheckBox"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

This will remove the error icon at the CheckBox, then a refresh may help.

Answer 2

For those that nothing works in this page or in the whole internet(just like me), try to uninstall your android studio then reinstall. (You don't have to uninstall sdks, avd. Settings can also stay the same. Just the main program needs uninstall) When you reinstall Android Studio, change the version to 27 as in the image. That is it, hope it works for you too

Answer 3

Use stable version of support libraries.

The problem is when you are using unstable alpha support libraries. See stable libraries versions on google maven repo.

At the time of answer, most stable version of support:appcomact-v7 is 28.0.0-rc02

Replace

implementation 'com.android.support:appcompat-v7:28.0.0-alpha3' // less stable alpha

With

implementation 'com.android.support:appcompat-v7:28.0.0-rc02' // more stable

Sync, Just Restart AS. Problem resolved !

• Track support:appcomact-v7 stable versions
• Track support:design stable versions
• Track support:recyclerview-v7 stable versions
• Track support:cardview-v7 stable versions

Answer 4

I have been having the same problem and found that this hack worked for me. I have changed the versions in app file located in the Gradle Scripts/ build.gradle(Module:app) to versions 27. CompileSdkVersion, minSdkVersion, targetSdkVersion and implementation 'com.android.support:appcompat-v7:27.0.0'. These are listed on line 4,7,8 and 23.. (it might be different for you).

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.fiv4.masterapp"
        minSdkVersion 27
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Answer 5

Another workaround is to edit GradleScripts/build.gradel(Module app)

-> implementation 'com.android.support:appcompat-v7:28.0.0-alpha3' into implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'

and, if there,

-> implementation 'com.android.support:design:28.0.0-alpha3' into implementation 'com.android.support:design:28.0.0-alpha1'

• SAVE and + SyncNow

Answer 6

Go to res/values/styles.xml file...

on line 4, its always...

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

Change this with

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">

No need to save the file, it will automatically be saved. Go to activity_main.xml --> Design (View) ...it should be showing it now.

Answer 7

Ok my problem is solved!

The following classes could not be instantiated: - android.support.v7.widget.Toolbar

I changed the res/values/styles.xml file from this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

to this:

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">

and that solved the problem