6

At my company we are using Ionic Framework and Cordova to create our mobile app, and upon starting the design of the app, we encountered an issue with the Android theme and how to set it without touching the AndroidManifest generated by Ionic build command.

Everywhere I look it is recommended to implement any customization from the config.xml file and never touch the AndroidManifest, but I cant seem to find any methods regarding the Android theme.

My question to you now: Is there a way to set the android theme for the application, for example Holo Theme, from the Config.xml without changing the AndroidManifest.xml generated?

Jad Salhani
  • 235
  • 2
  • 3
  • 7

4 Answers4

13

You can do this now without any third party plugin since 6.3.0. Just add this to the config.xml

<platform name="android">
    <edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:label='@string/activity_name']" mode="merge">
        <activity android:theme="@android:style/Theme.Translucent"></activity>
    </edit-config>
</platform>

and for me it was also neccessary to add 'xmlns:android="http://schemas.android.com/apk/res/android" ' to the widget tag

<widget id="de.bestellkind.restaurant" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
Simon Ludwig
  • 1,754
  • 1
  • 20
  • 27
  • It says "AAPT: error: resource android:style/Theme.Translucent.NoActionBar not found.". Does it work with Ionic 4? – didil Oct 26 '21 at 20:14
5

I know I'm late, but cordova-custom-config plugin made just to "update platform configuration files based on preferences and config-file data defined in config.xml."

for example:

  1. install the cordova-custom-config plugin: cordova plugin add cordova-custom-config --save

  2. Config.xml: <preference name="android-manifest/application/activity/@android:theme" value="@android:style/Theme.Holo"/>

This will add the attribute "android:theme" to your AndroidManfiset --> application --> activity with the value: @android:style/Theme.Holo.

kutomer
  • 734
  • 8
  • 17
4

To avoid touching the platforms directory, you could use a cordova hook. I am pretty terrible at node, but here is something that should do the trick. First npm install elementtree then create a sub folder after_prepare in the hooks folder. From there stick this code into a javascript file and change YourTheme.

Honestly, this is some pretty gross code, but should give you the idea.

#!/usr/bin/env node
var fs = require( "fs" );
var et = require('elementtree');
var rootdir = process.argv[2];
console.log(rootdir);
fs.open(rootdir + '/platforms/android/AndroidManifest.xml', 'r+',
    function (err, fd)  {
        if (err) {
            exitError(err);
        }
        fs.stat(rootdir + '/platforms/android/AndroidManifest.xml', getStats);

        function getStats(error, stats) {
            if (error) {
                exitError(error);
            }
            var buffer = new Buffer(stats.size);
            fs.read(fd, buffer, 0, buffer.length, null, fileRead);
        }

        function fileRead(error, bytes, buf) {
            var data = buf.toString("utf8", 0, buf.length);
            var androidXML = et.parse(data);
            var root = androidXML.getroot();
            var activityTag = root.find("application/activity");
            activityTag.attrib["android:theme"] = "@style/YourTheme";
            var outputBuffer = new Buffer(et.tostring(root), "utf-8");
            console.log(outputBuffer.toString());
            fs.closeSync(fd);
            fs.open(rootdir + '/platforms/android/AndroidManifest.xml', 'w', writeFile);
            function writeFile(error, fd) {
                if (error) {
                    exitError(error);
                }
                fs.write(fd, outputBuffer, 0, outputBuffer.length, 0, function( errw, written, str) {
                    if (errw) {
                        exitError(errw);
                    }
                    console.log('file written');
                    fs.close(fd);
                });
            }

        }
    });

function exitError(error) {
    console.log(error);
    process.exit(0);
}
laughingpine
  • 1,039
  • 14
  • 20
  • 1
    I thought about using a hook, but shouldn't there be something we can add to the config.xml file to change things like this? Considering the fact that phonegap build had a feature to write custom xml that would be merged with the AndroidManifest.xml – Jad Salhani Apr 08 '15 at 11:49
  • 1
    Again, this can be done via hooks. After poking around a bit more, it seems like this file adds some nice features (including themes): https://github.com/djett41/generator-ionic/blob/master/templates/hooks/after_prepare/update_platform_config.js – laughingpine Apr 08 '15 at 13:51
  • 1
    Oh very nice, i poked around a bit with the generator but didn't see these hooks. It opens doors to new configuration possibilities. Thanks for the help ! – Jad Salhani Apr 09 '15 at 08:43
  • 1
    For anyone using @laughingpine's linked hook. It works well, but make sure you check to make sure that the Activity name in preferenceMappingData actually matches up against the activity listed in the node: manifest>application>activity in AndroidManifest.xml. Ours was called MainActivity so we needed to change 4 of the preferenceMappingData xpath expressions to match up. – JimTheDev May 18 '15 at 19:15
  • I have created one style i.e custom_theme inside style.xml. So how I can add it dynamically while adding platform ? – Tripaty Sahu May 23 '19 at 18:48
1

You can use Header Color plugin:

Install the plugin:

$ ionic cordova plugin add cordova-plugin-headercolor $ npm install --save @ionic-native/header-color

Add configuration to config.xml <preference name="HeaderColor" value="#becb29" />

https://ionicframework.com/docs/native/header-color/

gabfiocchi
  • 190
  • 11