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

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\res\values-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\res\values-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.

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>

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?

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,
    );
}

 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>

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?!