Nativescript: Missing touch-effect on Android and iOS when creating custom ActionItem with a Font icon

[felixkrautschuk]

Please, provide the details below:

When you create a custom ActionItem using the _actionView_ property, the ActionItem is loosing its native touch-behaviour (the ripple effect on tap and the Toast on longpress for Android and also the native touch effect for iOS).

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, there is already an issue for Labels loosing their ripple effect:
https://github.com/NativeScript/NativeScript/issues/1778
It is also suggested there, that any layout container (StackLayout, GridLayout,...) should animate the ripple effect on Android and the native touch effect on iOS and that this should be extended to any touchable view inside the container.
This should also be referred to any custom actionView within the ActionBar.

Which platform(s) does your issue occur on?

Android and iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.2
• Cross-platform modules: 2.4.4
• Runtime(s): 2.4.1
• Plugin(s): -

Please tell us how to recreate the issue in as much detail as possible.

In the following snippet I created an ActionBar with one 'default' ActionItem (using an Icon drawable resource) and a custom ActionItem using a FontAwesome icon, so that you can compare the behaviour between both approaches.

<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 result is demonstrated in the following GIF:
https://cdn-standard3.discourse.org/uploads/nativescript/original/1X/1de78f1463038d85be78daba01b60fd09d5a3894.gif

[NickIliev]

Hey @felix-idf

Indeed, the creation of custom ActionBarItem will remove the default ripple effect for touch.
However, you can apply it to your custom element with your implementation or even better - with the help of nativescript-ripple plugin particularly useful for similar occasions.

e.g.

• install the plugin

tns plugin add nativescript-ripple

• apply your own ripple effect

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
      xmlns:RL="nativescript-ripple" > <!-- apply the plugin's namespace -->

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

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

        </ActionBar.actionItems>
    </ActionBar>
</Page>

[felixkrautschuk]

Is there really no way for a future NativeScript release, not to remove the default touch effect by using an actionView?
I try to avoid installing another plugin, just to get back a native behaviour that should actually exist by default.

[m-abs]

@Felix-idf
it's a general issue with NativeScript, if you add a background-image on a button you also loose the native ripple on android.
And I completely agree with you that it shouldn't be necessary to install a plug-in to get it back.

[NickIliev]

@felix-idf , @m-abs When creating a custom view you are basically choosing a totally different implementation for your ActionItem. For example, in the specific case shown above, we have a label. The label does not have a ripple effect by default and although it is quite possible to force the upper container to "inherit" this effect wouldn't that goes against the idea of customisation? In my opinion, when using custom implementation for you ActionItem user should have full control of it including on the decision if it should have ripple effect or not.

[felixkrautschuk]

@NickIliev
Then it would be great to be able to choose between inheriting the default effect or overriding it.
@bradmartin suggested a similar thing for Labels (or any other touchable view) here:
https://github.com/NativeScript/NativeScript/issues/1778#issuecomment-197350438

And as I already explained at http://forum.nativescript.org/t/actionbar-actionitems-using-icon-fonts/359/9, I want to keep the default effect. The only reason why I use the custom actionView is that I don't want the icon of the ActionItem to be an image resource. It should be a Font icon (e.g. FontAwesome like in the sample above), because then it is easier to change the color (as an example) from CSS than creating multiple variations of each image resource.

[NickIliev]

@felix-idf I see your point - will reopen this issue and mark it as a Type:Feature and it will be discussed internally as well.

[felixkrautschuk]

Thanks a lot!

[m-abs]

@NickIliev
Great, thanks :+1:

I've a suggestion related to this, could you expose the :highlighted pseudo class for other views than just the button-view?

Reasoning behind this suggestion:
We create our buttons using layouts and our nativescript-accessibility-ext plugin to make more advanced buttons than those we can make with the built-in button-view.

For much the same reasons as @felix-idf mentioned we'd like to keep/re-add the ripple-effect on any touchable view on android and on iOS we'd like to define the highlighted state in CSS.

[NickIliev]

Hey guys, our team discussed this matter internally and as in nativeAndroid app if you create a custom layout they won't come with ripple effect we've decided that we should force the ripple on any custom made layouts.

[felixkrautschuk]

Can u estimate when we can expect the corresponding changes?

[rajasekarsp]

This is the feature which we need badly !

[alereisan]

Pump it up!

[LeoDupont]

Any news about this?

[AhmerAli]

how to apply this ripple puglin in nativescript angular template? any ideas?

[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.