Action Bar with Custom Icons and Context Menu


#1

I want to share a little bit of tips here since some people in the community were asking about it. Normally, we cant add any buttons inside Action Bar. We also cant add custom icons in the buttons.
Note that this is a tips for beginner and not for those folks that clearly much more experienced than me.:wink:

Here are the steps :

  1. Hide the default Action Bar
    By unchecking Title Visible on Screen Properties
    image

  2. Add A New Action Bar
    By adding a new horizontal layout with any colors that you like. Set properties to your liking. Below is an example.
    image

  3. Add A Shadow or Border
    By adding a new horizontal layout with darker or lighter color (depend on the Action Bar color) as a shadow or as a border. Set it’s Height to 2 px. Below is an example of the visual.
    image

  4. Add Buttons
    By adding some labels with custom icons by following @Nick tutorial here Use Material Icon Without web component. Use this block to trigger any actions that you want.
    image

  5. Add Context Menu
    By adding a new label, use above font. On the Text Properties type : &#xE5D4
    image.
    Add trigger to show context menu by using below blocks.
    image
    If you dont understand how to set Menu Item see here : About This Application Screen

  6. Finish.
    Below is the result.

111

And when you press menu :
222

NB : You can even add a search bar by adding a TextBox component. Set its background color same as ActionBar color. You can set it hidden by default and when certain button pressed, it can show up and automatically focused by using below blocks. Dont forget to add KitchenSink component.
image


How to create this?
#2

Can we change some how Menu’s background color? If yes, then how??


#3

Menu background color? I cant do this with AB or at least i dont know how to do that.


#4

Hi Ronin.
Nice tute. WHen I do it and press the menu icon, my menu shows up at the bottom of screen and not at top-right. Any Ideas? I’m using Marshmallow…

Cheers



#5

Thanks, @Lildinti. Hm, i have tried this using Lollipop and Marshmallow, both menu show up on top. I dont know what makes yours show up at the bottom. It could be a device related things.

Btw, nice bar.