Nativescript: Ability to define a custom view in ActionItem

[PeterStaev]

Add ability for ActionItem to have a custom view associated with it, instead of using predefined icon/text. For example something like:

<ActionBar title="Something">
  <ActionBar.actionItems>
    <ActionItem ios.position="right" tap="doneTap">
        <ActionItem.actionView>
            <StackLayout>
                <Label text="Label1" backgroundColor="red"/>
                <Label text="Label2" backgroundColor="green"/>
            </StackLayout>
        </ActionItem.actionView>
    </ActionItem>
  </ActionBar.actionItems>
</ActionBar>

Implementation suggestion:
For iOS - use - (id)initWithCustomView:(UIView *)customView of the UIBarButtonItem. The catch is that in order to be able to handle tap the custom view must be a button. So the custom view must be added as a sub view to a UIButton. And then the UIButton should be passed to the initWithCustomView method.

For Android - use setActionView of MenuItem http://developer.android.com/reference/android/view/MenuItem.html#setActionView(android.view.View)

[enchev]

Hey @PeterStaev,

Great suggestion! If you have already something working you can submit pull request and we will gladly help with the implementation.

[PeterStaev]

@enchev not exactly like this, but have made something similar in a custom actionbar implementation. So will see if to plug it in the {N} code.

[deanle17]

I'm sorry but I quite don't get your solution. I'm quite new to NativeScript, do you have a simple sample app about ActionBar and ActionItem customization? I would appreciate really much.

[vchimev]

@LeDinhsmarp, a sample page could be found here: https://github.com/NativeScript/NativeScript/blob/master/apps/ui-tests-app/action-bar/action-view.xml.

[bfattori]

How about _without_ having to use XML? I'm trying to approach the ActionBar programmatically, yet all examples start with XML.

[enchev]

Hey @bfattori,

You can create some View (for example Label) and assign in to ActionItem actionView property:
https://github.com/NativeScript/NativeScript/blob/master/ui/action-bar/action-bar.d.ts#L124

[sitefinitysteve]

I LOVE YOU GUYS

[vjoao]

I LOVE YOU GUYS [2]

[chief10]

Does this work with "android.position='popup' ? For me, it is not working and places the inner items outside of the popup and into the action bar.

Here is the code for my action items -- the third one has the inner label:

 <ActionItem text="Change Layout" android.position="popup" (tap)="changeDisplayOfItems()"></ActionItem>
    <ActionItem text=" Sort by cost" android.position="popup" (tap)="sortItemsBy('size')"></ActionItem>
    <ActionItem android.position="popup" (tap)="addNewItem()">
      <Label text="Hi"></Label>
    </ActionItem>
    <ActionItem text="Account Info" (tap)="accountInfo()" android.position="popup"></ActionItem>

But this is what is happening:

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.