Programming & ITTools

Layout Design View Render Problem in Android Studio 3.0.1

Gradle problems and Design view is broken in android studio 3.0.1

Currently I am learning the Google: Associate Android Developer (AAD) path on Pluralsight by Jim Wilson. (Link at the end of the post.)
At the third course: Enhancing the Android Application Experience I had to update the app gradle file to give support for the appcompat library.

A side note: The course was released in June 26, 2017 and as I am writing today is February 02, 2018. So the course is fairly new as I am following but there are already a few breaking changes. At least regardin gradle and appcompat library settings.

When I created the project the set up of the app gradle file was different from the one showed in the course in the dependencies section.
Course version:

 dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
 exclude group: 'com.android.support', module: 'support-annotations'
 })
 compile 'com.android.support:appcompat-v7:26.1.0'
 compile 'com.android.support.constraint:constraint-layout:1.0.2'
 compile 'com.android.support:design:26.1.0'
 testCompile 'junit:junit:4.12'
 compile 'com.android.support:cardview-v7:26.1.0'
 }

My version:

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

To be honest I tried both and both works, so if you reading this post because you have a problem, it shouldn’t be the one.

Now, when I created the project I set the target API to version 24.
To be more precise with Android version check the Android Dashboard here: https://developer.android.com/about/dashboards/index.html

Regardless my decision the gradle file was set differently.
 compileSdkVersion 26
 minSdkVersion 24
 targetSdkVersion 26

While these settings were all set to 24 in the course. So there is a few information that should be mentioned and was missed.
Here they are:

  1.  The compileSdkVersion should not be set anything lower than the targetSdkVersion. In other words compileSdkVersion depends on targetSdkVersion so they should be always equal.
  2. In the dependencies section some “implementation” or “compile” references are dependent on the compileSdkVersion that is dependent on the targetSdkVersion. In my situation these dependencies namely:
    1. implementation ‘com.android.support:appcompat-v7:26.1.0’
    2. implementation ‘com.android.support:design:26.1.0’
    3. implementation ‘com.android.support:cardview-v7:26.1.0’
  3. If you notice v7:26 and at design:26 the number 26 should be the version of compileSdkVersion.
  4. Another dependency: You should always use the newest appcompat library, otherwise the Design view of layouts will be broken with an unknown exception. Because these libraries are at the end of this reference chain these are the strongest requirements as well. That is when your references triggered backwards and you can do nothing to force it. So in that case you have to set them to the newest API version. As of I am writing it is API 26 so my compileSdkVersion must reflect the implementation references and because of that I must set targetSdkVersion to the newest: so to API 26.

 

That is the error I get when I try to reference an earlier version of any of the above mentioned libraries to match the API level 24 used in the course.

Gradle settings:

 dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
    exclude group: 'com.android.support', module: 'support-annotations'
  })
 compile 'com.android.support:appcompat-v7:24.2.1'
  compile 'com.android.support.constraint:constraint-layout:1.0.2'
  compile 'com.android.support:design:24.2.1'
  testCompile 'junit:junit:4.12'
  compile 'com.android.support:cardview-v7:24.2.1'
 }

Error:

Here is the information at the bottom of the list:

 Failed to instantiate one or more classes: 

 java.lang.ClassNotFoundException: android.support.v4.view.TintableBackgroundView
 at org.jetbrains.android.uipreview.ModuleClassLoader.load(ModuleClassLoader.java:181)
 at com.android.tools.idea.rendering.RenderClassLoader.findClass(RenderClassLoader.java:56)
 at org.jetbrains.android.uipreview.ModuleClassLoader.findClass(ModuleClassLoader.java:119)
 at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
 at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
 at org.jetbrains.android.uipreview.ModuleClassLoader.loadClass(ModuleClassLoader.java:214)
 at java.lang.ClassLoader.defineClass1(Native Method)
 at java.lang.ClassLoader.defineClass(ClassLoader.java:763)
 at java.lang.ClassLoader.defineClass(ClassLoader.java:642)
 at com.android.tools.idea.rendering.RenderClassLoader.defineClassAndPackage(RenderClassLoader.java:177)
 at com.android.tools.idea.rendering.RenderClassLoader.loadClassFromJar(RenderClassLoader.java:92)
 at org.jetbrains.android.uipreview.ModuleClassLoader.load(ModuleClassLoader.java:171)
 at com.android.tools.idea.rendering.RenderClassLoader.findClass(RenderClassLoader.java:56)
 at org.jetbrains.android.uipreview.ModuleClassLoader.findClass(ModuleClassLoader.java:119)
 at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
 at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
 at org.jetbrains.android.uipreview.ModuleClassLoader.loadClass(ModuleClassLoader.java:214)
 at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:500)
 at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:254)
 at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:215)
 at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadClass(LayoutlibCallbackImpl.java:218)
 at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:336)
 at android.view.BridgeInflater.onCreateView(BridgeInflater.java:155)
 at android.view.LayoutInflater.onCreateView(LayoutInflater.java:720)
 at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:788)
 at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:225)
 at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:730)
 at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:863)
 at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
 at android.view.LayoutInflater.rInflate(LayoutInflater.java:837)
 at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
 at com.android.layoutlib.bridge.bars.CustomBar.(CustomBar.java:90)
 at com.android.layoutlib.bridge.bars.NavigationBar.(NavigationBar.java:52)
 at com.android.layoutlib.bridge.bars.NavigationBar.(NavigationBar.java:46)
 at com.android.layoutlib.bridge.impl.Layout.createNavBar(Layout.java:325)
 at com.android.layoutlib.bridge.impl.Layout.(Layout.java:151)
 at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:288)
 at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:384)
 at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:193)
 at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:547)
 at com.android.tools.idea.rendering.RenderTask.lambda$inflate$3(RenderTask.java:681)
 at java.util.concurrent.FutureTask.run(FutureTask.java:266)
 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
 at java.lang.Thread.run(Thread.java:745)

The app although builds and runs well in the emulator. But the Design view is still broken in Android Studio 3.0.1
If I set back everything to the newest API level everything goes back to normal and works perfectly in the Design view as well.

Because I had to search for a while for a solution I thought this post could help you and save some time for you. Let me know if you had the same issue and if my post helped you and also if it didn’t. But in that case could you let me know in the comment what was the case for you, so we all could learn from your case. Thank you.

And to not forget to give you the link to the course I am talking about and some discount for you if you want to join to the Pluralsight community as well.

Disclaimer: I am part of the Pluralsight referral program. If you want join you can have 50% of for your first month or 15% off from your first year. In return I will get a month free if you want to support me as well to create more posts like this.

Here is the discount url: http://referral.pluralsight.com/mQcXOO3
Here is the course mentioned above: https://app.pluralsight.com/paths/skills/google-android-associate-developer-aad

Happy Coding.

If you liked, share this on: