Floating action button: Error inflating class FloatingActionButton

Question

I'm trying to use the floating action button in xamarin.forms from the NuGet FAB.Forms package(github). I tried to make my code like the example provided in the Sample folder

Xamarin.Droid MainActivity.cs file

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    global::Xamarin.Forms.Forms.Init(this, bundle);

    FAB.Droid.FloatingActionButtonRenderer.InitControl();

    LoadApplication(new App());
}

---

Xamarin.ios AppDelegate.cs file

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();

    FAB.iOS.FloatingActionButtonRenderer.InitControl();

    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

---

Xamarin.portable App.cs file

public App(){MainPage = new LatestNews();}

---

LatestNews.xaml file

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
             x:Class="HuraApp.Pages.LatestNews">
    ...
    <fab:FloatingActionButton
              x:Name="fabBtn"
              Source="plus.png"
              Size="Normal"
              Clicked="Handle_FabClicked"
              NormalColor="Green"
              RippleColor="Red" />
    ...
</ContentPage>

---

LatestNews.xaml.cs file

void Handle_FabClicked(object sender, System.EventArgs e)
{
    this.DisplayAlert("Floating Action Button", "You clicked the FAB!", "Awesome!");
}

---

portable packages.config file

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="FAB.Forms" version="2.1.1" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Microsoft.Bcl" version="1.1.10" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Microsoft.Bcl.Build" version="1.0.21" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Microsoft.Net.Http" version="2.2.29" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Newtonsoft.Json" version="9.0.1" targetFramework="portable45-net45+win8+wpa81" />
  <package id="sameerIOTApps.Plugin.SecureStorage" version="1.2.1" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Xam.Plugin.Media" version="2.3.0" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Xamarin.Forms" version="2.3.2.127" targetFramework="portable45-net45+win8+wpa81" />
  <package id="Xamarin.Forms.Maps" version="2.3.2.127" targetFramework="portable45-net45+win8+wpa81" />
</packages>

---

droid package.config file

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="FAB.Forms" version="2.1.1" targetFramework="monoandroid60" />
  <package id="Microsoft.Bcl.Build" version="1.0.21" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.Animated.Vector.Drawable" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.Design" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v4" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.AppCompat" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.CardView" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.MediaRouter" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.RecyclerView" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.Vector.Drawable" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Forms" version="2.3.2.127" targetFramework="monoandroid60" />
  <package id="Xamarin.Forms.Maps" version="2.3.2.127" targetFramework="monoandroid60" />
  <package id="Xamarin.GooglePlayServices.Base" version="29.0.0.1" targetFramework="monoandroid60" />
  <package id="Xamarin.GooglePlayServices.Basement" version="29.0.0.1" targetFramework="monoandroid60" />
  <package id="Xamarin.GooglePlayServices.Maps" version="29.0.0.1" targetFramework="monoandroid60" />
</packages>

---

iOS package.config file

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="FAB.Forms" version="2.1.1" targetFramework="xamarinios10" />
  <package id="Microsoft.Bcl.Build" version="1.0.21" targetFramework="xamarinios10" />
  <package id="Xamarin.Forms" version="2.3.2.127" targetFramework="xamarinios10" />
  <package id="Xamarin.Forms.Maps" version="2.3.2.127" targetFramework="xamarinios10" />
</packages>

---

But when I run the application on android emulator it gives me the error message

`Android.Views.InflateException: Binary XML file line #1: Binary XML file line #1: Error inflating class android.support.design.widget.FloatingActionButton`

Why is that happening? What am I missing? and how can I solve this problem?

Answer 1

I had similar problem but i use Android. Just change the project parent theme to any Theme.AppCompat~, this resolved my problem, maybe your also. And add global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity to your MainActivity.cs.

[Activity(Label = "YourName", , Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
        {
            protected override void OnCreate(Bundle bundle)
            {
                base.OnCreate(bundle);

                global::Xamarin.Forms.Forms.Init(this, bundle);

                FAB.Droid.FloatingActionButtonRenderer.InitControl();

                LoadApplication(new App());
            }
        }

You can add theme like this in style.xml

<style
        name="MyTheme"
        parent="Base.AppTheme">
</style>

<style name="Base.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <item name="windowActionBar">false</item>
 <item name="windowNoTitle">true</item>
</style>