Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nativescript Angular Dialog 'ok' and 'cancel' button color is not set #67

Open
veeravetrivel opened this issue Aug 11, 2020 · 1 comment

Comments

@veeravetrivel
Copy link

veeravetrivel commented Aug 11, 2020

Which platform(s) does your issue occur on?

  • Android - 8
  • emulator or device. What type of device? Emulator - Google Pixel

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

  • CLI: (run tns --version to fetch it) 6.7.8
  • Cross-platform modules: (check the 'version' attribute in the
    node_modules/tns-core-modules/package.json file in your project)
    "tns-core-modules": "6.5.0",
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
    "tns-android": {
    "version": "6.5.3"
    }
  • Plugin(s): (look for the version numbers in the package.json file of your
    project and paste your dependencies and devDependencies here)
    dependencies
    "@angular/animations": "9.1.0",
    "@angular/common": "9.1.0",
    "@angular/compiler": "9.1.0",
    "@angular/core": "9.1.0",
    "@angular/forms": "9.1.0",
    "@angular/platform-browser": "9.1.0",
    "@angular/platform-browser-dynamic": "9.1.0",
    "@angular/router": "9.1.0",
    "@nativescript/angular": "~9.0.0",
    "@nativescript/core": "~6.5.5",
    "@nativescript/schematics": "9.0.0",
    "@nativescript/theme": "~2.2.1",
    "nativescript-angular": "9.0.0-next-2019-11-12-155500-01",
    "tns-core-modules": "6.5.0",
    devDependencies
    "@angular-devkit/build-angular": "0.901.0",
    "@angular/cli": "9.1.0",
    "@angular/compiler-cli": "9.1.0",
    "@angular/language-service": "9.1.0",
    "@nativescript/schematics": "~2.0.0",
    "@nativescript/tslint-rules": "~0.0.5",
    "@ngtools/webpack": "9.1.0",

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

Describe the steps to reproduce it.

Date and Time picker working are working fine as per the guideline #8 .
But 'ok' and 'cancel' button color is not set. How to set color and change text.
date

@davecoffin @pedromorgan @Logikgate @KevinBeckers @sebj54

@natebgurutech
Copy link

natebgurutech commented Jan 12, 2021

You'll have to style it the Android theme way.

I'll give you an example of how I got it working.

It would be nice if something like this was in the readme because this took me a while to get working, googling this stuff was a pain.

## App_Resources\Android\src\main\AndroidManifest.xml ##

  <application
    . . .
    android:theme="@style/AppTheme">

## App_Resources\Android\src\main\res\values\styles.xml ##

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppThemeBase" parent="Theme.MaterialComponents.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>
    </style>

    <style name="AppTheme" parent="AppThemeBase">
    </style>

    . . .
</resource>
## App_Resources\Android\src\main\res\values-v21\styles.xml ##

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppTheme" parent="AppThemeBase">
    <item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
    <item name="android:datePickerStyle">@style/CalendarDatePicker</item>
  </style>

  <style name="DatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
    <item name="android:colorAccent">#FF0000</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/DialogButtonStyle</item>
    <item name="android:buttonBarNeutralButtonStyle">@style/DialogButtonStyle</item>
  </style>

  <style name="DialogButtonStyle" parent="android:Widget.Material.Light.Button">
   <item name="android:textColor">#FFFFFF</item>
   <item name="android:backgroundTint">#FF0000</item>
  </style>

  <style name="CalendarDatePicker" parent="android:Widget.Material.Light.DatePicker">
    <item name="android:datePickerMode">calendar</item>
  </style>
  
  . . .
</resource>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants