Change theme color android #154
Comments
|
Hello guy, Tks! |
|
Hi, I still lack knowledge of cordova plugins implementation here but I guess the best option might be to write a plugin which do the job without having to set it up "manually". Could someone give some direction about the best way to implement this feature? |
|
Howto use a custom android theme with the datepicker-plugin: Step 1Generate your custom <resources>
<color name="primaryColor">#0277BD</color>
<color name="primaryColorDark">#004C8C</color>
<style name="doneoTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
<!-- on startup the background and app-name is shown, we use the same color to see just background.. -->
<item name="android:textColorPrimary">@color/primaryColorDark</item>
<item name="android:colorBackground">@color/primaryColorDark</item>
<!-- native spinners etc are derived from this -->
<item name="android:colorAccent">@color/primaryColor</item>
<!-- AppSwitcher and Statusbar backgrounds-->
<item name="android:colorPrimary">@color/primaryColorDark</item>
<item name="android:colorPrimaryDark">@color/primaryColorDark</item>
<!-- the bottom nav-bar -->
<item name="android:navigationBarColor">@color/primaryColorDark</item>
<!-- date- and timepickers need their own themes -->
<item name="android:datePickerDialogTheme">@style/MyPickerDialogTheme</item>
<item name="android:timePickerDialogTheme">@style/MyPickerDialogTheme</item>
</style>
<style name="MyPickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="android:colorAccent">@color/primaryColor</item>
</style>
<!-- see https://stackoverflow.com/a/29014475 -->
</resources>Please note we defined a basic theme using our primaryColor for almost anything and Step 2Make sure our theme will be used for the app, therefore we prepare a hook-file #!/usr/bin/env node
// see https://stackoverflow.com/a/35128023
module.exports = function(ctx) {
var fs = ctx.requireCordovaModule('fs'),
path = ctx.requireCordovaModule('path'),
xml = ctx.requireCordovaModule('cordova-common').xmlHelpers;
var manifestPath = path.join(ctx.opts.projectRoot, 'platforms/android/app/src/main/AndroidManifest.xml');
var doc = xml.parseElementtreeSync(manifestPath);
if (doc.getroot().tag !== 'manifest') {
throw new Error(manifestPath + ' has incorrect root node name (expected "manifest")');
}
//adds the tools namespace to the root node
doc.getroot().attrib['xmlns:tools'] = 'http://schemas.android.com/tools';
//add tools:replace in the application node
doc.getroot().find('./application').attrib["android:theme"] = "@style/doneoTheme";
doc.getroot().find('./application/activity').attrib["android:theme"] = "@style/doneoTheme";
//write the manifest file
fs.writeFileSync(manifestPath, doc.write({indent: 4}), 'utf-8');
};Step 3Let Cordova do the work, add the following to <platform name="android">
...
<resource-file src="path/to/styles.xml" target="app/src/main/res/values/styles.xml" />
<hook src="hooks/use.android.theme.js" type="before_compile" />
</platform>The first command copies the Step 4To use our new theme with the datepickers provided by Cordoava-plugin-datepicker constructor(
public datePicker: DatePicker,
){}
public showPicker(){
let options = {
...
androidTheme: 0, //we need to set to 0, to use theme of MainActivity
...
}
this.datePicker.show(options)
.then( (value: Date) => {
...
})
.catch ((err) => {
...
});
}See here for details
|
|
Hi there. Is this post regarding custom colors verified to work? If so, I can't figure it out on my end. I'm using a Galaxy S8. I'm using Cordova CLI. I installed the plugin, and it works. Default, it shows up dark. I can change In step 1, I changed In step 2, I named it In step 3, I added those two middle lines into the In step 4, in my javascript, I added/changed What I EXPECT is that the theme would be light and the accent color would be red. But it isn't. It's the dark theme, and the accent color is whatever the default dark theme is. What am I doing wrong? Thanks! |
|
same problem here i fallowed the tutorial above but no changes accept that it turn to dark theme |
|
@znegva Could you please provide us with complete code example, i have tried your steps but nothing actually changes on the app. your help will be appreciated since i have to finish this project asap |
|
Difficult to diagnose from here, but please check if
If thats not the case, then something in step 3 gone wrong... Also please note, that these steps are tested to work with |
|
I have not yet had the chance to play with the original response. I will try to find time tonight. As a side note, I'm pretty sure I'm using Cordova 8.0.0.
On Wed, Apr 18, 2018 at 6:48 AM -0700, "Abdulla Ibrahim" <[email protected]> wrote:
same problem here i fallowed the tutorial above but no changes accept that it turn to dark theme
@mrphuzz have you figured out the solution ? (my hooks and themes folder is in resources/android/hooks or resources/android/theme)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
@znegva I am using phonegap to build the app, i cannot verify the AndroidManifest.xml file but i can verify that styels.xml was copied to the correct folder, thanks for the reply and looking forward for more instruction / help -cheers |
|
I verified I am using Cordova 8.0.0. If any other version information
would help, lease let me know.
So the styles.xml file was copied as it should. However, the
AndroidManifest.xml file was not updated with the
`android:theme="@style/doneoTheme"` line.
To experiment, I manually replaced
`android:theme="@android:style/Theme.DeviceDefault.NoActionBar"` with
`android:theme="@style/doneoTheme"` and my datepicker is now red, as it
should be.
I don't know enough about how `use.android.theme.js` works to know if the
problem lies in there or not, so I will just show you the contents of the
relevant files.
This is my folder structure:
/hooks
/styles.xml
/use.android.theme.js
/node_moduls
/platforms
/android/app/src/main/AndroidManifest.xml
/android/app/src/main/res/values/styles.xml
/plugins
/res
/www
/config.xml
This is my styles.xml file:
<resources>
<color name="primaryColor">#ff0000</color>
<color name="primaryColorDark">#004C8C</color>
<style name="doneoTheme"
parent="@android:style/Theme.DeviceDefault.NoActionBar">
<!-- on startup the background and app-name is shown, we use the
same color to see just background.. -->
<item name="android:textColorPrimary">@color/primaryColorDark</item>
<item name="android:colorBackground">@color/primaryColorDark</item>
<!-- date- and timepickers need their own themes -->
<item
name="android:datePickerDialogTheme">@style/MyPickerDialogTheme</item>
<item
name="android:timePickerDialogTheme">@style/MyPickerDialogTheme</item>
</style>
<style name="MyPickerDialogTheme"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorAccent">@color/primaryColor</item>
</style>
<!-- see https://stackoverflow.com/a/29014475 -->
</resources>
This is my use.android.theme.js file:
#!/usr/bin/env node
// see https://stackoverflow.com/a/35128023
module.exports = function(ctx) {
var fs = ctx.requireCordovaModule('fs'),
path = ctx.requireCordovaModule('path'),
xml = ctx.requireCordovaModule('cordova-common').xmlHelpers;
var manifestPath = path.join(ctx.opts.projectRoot,
'platforms/android/app/src/main/AndroidManifest.xml');
var doc = xml.parseElementtreeSync(manifestPath);
if (doc.getroot().tag !== 'manifest') {
throw new Error(manifestPath + ' has incorrect root node name
(expected "manifest")');
}
//adds the tools namespace to the root node
doc.getroot().attrib['xmlns:tools'] = 'http://schemas.android.com/tools
';
//add tools:replace in the application node
doc.getroot().find('./application').attrib["android:theme"] =
"@style/doneoTheme";
doc.getroot().find('./application/activity').attrib["android:theme"] =
"@style/doneoTheme";
//write the manifest file
fs.writeFileSync(manifestPath, doc.write({indent: 4}), 'utf-8');
};
This is my config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="net.test.datepicker" version="1.0.0" xmlns="
http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>datepicker</name>
<description>
A sample Apache Cordova application that responds to the
deviceready event.
</description>
<author email="[email protected]" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
<resource-file src="hooks/styles.xml"
target="app/src/main/res/values/styles.xml" />
<hook src="hooks/use.android.theme.js" type="before_compile" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-datepicker" spec="^0.9.3" />
<engine name="android" spec="^7.0.0" />
</widget>
To get the theme to work, I edited the AndroidManifest file directly and
this is the result:
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000"
android:versionName="1.0.0" package="net.phuzz.datepicker" xmlns:android="
http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true"
android:normalScreens="true" android:resizeable="true"
android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:hardwareAccelerated="true"
android:icon="@mipmap/icon" android:label="@string/app_name"
android:supportsRtl="true">
<activity
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:label="@string/activity_name" android:launchMode="singleTop"
android:name="MainActivity" android:theme="@style/doneoTheme"
android:windowSoftInputMode="adjustResize">
<intent-filter android:label="@string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="26" />
</manifest>
On Wed, Apr 18, 2018 at 1:59 PM, Martin Kausche <[email protected]>
wrote:
Difficult to diagnose from here, but please check if
the styles.xml had been copied to
platforms/android/app/src/main/res/values/styles.xml and
if your platforms/android/app/src/main/AndroidManifest.xml had been edited
correctly, the application-node and its <activity
android:name="MainActivity">-node should have
android:theme="@style/doneoTheme" applied.
If thats not the case, then something in step 3 gone wrong...
Also please note, that these steps are tested to work with cordova-android
7.0.0 (and probably above).
In prior versions the file-structure is somewhat different and you have to
adopt the location of the AndroidManifest.xml.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
On Wed, Apr 18, 2018 at 2:12 PM, Michael Redwine <
[email protected]> wrote:
… I have not yet had the chance to play with the original response. I will
try to find time tonight. As a side note, I'm pretty sure I'm using
Cordova 8.0.0.
On Wed, Apr 18, 2018 at 6:48 AM -0700, "Abdulla Ibrahim" <
***@***.***> wrote:
same problem here i fallowed the tutorial above but no changes accept that
> it turn to dark theme
> @mrphuzz <https://github.com/mrphuzz> have you figured out the solution
> ? (my hooks and themes folder is in resources/android/hooks or
> resources/android/theme)
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#154 (comment)>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AEYN_kFm4Hnm8xGQJjXqVrhYLOCQJmyiks5tp0Q2gaJpZM4HmrVg>
> .
>
|
|
hello @mrphuzz there could be 2 problems
I am also using Cordova 8.0.0 like your case |
|
Thanks for the attention to this.
I am not using Phonegap, just plain Cordova.
Regarding the line, the folder structure and the mechanics of how Android
apps are compiled are a complete mystery to me. But I thought that the
androidmanifest with the long path is the only one that is used by the
system when compiling the app. Is that not necessarily the case? I will
test this out when I get home later today. Otherwise, a related question,
is there a way to specify a different location for the Androidmanifest that
is used to compile the app?
…On Fri, Apr 20, 2018, 00:16 Abdulla Ibrahim ***@***.***> wrote:
hello @mrphuzz <https://github.com/mrphuzz>
i believe also the issue relies in the hooks file as its not being applied
from my examination,
there could be 2 problems
1.
if you are using phonegap cloud to build the application then cordova
hooks cannot work as i think they are not supported
2.
it might be that this line is trying to access AndroidManifest from
the wrong path (for me that is still an issue ) but looking at your file
structure it should be alright
var manifestPath =
path.join(ctx.opts.projectRoot,'platforms/android/app/src/main/AndroidManifest.xml');
in my case should be
var manifestPath =
path.join(ctx.opts.projectRoot,'platforms/android/AndroidManifest.xml');
I am also using Cordova 8.0.0 like your case
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#154 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEYN_jtevF6Dab8DKCieY8avnu2WiubTks5tqYtlgaJpZM4HmrVg>
.
|
|
Hello @mrphuzz am not quite sure about the specification of android manifest but if you fallowed the steps described by @znegva, and if the theme does not apply as you said and that you have ti manually specify the theme. this means that the problem is in the hooks file. am facing the same issue and i believe that the hooks is not being applied. in your case all the steps above should be correct. GL |
|
Here i will describe what should you do to get custom themes to apply if you are using Phonegap (cloud) to build your app. Step1:Fallow @znegva step 1 Generate your custom Please note we defined a basic theme using our primaryColor for almost anything and In my case i have modified couple of other variables fallowing this post the first theme as it applies for dialogs Step2:Let Cordova do the work, add the following line to Step3:To use our new theme with the datepickers provided by Cordoava-plugin-datepicker See here for details Step4:Fallow the installation process of After compiling and building the apk using once you have saved your changes execute: With -cheers |
|
Hey, I want to change the datePicker color also. I have tried all the steps described in the tutorial. application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/doneoTheme" However when I run ionic cordova run android I am getting the following error: **C:\platforms\android\build\intermediates\manifests\full\debug\AndroidManifest.xml:45: error: Error: No resource found that matches the given name (at 'theme' with value '@style/doneoTheme').
my config.xml : Do you have any idea what is wrong? Thanks beforehand. |
|
Sorry, I don't now guy! Because I'm long time ago without work with this component!
Good Luck!
…________________________________
From: Lyalik <[email protected]>
Sent: Wednesday, August 8, 2018 8:51 AM
To: VitaliiBlagodir/cordova-plugin-datepicker
Cc: Bruno de Oliveira; Comment
Subject: Re: [VitaliiBlagodir/cordova-plugin-datepicker] Change theme color android (#154)
Hey, I want to change the datePicker color also. I have tried all the steps described in the tutorial.
I have checked and in AndroidManifest.xml the doneoTheme is applied. Here is the code:
However when I run ionic cordova run android I am getting the following error:
C:\platforms\android\build\intermediates\manifests\full\debug\AndroidManifest.xml:45: error: Error: No resource found that matches the given name (at 'theme' with value '@style/doneoTheme').
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':processDebugResources'.
com.android.ide.common.process.ProcessException: Failed to execute aapt
my config.xml :
Do you have any idea what is wrong?
Thanks beforehand.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub<#154 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABt7CpXIGwSKc-Jrmr92ZC1D2d6d6LS2ks5uOtDbgaJpZM4HmrVg>.
|
|
Worked here, cheers! |
Love the plugin, but i was wondering if there is any way to change the background color of the picker for example i'm using the THEME_DEVICE_DEFAULT_LIGHT like in the photo below and it would be awesome if i could change the green to another color
The text was updated successfully, but these errors were encountered: