AutoHide FloatingActionButton in Xamarin.Android
My main phone is an Android and as a news app I use a 3rd party aggregator that, al nearly all Android apps today is based on Material Design.
Using it everyday I couldn’t ignore a nice UI feature it exposes: it’s share button (a Material Design’s FloatinActionButton) fades out when you scroll the list vertically and it reappears when you scroll the list down.
Being curious, I wanted to know how to create that effect using Xamarin.Android.
This is my final result:
Since there’s a lot of setup involved I won’t go too much into code detail and setup, you can grab the project source code from here https://github.com/corradocavalli/Xamarin.Android.HideMyFAB
I’m assuming you have some basic knowledge of Material Design and related steps to enable it into a Xamarin.Android app so and I’ll go straight to the point: The view you see is made up of a CoordinatorLayout that hosts a NestedScrollView that contains a series of CardViews and in the bottom right corner there is our FloatingActionButton.
The trick of making it disappear is to add a custom behavior so that CoordinatorLayout knows that it has to invoke a behavior that takes care to hide/show it when something happen, in our case when user scrolls up or down.
This is the required behavior
Inside OnNestedStartScroll we inform the CoordinatorLayout that we want to receive scroll events when user scrolls vertically while inside OnNestedScroll we receive a reference to the FloatingActionButton (since we have applied the behavior to it) and depending on scroll direction we show/hide it.
The hard part of migrating this code to Xamarin was fixing the weird compilation issues I was having, I thank community guy fex for giving me the hint to add the [Register] attribute at the top to the class definition and inheriting from CoordinatorLayout instead of my initial FloatingAction. No idea if this is a bug, I’ve seen someone already filed it on Bugzilla but still without any reply.
Is now time to associate out behavior to the FloatinActionButton, I’ll do that using the standard approach to define the fully qualified path to the class inside strings.xml for better refactoring.
and now it’s just a matter of attach it to the button
If you use material design in your appls you’ll immediately recognize the now stanrdard elements, the only real new is the layout_behavior attribute applied to the FloatingActionButton that points to our custom behavior.
There are indeed simpler alternatives like James Montemagno component available here but looks like it is now deprecated and I think that, once you know how to fix the ACW compilation issues, knowing how to use material design behaviors wont hurt.
Enjoy
about me

Welcome! I'm Corrado, an Italian software consultant, Microsoft MVP, trainer and speaker and i use this space to post some thoughts about my daily working experiences. If you like blog contents just subscribe my rss feed.
Corrado's Blog 1.0
where i'm online
latest tweets
tags




- Recent Posts
- Recent Comments
- Ron - Xamarin Novice on Adding a splash screen to Xamarin Forms apps
- msdYqb on Xamarin Forms: CarouselView in action
- msdYqb on Adding a splash screen to Xamarin Forms apps
- Jose Cueva on Adding a splash screen to Xamarin Forms apps
- Ali on Xamarin.Android Status bar color not set
- Archives
- August 2018
- July 2018
- May 2018
- April 2018
- March 2018
- February 2018
- January 2018
- September 2016
- August 2016
- June 2016
- May 2016
- April 2016
- March 2016
- January 2016
- December 2015
- September 2015
- August 2015
- April 2015
- March 2015
- February 2015
- January 2015
- December 2014
- October 2014
- September 2014
- July 2014
- May 2014
- April 2014
- January 2014
- December 2013
- September 2013
- August 2013
- July 2013
- April 2013
- March 2013
- January 2013
- November 2012
- October 2012
- August 2012
- July 2012
- Categories
- Meta
- TagsAndroid Android emulator Binding Blend C# CarouselView Custom controls effects encoding Fiddler FloatingActionButton Genymotion german git Google GridView IDEA internet iOS ipconfig Lottie Material Design MVVM MvvmStack oAuth ParallaxView ScrollViewer Skype SnackBar Typescript UWP VirtualBox Visual Studio WebClient Win2D Windows 8 Windows Phone WinJS WinJS binding list WinRT Xamarin Xamarin.iOS Xamarin Forms XAML Xamrin