Create an Action Bar with Overflow Menu on Android

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. Using Appmethod, you can easily implement an Overflow menu through the use of TListBox.

Here are the step-by-step instructions.

In this example we 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:

Note: For the Overflow menu (TListBox), set alignment to alNone. Since you are setting anchors, you don’t want to set any alignment. Position the listbox where you want it to appear on the form (make sure it is not parented to another component), and then set the following Anchors: akTop, akRight. If you rotate the devices, you will see that that the listbox will remain where you had positioned it.

TSpeedButton properties:

I used a larger (80×80px) 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 GIF recording of the Overflow menu in action.