Nativescript-angular: ActionBar ActionItems : Popup menu icon & color is not setting

[Onkarn92]

Hi, I am trying to set action-items with popup menu (Like Menu list in Android). Snapshots are as follows :

Image 1

Image 2

Problem :
I want to set custom icons/drawables to action-item's popup menu, but it's not setting any icons and default color is black (see three dots in image 1 @ top right corner), i am not able to change color of popup menu's icon.

I tried foll. code -

<ActionBar title="Compare">
  <ActionItem text="Export to PDF" icon="res://menu_white" ios.position="popup" android.position="popup">  </ActionItem>
   <ActionItem text="Settings" icon="res://menu_white" ios.position="popup" android.position="popup">  </ActionItem>
</ActionBar>

Is there any way to set custom icon for popup menus? or to set color for popup menu? The default color is black,but as i am having dark gray action bar, i want to set white color for popup menu (three dots). Please help me!

I want to achieve something like this -

[vakrilov]

You cannot style the action popup action items and the overflow button with CSS currently.
What you can do is to modify the actual android styles used in your app. The way to do that is to copy the values and values-v21 folders from your platforms folder (usually under <project>/platforms/android/src/main/res/ to App_Resources/android and modify the as you like. The modified styles will be used when you rebuild the app (just livesync will not be enough).

For example you can change the color of the overflow button by adding the folloing item in you AppTheme(styles.xml):

<item name="colorControlNormal">#fff</item>

[Onkarn92]

Great, It is working perfectly :+1: :) Thank you so much

[terhoraj]

Hey, how can I set only overflow button color because now in my case all list view scroll bars and textfield inputs are white too?!

[vakrilov]

We are deep in Android styling XML-s here. As I said there is not CSS way to do this currently (it is quite android-specific setting). Probably you can find some resources on how to style the android toolbar overflow button to get you started.

[terhoraj]

Yes, but I did this: <item name="colorControlNormal">#fff</item> and it works but is there anything that only affect only at overflow button?

[ghost]

@terhoraj can you please mention steps for telerik appbuilder ?
I tried as @vakrilov mentioned but it gives error while building.

[anodal88]

@vakrilov thank you so much.

[culunvb]

Thank for your advanced

[BhuvaneswariVajravel]

is there any way to change that icon into any other custom icon

[pacome2017]

Up, is there a way to change the image source for that popup menu button ?
So many articles about styles.xml on StackOverflow but none of the solutions i've read worked.

[shiv19]

Thanks @vakrilov,
adding <item name="colorControlNormal">#fff</item> in the AppTheme worked 😄

[clever9]

 add the following line to your app/App_Resources/Android/values/styles.xml  file:

<item name="android:textColorSecondary">#fff</item>

or by refrencing a color in your colors.xml file as following:

<item name="android:textColorSecondary">@color/{YOUR_COLOR_NAME}</item>

-------------------------------------------------------------

 NOTE: add it inside the AppThemeBase, it will look like the code below:

   <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
        <item name="colorPrimary">@color/ns_primary</item>
        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
        <item name="colorAccent">@color/ns_accent</item>
        <item name="android:textColorSecondary">@color/{YOUR_COLOR_NAME}</item>
   </style>

[sdc8879]

how to style the action pop-up menu?

[venkateshsj]

To change color of ActionBar overflow button color, add the following in styles.xml:-
<item name="colorControlNormal">#fff</item>
OR
<item name="android:textColorSecondary">@color/ns_white</item>

When you apply any of the above, it also changes the color of the bottom border of TextField, seemingly making it look borderless on a white background.

My environment is:

nativescript - 3.4.3 - Up to date
tns-core-modules - 3.4.1 - Up to date
tns-android - 3.4.2 - Up to date
tns-ios - 3.4.1 - Not installed

Is it not possible to only set a color for the overflow button from ActionBar without affecting anything else?

[kshipraShelke]

Is there any way to set color only for overflow icon because
#fff
is applied on every textFields borders and scrollbars

[ToniJM]

Hi, I found a way to modify only the color of the icon (three dots).
After a lot of research, I found that this "popup" icon is called Overflow Button.
Then the solution appeared in stackoverflow.
https://stackoverflow.com/questions/35932669/how-do-i-change-the-action-bar-overflow-button-color

first you have to define the color (or you can use one of those that are already defined)

app\App_Resources\Android\src\main\resvalues-v21\colors.xml

<resources>
    . . .
    <color name="my_white">#fff</color>
</resources>

Now you have to create a style that uses that color and then in the main theme of the app you have to apply that new style to the actionOverflowButtonStyle

app\App_Resources\Android\src\main\resvalues-v21\styles.xml

<resources>
    <!-- Application theme -->
    <style name="AppTheme" parent="AppThemeBase">
        . . .
        <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
    </style>

    <!-- This style is where you define the tint color of your overflow menu button -->
    <style name="MyActionButtonOverflow" parent="@style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:tint">@color/my_white</item>
    </style>
</resources>

this works perfect for me, I hope it helps.

[sowrensen]

@ToniJM Saved my day! Thanks a lot. :smiley:

[sandoche]

Is there a way to do it directly in the NativeScript code ? I implemented a DarkMode that can be activated in the app (check the screenshots below). I managed to do all the other transformation direcly in the NativeScript code.

[furkanaskin]

Hi, I found a way to modify only the color of the icon (three dots).
After a lot of research, I found that this "popup" icon is called Overflow Button.
Then the solution appeared in stackoverflow.
https://stackoverflow.com/questions/35932669/how-do-i-change-the-action-bar-overflow-button-color

first you have to define the color (or you can use one of those that are already defined)

app\App_Resources\Android\src\main\resvalues-v21\colors.xml

<resources>
  . . .
  <color name="my_white">#fff</color>
</resources>

Now you have to create a style that uses that color and then in the main theme of the app you have to apply that new style to the actionOverflowButtonStyle

app\App_Resources\Android\src\main\resvalues-v21\styles.xml

<resources>
    <!-- Application theme -->
    <style name="AppTheme" parent="AppThemeBase">
        . . .
        <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
    </style>

    <!-- This style is where you define the tint color of your overflow menu button -->
    <style name="MyActionButtonOverflow" parent="@style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:tint">@color/my_white</item>
    </style>
</resources>

this works perfect for me, I hope it helps.

Thank you so muchhhhhhh!!

[shiv19]

Note: if you are on NativeScript version below 5, then use Widget.Material.ActionButton.Overflow

[xuhcc]

To change the color of overflow button programmatically:

<ActionBar class="action-bar" (loaded)="onActionBarLoaded($event)">

onActionBarLoaded(args) {
    const actionBar = args.object;
    const overflowIcon = actionBar.nativeView.getOverflowIcon();
    overflowIcon.setColorFilter(
        android.graphics.Color.parseColor('#FF0000'),
        android.graphics.PorterDuff.Mode.SRC_ATOP,
    );
}

[ElecTreeFrying]

To change the color of overflow button programmatically:

<ActionBar class="action-bar" (loaded)="onActionBarLoaded($event)">

onActionBarLoaded(args) {
    const actionBar = args.object;
    const overflowIcon = actionBar.nativeView.getOverflowIcon();
    overflowIcon.setColorFilter(
        android.graphics.Color.parseColor('#FF0000'),
        android.graphics.PorterDuff.Mode.SRC_ATOP,
    );
}

@xuhcc Im using Angular with nativescript. how to define (see below) android.graphics.Color and android.graphics.PorterDuff.Mode.SRC_ATOP?.

import { Android } from 'nativescript-where?';

android: Android 

this.android.graphics.Color.parseColor('#FF0000')

sorry for the noob question

[xuhcc]

@ElecTreeFrying You need to install tns-platform-declarations package. I can't quickly find the documentation page which explains the process, but check this: https://docs.nativescript.org/core-concepts/accessing-native-apis-with-javascript

[ElecTreeFrying]

thanks @xuhcc found it here !

https://docs.nativescript.org/angular/core-concepts/accessing-native-apis-with-javascript#intellisense-and-access-to-the-native-apis-via-typescript