Categories
Software Development

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.
In 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 regarding 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 the 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 little 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 backward and you can do nothing to force it. So in that case you have to set them to the newest API version. As 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:

error message in IDE

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.

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

Happy Coding.

By Botond Bertalan

I am the founder of www.botond.dev
I started my programming studies in 2010 and started to work professionally in 2012 before graduation.
I love programming and architecting code that solves real business problems and gives value for the end-user.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.