Search code examples
androidxmlandroid-studiopreview

Android Studio designer preview different to phone


I'm new to android studio and developing on the android platform. I'm having a problem where the Android Studio designer preview doesn't show exactly what is on my phone. It shows an extra Toolbar widget at the top of the screen. I've had a look in the XML file for the activity and cannot find where it is coming from. It would be much appreciated if one of you could help.

Designer: https://i.sstatic.net/UKyoC.jpg

Phone: https://i.sstatic.net/g45Vc.jpg

This is a snippet from the XML file:

<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="com.tomnulty.helloworld.SecondActivity">

<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:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

And this is a snippet from the AndroidManifest file:

 <activity
        android:name=".SecondActivity"
        android:label="@string/hello_world"
        android:theme="@style/AppTheme.NoActionBar">
        <intent-filter>
            <action android:name="android.intent.action.SECOND" />

            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
    </activity>

Solution

  • As Pztar said, "Go into your styles.xml and under the AppTheme style set the parent as Theme.AppCompat.Light.NoActionBar"

    Although my theme was set when I declared the activity in AndroidManifest.xml, this did not change the preview. This had to be done by changing the theme in the UI of Android Studio or the styles.xml file.

    Styles.xml:

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>