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.