How to change the style of a single view within a fragment

Question

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.

Answer 1

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>