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 that I can drag and drop different controls on my design view (ConstraintLayout) but nothing shows on the design view, it shows for a split sec and then it disappears.

I can see all the elements which 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, Inferring constraints, but no luck. Controls

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

Empty 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'
}

Adnan ILYAS · Answer 1 · 2018-06-19T18:13:42.267

38

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

edited Jun 19 '18 at 18:13

answered Jun 19 '18 at 17:46

Adnan ILYAS

621
1
5
7

2

This my friend is the fking right answer! I don't know how Google sucks at getting things right. – dharam Jul 23 '18 at 22:02
This doesn't work for me, is this for `com.android.support:appcompat-v7:28.0.0` and `com.android.support.constraint:constraint-layout:1.1.3`? – rraallvv Jul 02 '19 at 21:43
I set the theme explicitly in layout for checkbox – Deepali Maniyar Apr 23 '21 at 16:22

score 2 · Answer 2 · answered Jul 25 '18 at 09:23

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

score 2 · Answer 3 · answered Aug 17 '18 at 04:30

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'
}

The sad thing is, I have to do this every time start to work on a new app. I am currently using Android Studio 3.1.4 — Sean, Aug 17 '18 at 04:34
P.S. after editing the Gradle file, you have to click on "Sync Now" in the top right corner for it to work. — Sean, Aug 17 '18 at 04:51

score 2 · Answer 4 · answered Oct 18 '18 at 13:51

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

score 1 · Answer 5 · answered Sep 18 '18 at 14:06

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

score 0 · Answer 6 · answered Jun 19 '18 at 15:18

Your layout has 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 app.

Note: Don't drag/drop the widget on design view, it will generate many weird properties that not gonna work in all case, like the two properties you got. Do it in the code instead. If you want the CheckBox to be in center, 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.

Thank you @Tam Huynh, but that didn't solve the problem, I removed all other controls from the XML and just used your checkbox element, did refresh, cache cleared, restart but still nothing shows in the design, but like you said the checkbox did appear in the centre in run mode. — Adnan ILYAS, Jun 19 '18 at 15:35

score -1 · Answer 7 · answered Jul 14 '18 at 01:12

-1

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.

answered Jul 14 '18 at 01:12

Mayank Pandit

102
4

1

Sorry if I am missing something but -1 OP posted this answer a month before you, no? – JimLohse Sep 18 '18 at 01:34

Android Studio 3.1.3, design view is always empty

7 Answers7

Linked