How to fix preview tab bug in Android Studio Arctic Fox

Short Answer: Downgrade to Android Studio 4.2.2.

Android Studio Arctic Fox - made major changes. However, it created new issues that didn't exist. It needs a patch. I even tried the latest patch of Android Studio Arctic Fox (2020.3.1) Patch 1 - August/18, It didn't solve it. So, I had to downgrade to Android Studio 4.2.2, which is relatively more stable.

When downgrading to Android Studio 4.2.2, you have to change the following

• distributionUrl in graddle-wrapper.properties

distributionUrl=https://services.gradle.org/distributions/gradle-6.7.1-bin.zip

• classpath in build.gradle (Project)

classpath "com.android.tools.build:gradle:4.2.2"

This Same Happened to me and unfortunately, there is no perfect fix. It is due to scaling according to your device display size. Android Studio currently supports Display Scaling of 100% , 200% etc. So if your device have 150% scaling, this error occurs...

You can temporarily fix it by the following way, but you have to adjust your font size accordingly. Open Android Studio > Help > Edit custom properties > If one is not already there, you will be prompted to create one. Then enter the following :

hidpi=false

Then press enter and close Android Studio (Restart it). Then you can see everything in a small size, but the preview tab will be fixed. Then Go to Settings and adjust font size of your choice (On both editor and whole IDE). This is only a temporary solution. And many others are facing this same issue after the updates including old versions of Android Studio.

You can also try changing scaling from Windows Settings (You should set scaling to 100%), but it will affect your Entire OS

You can do (+) zoom button click in layout preview and try using layout preview in more zoom, this is only thing working for me to see things clear