Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] Adds Shell Flyout Footer Template #6432

wants to merge 10 commits into
base: master


Copy link

commented Jun 6, 2019

Description of Change

Adds the Shell Flyout Footer Template implementation for Android meeting the following specs documented in the issue:


  • The footer should be fixed to the bottom of the flyout.
  • The menu list should not go behind it and obscure the menu items.
  • The footer should take any height.

Issues Resolved

  • fixes #6292 (Android ONLY)

API Changes



View FlyoutFooter { get; }



View IShellController.FlyoutFooter { get; }
object FlyoutFooter { get; set; } // Bindable Property
DataTemplate FlyoutFooterTemplate { get; set; } // Bindable Property

There are several non-public methods added to this class, but the additions above are all the public changes that mirror FooterHeader

Platforms Affected

  • Core/XAML (all platforms)
  • Android

Behavioral/Visual Changes

Changed the ShellFlyoutTemplatedContentRenderer to render an additional ViewGroup that is the fixed FlyoutFooter which appears at the bottom of the Flyout.



  • FrameLayout which is used to add the content of `FlyoutFooter.



  • Updated the LoadView logic to properly insert the content from FlyoutFooter.
  • Once the content is inserted the LoadView logic calculates the height of the footer and applies the margin to the RecyclerView. This change ensures the ShellContent and FlyoutItem does not get rendered behind the FlyoutFooter

Before/After Screenshots

This is a new feature so there is no before screenshot. The after screenshot is a gif demonstrating the new feature.


Testing Procedure

I updated the Xamarin.Forms.Sandbox project to use the new feature and completed my testing there.

  • Created Header and Footer
  • Added FlyoutItems and ShellContent
  • Added many items to force the RecyclerView to scroll and demonstrated the items are not hidden behind the FlyoutFooter

PR Checklist

  • Has automated tests
  • Rebased on top of the target branch at time of PR
  • Changes adhere to coding standard

Omitted Tests

There are currently no automated tests for this as the work focused on UI changes which can be difficult to write automation around. During the review process if we identify where tests are needed I am more than happy to add automated tests.


While working on this PR I noticed that ShellFlyoutContentRenderer didn't seem to be used and the
ShellFlyoutTemplatedContentRender render is used instead. Here is a code snippet that shows some stale code. I am not sure if this is a hold-over from an original attempt or needs to be removed or is there for a future implementation.

protected virtual IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
return new ShellFlyoutTemplatedContentRenderer(this);
//return new ShellFlyoutContentRenderer(this, AndroidContext);

ahoefling added some commits Jun 5, 2019

Updated layout to properly render header, content and footer. We stil…
…l need to adjust content to constrain to footer
RecyclerView adjusts the bottom margin based on the height of the foo…
…ter. This prevents the RecyclerView from rendering behind the footer as the footer needs to remain fixed non-scrollable.

This comment has been minimized.

Copy link

commented Jun 7, 2019

@ahoefling were you planning to work on the iOS side of this as well at all?


This comment has been minimized.

Copy link
Contributor Author

commented Jun 7, 2019

I can, but I don't have a business need for iOS at the moment as my project is targeting Android and that is what I built this for. As of right now I am not planning to add an iOS portion for this PR unless it is required to move this PR forward.

I can certainly start looking at the iOS implementation sometime in the next week or so.

@samhouts samhouts requested a review from paymicro Jun 7, 2019


This comment has been minimized.

Copy link

commented Jun 7, 2019

@ahoefling no worries on not working on iOS. I was only asking just so duplicate work didn't occur at all. This will get us to the Footer Templates a lot faster!! I have some work on ios I've been doing over here to smooth out the flyout so I'll probably just end up merging your work into that and then finishing up the footer on ios as well

We'll have to get an iOS implementation done before we can merge the Android one but this will get us there a lot faster!!

@samhouts samhouts moved this from In Review to In Progress in vNext (4.2.0) Jun 8, 2019


This comment has been minimized.

Copy link
Contributor Author

commented Jun 8, 2019

@PureWeen I'm glad this is going to make the implementation much easier and we will be able to use the work I started here. How should we proceed with getting this merged into your shell_fixes branch? Should I be expecting comments in a code review here or will you be taking ownership of this when you are ready to merge it into your branch?

Curious on our process forward with this.

Copy link

left a comment



This comment has been minimized.

Copy link

commented Jun 12, 2019


will you be taking ownership of this when you are ready to merge it into your branch?

Once the work for this is top of the queue then we'll just take what you've done here and add onto it. Since you've already done a lot of the guts then we should be able to move this up in priority a bit faster.

I have a bunch of existing work I need to merge over on ios so I'm hoping I can take what you did here and easily provide a footer 🤞

@samhouts samhouts removed this from In Progress in vNext (4.2.0) Jul 4, 2019

@samhouts samhouts added the API-change label Jul 9, 2019

@samhouts samhouts added this to In Progress in vNext+1 (master) Jul 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.