Necroqubus Necroqubus - 1 year ago 241
Android Question

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

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

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

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

Here is MVCE -

Answer Source

The reason why this is happening is that SetMeasuredDimension() adds shadow padding on KitKat and below:

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.

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download