Android Studio Tabs and ViewPager Rendering

I have been developing a simple app which involves Fragment. I have used viewpager and TabLayout in the XML file. One error is shown: Render Problem along with 2 warnings: i) Missing Styles ii) Failed to instantiate one or more classes. In Render Problem the following error is shown: "Failed to find style 'tabStyle' in current theme".

In Missing Styles: "Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layout to choose a different layout, or fix the theme style references."

In Failed to instantiate one or more classes: "The following classes could not be instantiated: - android.support.design.widget.TabLayout (Open Class, Show Exception, Clear Cache) - android.support.v4.view.ViewPager (Open Class, Show Exception, Clear Cache) Tip: Use View.isInEditMode() in your custom views to skip code or show sample data when shown in the IDE. If this is an unexpected error you can also try to build the project, then manually refresh the layout. Exception Details java.lang.ClassNotFoundException: android.view.View$OnUnhandledKeyEventListener " enter image description here

Manifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.utkarsh.kannadaseekhae">

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

activity_main.xml:

<?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="@color/primary_color"
android:orientation="vertical"
tools:context=".MainActivity">


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/CategoryTab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="48dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

Styles.xml:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" 
parent="Base.Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/primary_color</item>
    <item name="colorPrimaryDark">@color/primary_dark_color</item>
    <item name="actionBarStyle">@style/KannadaAppBarStyle</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

<!-- App bar style -->
<style name="KannadaAppBarStyle" parent="@android:style/Widget.DeviceDefault.Light.ActionBar.Solid.Inverse">
    <!-- Remove the shadow below the app bar -->
    <item name="elevation">0dp</item>
</style>

<!-- Style for a tab that displays a category name -->
<style name="CategoryTab" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item 
 name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
</style>

<!-- Text appearance style for a category tab -->
<style name="CategoryTabTextAppearance" 
parent="TextAppearance.Design.Tab">
    <item name="android:textColor">#A8A19E</item>
</style>
</resources>

Gradle build:

apply plugin: 'com.android.application'

android { compileSdkVersion 28 defaultConfig { applicationId "com.example.utkarsh.kannadaseekhae" 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-rc01'
    implementation 'com.android.support.constraint:constraint- 
layout:1.1.2'
implementation 'com.android.support:support-v4:28.0.0-rc01'
implementation 'com.android.support:design:28.0.+'
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'
}

MainActivity.java:

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Set the content of the activity to use the activity_main.xml 
 layout file
    setContentView(R.layout.activity_main);

    // Find the view pager that will allow the user to swipe between 
fragments
    ViewPager viewPager = findViewById(R.id.viewpager);

    // Create an adapter that knows which fragment should be shown on 
each page
    CategoryAdapter adapter = new CategoryAdapter(this, 
getSupportFragmentManager());

    // Set the adapter onto the view pager
    viewPager.setAdapter(adapter);

    // Find the tab layout that shows the tabs
    TabLayout tabLayout = findViewById(R.id.tabs);

    // Connect the tab layout with the view pager. This will
    //   1. Update the tab layout when the view pager is swiped
    //   2. Update the view pager when a tab is selected
    //   3. Set the tab layout's tab names with the view pager's 
adapter's titles
    //      by calling onPageTitle()
    tabLayout.setupWithViewPager(viewPager);
    }
}