Search code examples
androidandroid-studiorenderingandroid-tablayout

Design Page Disappeared in Android Studio when Using Tab Layout

I was trying to use Tab Layout in my project. Whenever I add a TabLayout to the linear layout the design page disappears. Refreshing doesn't work. I can't even see the tab items in the component tree. But when I run this activity in a phone, it looks exactly how it should. But can't see the design panel. Have a look-

Before Before adding TabLayout After After adding TabLayout

The XML code below in case there is a problem there, though I highly doubt it-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#E9EDBD"
    android:orientation="vertical"
    tools:context=".ChattyActivity">

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>
</LinearLayout>

There are three Render Errors which are-

First Error Style ResourceReference{namespace=apk/res-auto, type=attr, name=textAppearanceButton} is not of type STYLE (instead attr)

Second Error Failed to find style with 2131033000

Third Error

java.lang.NullPointerException
    at android.content.res.Resources_Theme_Delegate.obtainStyledAttributes(Resources_Theme_Delegate.java:74)
    at android.content.res.Resources$Theme.obtainStyledAttributes(Resources.java:1631)
    at android.content.Context.obtainStyledAttributes(Context.java:874)
    at android.widget.TextView.setTextAppearance(TextView.java:3965)
    at androidx.appcompat.widget.AppCompatTextView.setTextAppearance(AppCompatTextView.java:216)
    at com.google.android.material.textview.MaterialTextView.setTextAppearance(MaterialTextView.java:106)
    at android.widget.TextView.setTextAppearance(TextView.java:3954)
    at androidx.core.widget.TextViewCompat.setTextAppearance(TextViewCompat.java:289)
    at com.google.android.material.tabs.TabLayout$TabView.updateTab(TabLayout.java:2824)
    at com.google.android.material.tabs.TabLayout$TabView.update(TabLayout.java:2853)
    at com.google.android.material.tabs.TabLayout$TabView.setTab(TabLayout.java:2765)
    at com.google.android.material.tabs.TabLayout.createTabView(TabLayout.java:1725)
    at com.google.android.material.tabs.TabLayout.newTab(TabLayout.java:1008)
    at com.google.android.material.tabs.TabLayout.addTabFromItemView(TabLayout.java:876)
    at com.google.android.material.tabs.TabLayout.addViewInternal(TabLayout.java:1782)
    at com.google.android.material.tabs.TabLayout.addView(TabLayout.java:1772)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1131)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:1101)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1088)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1130)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:1101)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1088)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:686)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:505)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:360)
    at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:443)
    at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:121)
    at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:722)
    at com.android.tools.idea.rendering.RenderTask.lambda$inflate$9(RenderTask.java:879)
    at com.android.tools.idea.rendering.RenderExecutor$runAsyncActionWithTimeout$3.run(RenderExecutor.kt:194)
    at com.android.tools.idea.rendering.RenderExecutor$PriorityRunnable.run(RenderExecutor.kt:292)
    at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
    at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
    at java.base/java.lang.Thread.run(Thread.java:829)

I tried to google this problem but I couldn't find anything helpful. The solutions I found are not really relatable with this problem, even if it is I couldn't understand. I tried reopening android studio, reopening project, deleting the XML file and creating a new one with exact same code in it. refreshing activity over and over.

Solution

  • Later I found a solution to this problem. So I will leave the answer here in case someone needs it. The solution is very easy actually. You just need to use a lower version of android material to avoid rendering problem.

    1. First go to the build:gradle(Module:app)
    2. Find dependencies and locate implementation 'com.google.android.material:material:(whatever version you have here)
    3. Now overwrite this line with implementation 'com.google.android.material:material:1.7.0'
    4. Click sync now.

    This should solve the problem, now that you are using 1.7.0 version. Hope it helped you.