ActionBar: ActionItems using Icon-Fonts


#1

Hi,

I am trying to use FontAwesome Icons as ActionItems in the ActionBar. The reason for that is that we want to provide a number of color templates in our app, so the background-color of the ActionBar may change from dark to bright and changing the color of a font-icon is easier than creating and providing multiple variations of each image resource.

This is what I am doing:

<ActionBar title="Index">
    <ActionBar.actionItems>

        <!-- Icon using image resource -->
        <ActionItem text="Default ActionItem" position="right" icon="res://reply" />

        <!-- Icon using custom ActionView -->
        <ActionItem text="Custom ActionItem" position="right">
            <ActionItem.actionView>
                <Label text="&#xf112;" cssClass="actionItemIcon" />
            </ActionItem.actionView>
        </ActionItem>

    </ActionBar.actionItems>
</ActionBar>

The problem is:
As you can see, using a Label with a FontAwesome Icon in the Actionbar does not keep the ‘ripple’ effect when tapping or selecting it. The tapping-effect is missed on Android and iOS.

It is awesome that NativeScript offers the opportunity to create custom ActionItems. But is there any way to keep the default native behaviour?

Best regards,
Felix


Font Awesome icons in Action Bar
How to use 'ActionItem.actionView' in angular+nativescript
#2

@bradwaynemartin - Mr. Ripple Effect, can you weigh in here pls?


#3

Yea… need to create an issue on the main repo so it can be improved. It’s how the layers are being added to the interface and unfortunately right now there is no work around that I know of. It would need to be improved/fixed. There is an issue for labels that lose their ripple effect here: https://github.com/NativeScript/NativeScript/issues/1778 As for iOS it again comes down to how that is being applied. I haven’t tried but I wonder if you set the backgroundColor of the <ActionItem> to a transparent value if the touch effect is visible then.


#4

I know, there is this fancy nativescript-ripple plugin by Brad Martin, but I hoped there is a way to keep this native ripple behaviour by default without installing another plugin.

As I just read here, this is already suggested for any view within a container and added to the milestone, so i am looking forward how it will work.


#5

Yea and I don’t think the plugin would even help with this specific instance. It might, never tried to be honest :smile: I don’t even use the plugin myself


#6

I trid the plugin, but it is not very comfortable to use for custom ActionItems :smile:

On iOS it is the same problem! There is no visible touch effect when I tap this FontIcon-ActionItem, even with backgroundColor set to transparent.


#7

Yea I would open an issue on the repo so the core team can eventually improve this


#8

Thanks. I created the issue here and they refer to the nativescript-ripple plugin :stuck_out_tongue_closed_eyes:


#9

Hot damn lol I’ll try to remember to comment on it in awhile when I get to work


#10

That would be awesome.
Thanks a lot! :beers:


#11

@felix-idf
did you find any workaround to retain the ripple effect?


#12

No, we had a discussion about the ripple effects in general here. This issue is set for the next milestone of the NativeScript framework (3.3) and then we would be able to add the ripple effect on any view, also on custom ActionItems. I hope so at least :smiley:. It would definitelybe awesome.


#13

Thanks for the quick response.
Yes that would be really awesome. :smile: