Android Studio XML Widgets not rendering properly in designer

Recently, while working on some projects, I've had a rather annoying problem when coding the user interface of my application. The problem is, some controls (usually a floating action button or a regular button) render strangely. It's hard for me to explain exactly how it looks - but here's an example of how it shows the floating action button to look like in the designer:

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:src="@drawable/ic_baseline_add_24"
        android:layout_height="wrap_content"/>


</LinearLayout>

Now, the thing is, I don't have any weird or special code added, the XML code is as pure as it gets, so I have no idea why I am having these strange rendering problems.

Here is how it rendered the following button:

Code:

 <com.google.android.material.button.MaterialButton
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Submit"
      android:layout_gravity="bottom"
      android:textAllCaps="false"
      android:layout_margin="30dp"
      app:cornerRadius="30dp"
      android:id="@+id/submitButton"
      android:backgroundTint="@color/turquoise"
      />

Image:

A solution would be greatly appreciated!

Cheers, Tom

from Android Studio XML Widgets not rendering properly in designer