0

I added a toolbar item in my content page:

<ContentPage.ToolbarItems>
    <ToolbarItem IconImageSource="icon_dropdown.png"/>
</ContentPage.ToolbarItems>

What I want to have is when a user clicks on the toolbar item, a menu pops down like this. Animated in a way where it slides down revealing the content/menu items.

I've been searching online but the keywords being searched always takes me to spinner, and being new to C# and Xamarin Forms, I am unsure if a spinner is still what I want to achieve something like this because a spinner looks more of a dialog box.

Sample image of what I'm trying to do that I've photoshopped

Any help is highly appreciated. Thanks.

Chetan Rawat
  • 578
  • 3
  • 17
e700867
  • 41
  • 9
  • you can customize header or you can use silder overkit https://github.com/XAM-Consulting/SlideOverKit – Chetan Rawat Feb 28 '20 at 07:01
  • @ChetanRawat I don't want to customize the header since the action bar is from the element. Tried checking the SlideOverKit but I don't think I'm gonna be able to use it without documentation – e700867 Feb 28 '20 at 07:28

1 Answers1

0

I did some investigation, and find a way to change the position of the overflow popmenu by theme(code attached at the end in case you need it), but unable to change the width to match the whole screen, not sure if Android made some limitations in menu.

If you need a drop down list exact the same of your picture, spinner may not be a perfect choice either, you'd better create a new activity that overlays origin activity and customize the new activity layout, but it's not recommended considering performance. Also, you can find something in an earlier post to see if it gives you any idea.

add a new style:

  <style name="OverflowMenuStyle"  parent="@style/ThemeOverlay.AppCompat.Light">
    <item name="overlapAnchor">false</item><!--not overlay the toolbar-->
    <!--<item name="android:dropDownWidth">10dp</item>    not work-->
    <!--<item name="android:maxWidth">400dp</item> not work-->
    <item name="android:paddingRight">0dp</item>
    <!--dropDownVerticalOffset is the property you want to avoid overlay the toolbar-->
    <item name="android:dropDownVerticalOffset">4dp</item>
    <item name="android:dropDownHorizontalOffset">0dp</item>
    <item name="android:popupBackground">#BFBFBF</item>
  </style>

Android Resource layout folder's Toolbar.xml, change popupTheme to:

android:popupTheme="@style/OverflowMenuStyle"

add an item in MainTheme.Base style:

<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
Lia
  • 523
  • 2
  • 9