Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
Delphi

Creating an Overflow Menu on Android

During my CodeRage 8 session I talked about creating an Action Bar with an Overflow menu, so I wanted to provide some step-by-step instructions.

On Android, an Action Bar is a top (or top and bottom aligned) toolbar that is segmented into 4 key functional areas. One of those functional areas is an Overflow menu.

The ‘Overflow’ popup menu is commonly used for additional menu items on Android and accessed via the Action Bar. An Overflow menu is designed to give the application user quick access to additional/less often used features that are otherwise not accessible via more prominent menu items.

In FireMonkey, you can easily implement an Overflow menu through the use of TListBox.

In my example, I am using the following 4 components:

  • TToolbar
    • Alignment: alTop
  • TSpeedButton
    • Alignment: alRight
    • StyleLookUp: detailstoolbutton
    • Margin, Right: 5 (this is set in case you want to carry this UI over to iOS as well, to account for both bordered (iOS6) and non-bordered (iOS7) button sizes
    • TListBox with several items
      • Each of the four listboxitems has a bitmap and text defined via the ItemData property
      • Visibility has been set to False
      • Height has been set to 176px (to show the listbox border right below the last listbox item)
      • Anchors: akTop, akRight
      • TShadowEffect
        • Parented to TListBox 

        ListBox Item Properties:

        TSpeedButton properties:

        I used a larger (80x80px) icon for each listbox item bitmap so that the icons look nice on both lower resolution and high resolution displays.

        I also created the following on-click Event for my OverflowButton:

        procedure TForm10.OverflowButtonClick(Sender: TObject);
        begin
          OverflowMenu.Visible := not OverflowMenu.Visible;
          if OverflowMenu.Visible then
          begin
            OverflowMenu.ApplyStyleLookup;
            OverflowMenu.RealignContent;
        end;
        end;

          

        Below is a quick recording of the Overflow menu in action.

         gif7_5f00_9811-6997799

         

         

        Sincerely,

        Sarina  

         

        See What's New in 12.2 Athens See What's New in 12.2 Athens Dev Days of Summer 2-24

        Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
        Design. Code. Compile. Deploy.
        Start Free Trial   Upgrade Today

           Free Delphi Community Edition   Free C++Builder Community Edition

        About author

        Director of Product Management, Developer Tools Idera, Inc.

        Leave a Reply

        This site uses Akismet to reduce spam. Learn how your comment data is processed.

        IN THE ARTICLES