Necroqubus Necroqubus - 1 month ago 40
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);
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.

Answer

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

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

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!

Comments