Layout Preview showing blank screen with Coordinator layout in Android Studio 3.0

user_7561395 0
Viewed 16306

This is layout design code when I open the layout preview page grey android screen shows only (android...CoordinatorLayout) and nothing is showing on the screen. How can I solve this problem, I want to show the layout design on Layout Preview Screen.

<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context=".activity.AddDietActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        android:background="@drawable/menubar">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:textSize="18dp"/>

        <TextView
            android:id="@+id/submitBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="end"
            android:layout_margin="10dp"
            android:onClick="clickToAddDiet"
            android:text="Save"
            android:textSize="18sp"
            android:textColor="#fff"/>
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_add_diet" />

</android.support.design.widget.CoordinatorLayout>
android-layout android-studio android
12 Answers

I was targeting android sdk 28 and used implementation 'com.android.support:design:28.+' and it was then, that i faced this same problem. And then i tried all the solutions found on many posts but none of them worked, I even added style items manually but it was tiresome, so I switched down to implementation 'com.android.support:design:27.+' and then it worked fine.

user_86859030

In my case, this happened after updating the versions on some of my dependencies. The only thing I had to do was recompile my project. From the file menu in Android Studio, Build >> Make Project... or Ctrl+F9. After this, the preview was back to normal.

user_31058900

You did not close your CoordinatorLayout with </android.support.design.widget.CoordinatorLayout>. Also, you would want to use a ConstraintLayout to make your included layout appears below your AppBarLayout.

user_13700870

Change app theme to “App compat:dialog” in design view.This worked for me.

user_104460820

You can try to change the content of the Styles.xml - "Theme.AppCompat.Light.DarkActionBar" to "Base.Theme.AppCompat.Light.DarkActionBar" and re-built the app.

if this does not work try to change the theme

Change the theme image Change the theme to light version. Light theme selection image

user_77421150

Just update your android studio to 3.2.1

user_72455230

Update to Android Studio 3.2.1 from 3.1.1 fix all the problems related to Coordinate Layout preview page grey android screen showing only (android...CoordinatorLayout) and nothing showing on the screen

Android 3.2.1 here

user_105164630

The info window that @MateusGondim mentioned in his answer also suggests that you clean and rebuild the project. I did so, the error went away, and the layout preview started working again.

user_2950280

This fixed my problem about Android Preview screen shows android…coordinatorlayout

1.Check dependencies within your application gradle build file for possible duplicate implementation of "com.android.support:design:28.0.0" (it should not be duplicated).

2.Go to your res folder -> values -> styles and change your app theme "Theme.AppCompat.Light.DarkActionBar" to "Base.Theme.AppCompat.Light.DarkActionBar"

  1. File -> Invalidate Caches/Restart - it worked for me hope it helps.
user_77894030

Things You Can Do

  1. Refresh the layout
  2. Sync Project
  3. Clean Project
  4. Rebuild Project
  5. ADD Dependency implementation 'com.google.android.material:material:1.4.0'
  6. Build Project (Recommended, most of the Layout issues will be Solved by Doing This )
  7. Refractor -> Migrate to Androidx.
user_115884320
Related