In your case you can use:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app_tint="@null"
    app_srcCompat="@drawable/flag_united_states_of_america"
    ..>

The FloatingActionButton in the Material Components uses the colorOnSecondary attribute defined in your app theme to tint its icon (and the default value is #000000). If you don’t want to tint the icon you have to use app:tint="@null".

In general if you want to use a custom style in your FAB you can use:

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      style="@style/MyCustomFab"
      ..>

with:

   <style name="MyCustomFab" parent="@style/Widget.MaterialComponents.FloatingActionButton>
      .....
      <item name="backgroundTint">@color/....</item>
      <item name="tint">@color/....</item>
   </style>

If you want to override the attribute defined in your app theme you can use:

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android_theme="@style/fab_themeoverlay"
      ..>

with:

   <style name="fab_themeoverlay" parent="@style/Widget.MaterialComponents.FloatingActionButton>
      <item name="colorPrimary">@color/...</item>
   </style>

If you want to change the theme of the button, which has implications for how it is inflated, you should use android:theme instead of android:style.

Both Ben P. and Gabrielle were semi-correct. The answer required both a change in the theme via:

android:theme="@style/SecondTheme"

and setting the tint to null:

app:tint="@null"

Both were required in this case

All together, given two themes, this is the correct XML for a FloatingActionButton if you want to change it’s entire background to a vector while your primary theme is MaterialComponents as referenced in your app’s manifest:

<com.google.android.material.floatingactionbutton.FloatingActionButton
          android_layout_width="wrap_content"
          android_layout_height="wrap_content"
          android_layout_margin="10dp"
          app_borderWidth="0dp"

          app_srcCompat="@drawable/your_vector"
          app_tint="@null"
          android_theme="@style/SecondTheme"
          app_maxImageSize="56dp" />

Thank you Gabrielle and Ben for your help!

Goal: I am attempting to apply two different themes in one Fragment. One for the fragment’s overall xml and the other for a particular view within that fragment’s xml.

Reason/Problem: The reason for this is that it doesn’t seem possible to change the entire background of a Floating Action Button to a vector using MaterialComponents, but it does work with appCompat.

Initially, I tried to change the theme in the xml using style=”…” as shown below, but it appears to be reverting back to the theme declared in the manifest which is AppTheme1. I know this because I tested it by switching the theme declared there. That is, when I switched it to AppTheme2, the vector loaded properly in the FAB, but it crashed elsewhere since I have MaterialComponents throughout the app.

Solution: I think the obvious solution for this would be to change the theme for just the Floating Action Button in question, but I don’t know how to do that. Any help much appreciated. Thank you!

         <com.google.android.material.floatingactionbutton.FloatingActionButton
                android_id="@+id/nationality"
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_layout_alignParentRight="true"
                android_layout_margin="10dp"
                android_scaleType="fitXY"
                app_srcCompat="@drawable/flag_united_states_of_america"
                app_borderWidth="0dp"
                style="@style/AppTheme2"
                app_maxImageSize="56dp" />

Themes:

<style name="AppTheme1"  parent="Theme.MaterialComponents.Light.NoActionBar" >

&&

<style name="AppTheme2"  parent="Theme.AppCompat.Light.NoActionBar" >

With MaterialComponents:

With AppCompat:

Manifest:

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

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

</manifest>

So when the theme is changed from AppCompat to Material Components, the image resource no longer applied properly to the Floating Action Button. So I just want to apply AppCompat for Floating Action Button but keep the Material Components as the main style.