Shadow Padding bug for enlarged Floating Action Button for Xamarin.Android with AndroidSDK API 19 and less

Question

For my project, I need a bigger Floating Action Button (FAB) (I know it goes against principles of Google Material Design, but can't do much about that). I know that FAB has default and mini sizes to them, but I need bigger. To get bigger size, I made custom button class that inherits FAB class:

using System;
using Android.Content;
using Android.Content.Res;
using Android.Graphics;
using Android.Graphics.Drawables;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Java.Lang;
using Android.Support.Design.Widget;

public class BiggerFloatingActionButton : FloatingActionButton
{
    [Register(".ctor", "(Landroid/content/Context;)V", "")]
    public BiggerFloatingActionButton(Context context) : base(context)
    {
    }
    [Register(".ctor", "(Landroid/content/Context;Landroid/util/AttributeSet;)V", "")]
    public BiggerFloatingActionButton(Context context, IAttributeSet attrs) : base(context, attrs) { }
    [Register(".ctor", "(Landroid/content/Context;Landroid/util/AttributeSet;I)V", "")]
    public BiggerFloatingActionButton(Context attrscontext, IAttributeSet attrs, int defStyleAttr) : base(attrscontext, attrs, defStyleAttr) { }
    protected BiggerFloatingActionButton(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer) { }

    protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = this.MeasuredWidth;
        int height = this.MeasuredHeight;

        this.SetMeasuredDimension((int)(width * 1.75f), (int)(height * 1.75f));
        //base.OnMeasure(width, height);
    }
}

In result, it works, but there are shadow padding problems on Android API 19 and probably lower:

While on Android API 20 it looks alright:"

Does anyone know the clue why the former effect happens?

Usage of my custom FAB is as follows:

var buttons = new List<BiggerFloatingActionButton>();
foreach (var item in categories)
{
    var button = new BiggerFloatingActionButton(this);
    var iconIdentifier = this.Resources.GetIdentifier(item.Icon, "drawable", this.ApplicationContext.PackageName);
    var drawable = ContextCompat.GetDrawable(this, iconIdentifier);
    button.SetImageDrawable(drawable);
    buttons.Add(button);
}

var layout = this.FindViewById<LinearLayout>(Resource.Id.linear_main);
foreach(var button in buttons)
{
    layout.AddView(button);
}

For reference, I use the newest Xamarin for Visual Studio version (4.2.0.695) and newest Xamarin.Android (7.0.12). Thank you!

Edit: Here is MVCE - https://ufile.io/b691.

Can you upload a MVCE(stackoverflow.com/help/mcve) that demonstrates this issue in a project? You can add a link to a hosting provider in your post. — Jon Douglas
@JonDouglas Adeed MVCE to the question. Also you can download it here: ufile.io/b691 — Necroqubus

Jon Douglas Jon Douglas · Accepted Answer · 2016-10-04T19:49:35

The reason why this is happening is that SetMeasuredDimension() adds shadow padding on KitKat and below: https://android.googlesource.com/platform/frameworks/support/+/master/design/src/android/support/design/widget/FloatingActionButton.java#200

You can see the following comment:

   /**
     * Pre-Lollipop we use padding so that the shadow has enough space to be drawn. This method
     * offsets our layout position so that we're positioned correctly if we're on one of
     * our parent's edges.
     */

https://android.googlesource.com/platform/frameworks/support/+/master/design/src/android/support/design/widget/FloatingActionButton.java#729

Thus this can easily be fixed by removing any elevation which will remove the shadow via the CompatElevation property:

this.CompatElevation = 0f;

Now your large FAB should look great on < API 19!

Shadow Padding bug for enlarged Floating Action Button for Xamarin.Android with AndroidSDK API 19 and less

1 Answers