Change Dialogs Buttons Color

[AgustinV08]

Is there a way to change the dialogs button color? Have tried different things and nothing has worked

[farfromrefug]

For now you can only have the same color for all buttons: https://github.com/nativescript-community/ui-material-components/blob/master/src/dialogs/dialogs.android.ts#L124

[AgustinV08]

In iOS the color of the buttons doesn't change @farfromrefug

        prompt({
            title: localize("alerts.login.forgot.title"),
            message: localize("alerts.login.forgot.message"),
            titleFont: new Font("CerebriSans", 18, "normal", "700"),
            messageFont: new Font("CerebriSans", 12, "normal", "400"),
            hintText: localize("forms.auth.email"),
            buttonFont: new Font("CerebriSans", 12, "normal", "400"),
            okButtonText: localize("alerts.login.forgot.send"),
            buttonTitleColor: new Color("red"),
            buttonInkColor: new Color("red"),
            cancelButtonText: localize("alerts.login.forgot.cancel"),
            autoFocus: true,
            inputType: inputType.email,
            capitalizationType: capitalizationType.none
        })

[farfromrefug]

@AgustinV08 can you give your Material pod version? (podfile lock in platforms/ios folder)

[AgustinV08]

119.3.0

[farfromrefug]

@AgustinV08 ok not sure what s happening wont have a simple solution. If you want to change your global theme you can use the themer

[AgustinV08]

Okay thanks, hope there is a fix later

[ray007]

I seem to have a related problem: all my dialog button appear greyed out (but work).
Any idea what could have caused this?

[farfromrefug]

@ray007 no idea without sample code. please first look at the demos to see correct behavior, then go from there.

[ray007]

It means the buttons for the dialog are almost invisible when trying to use material ui dialogs.

Example with a login dialog:

[bpop1]

I'm experiencing the same issue with v5.2.8
Buttons label inside dialogs seem to have a light grey color.
Settings any of the buttonTitleColor / buttonInkColor options didn't help.

[farfromrefug]

do you have a CSS section for button or mdbutton? do you set a color there?
what colors do you set on the themer ?

[agonper]

Same here @farfromrefug. Fresh NS6 Angular project (using v3.3.2). Bottom navigation bar works great but dialogs have multiple issues (on Android, couldn't test iOS):

1. Color overrides both on titles and buttons show no effect.
2. Title alignment changes show no effect.
3. Title icon cannot be applied (seems an AndroidX version issue, see stack trace at the bottom).

I made a repo: https://github.com/agonper/ns-material-test. If you run the Android demo you'll find 4 buttons to show 4 different dialogs:

• The first, second and third show examples of issues 1 and 2. In addition, the fourth is an example of issue 3.

Any guidance will be appreciated. Many thanks in advance.

---

JS: Error: java.lang.Exception: Failed resolving method setIcon on class androidx.appcompat.app.AlertDialog$Builder
JS: ERROR Error: Uncaught (in promise): Error: java.lang.Exception: Failed resolving method setIcon on class androidx.appcompat.app.AlertDialog$Builder
JS: createAlertDialogBuilder(file: node_modules\nativescript-material-dialogs\dialogs.android.js:20:0)
JS:     at (file: node_modules\nativescript-material-dialogs\dialogs.android.js:218:0)
JS:     at ZoneAwarePromise(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:902:0)
JS:     at confirm(file: node_modules\nativescript-material-dialogs\dialogs.android.js:206:0)
JS:     at push../app/browse/browse.component.ts.BrowseComponent.showDestructiveDialog(file: src\app\browse\browse.component.ts:68:16)
JS:     at eval(:49:31)
JS:     at handleEvent(file: node_modules\@angular\core\fesm5\core.js:29239:0)
JS:     at callWithDebugContext(file: node_modules\@angular\core\fesm5\core.js:30309:0)
JS:     at debugHandleEvent(file: node_modules\@angular\core\fesm5\core.js:30036:0)
JS:     at dispatchEvent(file:///data/data/org.nativescri...

[agonper]

Identical behaviour in NS7 with latest version of the plugin. Check the same project migrated to NS7 in a new branch: https://github.com/agonper/ns-material-test/tree/ns7

I have the feeling like it has something to do with native packages. Based on build output, it doesn't seems to me that the needed aar files are being included (perhaps they're transitive dependencies, I don't know), more concretely, these ones: https://github.com/nativescript-community/ui-material-components/blob/master/packages/core/platforms/android/include.gradle

Any help will be appreciated. I've checked all the demos and I cannot spot any other differences with my project. It is kind of difficult to debug because demos do not even compile / run 😢 neither on Windows or macOS (i can open a separate issue if needed).

---

Gradle build...
         + setting applicationId
         + applying user-defined configuration from C:\Users\alber\DevProjects\web\ns-tests\ns-material-test\App_Resources\Android\app.gradle
         + using android X library androidx.legacy:legacy-support-v4:1.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: C:\Users\alber\DevProjects\web\ns-tests\ns-material-test\node_modules\@nativescript-community\ui-material-dialogs\platforms\android\ui_material_dialogs.aar
         + adding aar plugin dependency: C:\Users\alber\DevProjects\web\ns-tests\ns-material-test\node_modules\@nativescript\core\platforms\android\widgets-release.aar
         + adding aar plugin dependency: C:\Users\alber\DevProjects\web\ns-tests\ns-material-test\node_modules\@nativescript-community\ui-material-core\platforms\android\ui_material_core.aar
         + adding aar plugin dependency: C:\Users\alber\DevProjects\web\ns-tests\ns-material-test\node_modules\@nativescript-community\ui-material-textfield\platforms\android\ui_material_textfield.aar
         + adding aar plugin dependency: C:\Users\alber\DevProjects\web\ns-tests\ns-material-test\node_modules\@nativescript-community\text\platforms\android\text.aar
Project successfully built.

[farfromrefug]

almost surely your issue is because setIcon is not called with the right parameter. you need to debut to see what parameter is passed to setIcon

[agonper]

Hi @farfromrefug, thanks for your response. Indeed, I dived into the code and the method is there but the JNI doesn't seems to be able to find the appropriate override based on the icon resource passed by parameter. I dug into Android docs and it seems to be because setIcon expects a Drawable (among other options) to be passed by parameter whereas ImageSource.android contains a Bitmap type. Bitmaps can be interpreted as Drawables by wrapping them inside a BitmapDrawable type. However, this didn't work either. Anyway, it should be possible to mimic a similar behaviour with a custom title view (hadn't tested yet).

To the major issue here (see screenshots attached). I've tried configuring the themer (in main app component, because in main.ts I couldn't due to Android bindings not being ready yet) but this doesn't seems to take effect. I also migrated to MatherialTheme in styles.xml file and even tried overriding the colors via the alert API but none of this methods worked to change the color of the material controls. The later, I asume could be somehow related to #156.

Eventhough this does not work, I should be able to change the colors of the controls for all the application and I supposed I had to do this using the themer (although I would prefer to do it by CSS, but I don't see how). What I'm missing here? Please, I would like to help fixing this issues but I'm lacking context to understand better how this works in overall. Sadly demos don't help a lot on this matter, because each one is configured differently and with the last CLI they don't seem to be operational due to runtime and compilation errors.

Find attached some screenshots about the problem I'm highlighting (Android). See that all the controls are in grey and with very little contrast. Thanks in advance.

[farfromrefug]

@agonper the themer is only for iOS. On android you need to to do it the android way and theme material colors through style files in android res.
I would like it to be otherwise but it is impossible!

As for the setIcon i ll fix it

[agonper]

My bad, changing the hex codes in the colors.xml was what I was missing. It is very easy to unsee it when you're comparing your code with the demo code. Also about the themer, didn't see anywhere explicitly saying it is iOS only (aside from an isIOS if guard inside the Vue demo 😶). Could be good to have this "overall" setup tips in the main readme for everybody to know how to configure the core library.

Btw, I've applied the changes of #156 inside my node_modules and they still apply, and indeed allow to change the text color of the buttons dynamically (in case someone wants to give a "danger" style to a specific dialog). Regarding this, could be good to be able to specify the color of each button (or its emphasis) individually to allow highlighting certain actions. I see the color change feature easy to implement in Android but I don't see how it can be done in iOS (or if it is even possible). Individually, I mean. Conversely, emphasis seems a thing easy to implement in iOS but I don't see how it can be done in Android.

They're just some ideas though. Nice job porting this to NS, I'll pending to see when the setIcon feature works again. Many thanks @farfromrefug 😃.

[farfromrefug]

@agonper good ideas. tbh it is more a question of free time to worm on all this. if you want to make a PR you are welcome

[agonper]

Thanks @farfromrefug, indeed I agree with you in the question of time availability 😉. From here I see some things to do in order to improve the plugins:

• Update main README file with an explanation about overall application theming/styling both for Android and iOS
• Add support for individual dialog button coloring (Android, in principle) and emphasis (iOS, in principle)
• Update dialog docs with a detailed API description
• Merge somehow fix(android): make dialog color options take effect and update API calls #156 changes
• Fix the Android setIcon dialog thing

I can work on the first three things, I cannot commit to an ETA but I can promise I'll do something from time to time (perhaps during the weekends 😛). I would appreciate if you could work on the last two (if possible) and to have a look to see why demos don't work following setup instructions (I can open an issue with the details of the issues I'm encountering). I think this later aspect is crucial to lower the barrier for others to contribute and use these fantastic plugins we have right here 😉

[farfromrefug]

good with me ! thanks

[agonper]

Many thanks @farfromrefug, for adding the docs about styling. I have the other things in my queue, I'll ping you via Slack if I start working on any of the points in order to avoid duplicating efforts.

I think that (updating the docs) solves this issue which could be closed now.

[dvlpr91]

I am using nativescript version 8 and developing an android application. (nativescript with svelte)
The buttonInkColor and buttonTitleColor options do not work, and even if I put the color value of Confirm or Confirm in the css file, it is not applied.
Somebody help me.

[farfromrefug]

@dvlpr91 should be fixed in 6.2.5
EDIT: plase next time open a. new issue