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.

Sign up for GitHub

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

Jump to bottom

feat: add monochrome app icon support #1550

Merged
merged 16 commits into from
Apr 9, 2023
Merged

feat: add monochrome app icon support #1550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
bcdc0ee
Added the monochrome version for Cordova's icon
liyamahendra Jan 24, 2023
4581e34
android: modified the ic_launcher.xml to include the monochrome drawable
liyamahendra Jan 24, 2023
d672eb0
android: replaced monochrome image with rasterized images
liyamahendra Jan 25, 2023
c68adc4
android: Added support for custom monochrome icons defined in config.xml
liyamahendra Jan 25, 2023
f61c83c
android: Updated Tests
liyamahendra Jan 25, 2023
4fd38a1
android: wrapped inside if(monochrome)
liyamahendra Jan 25, 2023
b8f168c
android: Update templates/project/res/mipmap-hdpi-v26/ic_launcher.xml
liyamahendra Jan 25, 2023
0924a1d
Update lib/prepare.js
liyamahendra Jan 25, 2023
0e7396e
android: Update templates/project/res/mipmap-ldpi-v26/ic_launcher.xml
liyamahendra Jan 25, 2023
b059d70
android: Update templates/project/res/mipmap-mdpi-v26/ic_launcher.xml
liyamahendra Jan 25, 2023
501235b
android Update templates/project/res/mipmap-xhdpi-v26/ic_launcher.xml
liyamahendra Jan 25, 2023
1fe7955
android: Update templates/project/res/mipmap-xxhdpi-v26/ic_launcher.xml
liyamahendra Jan 25, 2023
21f26f2
android: Update templates/project/res/mipmap-xxxhdpi-v26/ic_launcher.xml
liyamahendra Jan 25, 2023
ba7a295
android: Update lib/prepare.js
liyamahendra Jan 25, 2023
322e659
Resolved lint errors
liyamahendra Feb 1, 2023
ce6314b
fix: test failure
liyamahendra Apr 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
59 changes: 57 additions & 2 deletions lib/prepare.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -703,8 +703,10 @@ function updateIcons (cordovaProject, platformResourcesDir) {
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher.png'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher_foreground.png'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher_background.png'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher_monochrome.png'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher_foreground.xml'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher_background.xml'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher_monochrome.xml'),
mapImageResources(cordovaProject.root, platformResourcesDir, 'mipmap', 'ic_launcher.xml')
);

Expand All @@ -728,17 +730,23 @@ function updateIconResourceForAdaptive (preparedIcons, resourceMap, platformReso
// project's config.xml location, so we use it as base path.
let background;
let foreground;
let monochrome;
let targetPathBackground;
let targetPathForeground;
let targetPathMonochrome;

for (const density in android_icons) {
let backgroundVal = '@mipmap/ic_launcher_background';
let foregroundVal = '@mipmap/ic_launcher_foreground';
const monochromeVal = '@mipmap/ic_launcher_monochrome';

background = android_icons[density].background;
foreground = android_icons[density].foreground;
monochrome = android_icons[density].monochrome;

if (!background || !foreground) {
const isAdaptiveIcon = background && foreground;
const isMonochromeIcon = monochrome && isAdaptiveIcon;
if (!isMonochromeIcon || !isAdaptiveIcon) {
// This icon isn't an adaptive icon, so skip it
continue;
}
Expand Down Expand Up @@ -769,12 +777,34 @@ function updateIconResourceForAdaptive (preparedIcons, resourceMap, platformReso
resourceMap[targetPathForeground] = android_icons[density].foreground;
}

if (monochrome) {
if (path.extname(path.basename(monochrome)) === '.xml') {
// Vector Use Case
targetPathMonochrome = getAdaptiveImageResourcePath(platformResourcesDir, 'mipmap', density, 'ic_launcher_monochrome.xml', path.basename(android_icons[density].monochrome));
resourceMap[targetPathMonochrome] = android_icons[density].monochrome;
} else if (path.extname(path.basename(monochrome)) === '.png') {
// Images Use Case
targetPathMonochrome = getAdaptiveImageResourcePath(platformResourcesDir, 'mipmap', density, 'ic_launcher_monochrome.png', path.basename(android_icons[density].monochrome));
resourceMap[targetPathMonochrome] = android_icons[density].monochrome;
}
}

// create an XML for DPI and set color
const icLauncherTemplate = `<?xml version="1.0" encoding="utf-8"?>
let icLauncherTemplate = '';
if (monochrome) {
icLauncherTemplate = `<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="` + backgroundVal + `" />
<foreground android:drawable="` + foregroundVal + `" />
<monochrome android:drawable="` + monochromeVal + `" />
</adaptive-icon>`;
} else {
icLauncherTemplate = `<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="` + backgroundVal + `" />
<foreground android:drawable="` + foregroundVal + `" />
</adaptive-icon>`;
}

const launcherXmlPath = path.join(platformResourcesDir, 'mipmap-' + density + '-v26', 'ic_launcher.xml');

Expand All @@ -788,6 +818,7 @@ function updateIconResourceForAdaptive (preparedIcons, resourceMap, platformReso
if (default_icon && !android_icons.mdpi) {
let defaultTargetPathBackground;
let defaultTargetPathForeground;
let defaultTargetPathMonochrome;

if (background.startsWith('@color')) {
// Colors Use Case
Expand All @@ -814,6 +845,18 @@ function updateIconResourceForAdaptive (preparedIcons, resourceMap, platformReso
defaultTargetPathForeground = getAdaptiveImageResourcePath(platformResourcesDir, 'mipmap', 'mdpi', 'ic_launcher_foreground.png', path.basename(default_icon.foreground));
resourceMap[defaultTargetPathForeground] = default_icon.foreground;
}

if (monochrome) {
if (path.extname(path.basename(monochrome)) === '.xml') {
// Vector Use Case
defaultTargetPathMonochrome = getAdaptiveImageResourcePath(platformResourcesDir, 'mipmap', 'mdpi', 'ic_launcher_monochrome.xml', path.basename(default_icon.monochrome));
resourceMap[defaultTargetPathMonochrome] = default_icon.monochrome;
} else if (path.extname(path.basename(monochrome)) === '.png') {
// Images Use Case
defaultTargetPathMonochrome = getAdaptiveImageResourcePath(platformResourcesDir, 'mipmap', 'mdpi', 'ic_launcher_monochrome.png', path.basename(default_icon.monochrome));
resourceMap[defaultTargetPathMonochrome] = default_icon.monochrome;
}
}
}

return resourceMap;
Expand Down Expand Up @@ -884,6 +927,11 @@ function prepareIcons (icons) {
const favor = {};

// populating found icon.
if (icon.background && icon.foreground && icon.monochrome) {
found.background = icon.background;
found.foreground = icon.foreground;
found.monochrome = icon.monochrome;
}
if (icon.background && icon.foreground) {
found.background = icon.background;
found.foreground = icon.foreground;
Expand All @@ -892,6 +940,11 @@ function prepareIcons (icons) {
found.src = icon.src;
}

if (default_icon.background && default_icon.foreground && default_icon.monochrome) {
favor.background = default_icon.background;
favor.foreground = default_icon.foreground;
favor.monochrome = default_icon.monochrome;
}
if (default_icon.background && default_icon.foreground) {
favor.background = default_icon.background;
favor.foreground = default_icon.foreground;
Expand Down Expand Up @@ -929,8 +982,10 @@ function cleanIcons (projectRoot, projectConfig, platformResourcesDir) {
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher.png'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher_foreground.png'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher_background.png'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher_monochrome.png'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher_foreground.xml'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher_background.xml'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher_monochrome.xml'),
mapImageResources(projectRoot, platformResourcesDir, 'mipmap', 'ic_launcher.xml')
);

Expand Down
33 changes: 26 additions & 7 deletions spec/unit/prepare.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,10 @@ function createResourceMap (target) {
if (!target || target === 'ic_launcher.png') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher.png')] = null;
if (!target || target === 'ic_launcher_foreground.png') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher_foreground.png')] = null;
if (!target || target === 'ic_launcher_background.png') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher_background.png')] = null;
if (!target || target === 'ic_launcher_background.png') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher_monochrome.png')] = null;
if (!target || target === 'ic_launcher_foreground.xml') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher_foreground.xml')] = null;
if (!target || target === 'ic_launcher_background.xml') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher_background.xml')] = null;
if (!target || target === 'ic_launcher_background.xml') resources[path.join(PATH_RESOURCE, mipmap, 'ic_launcher_monochrome.xml')] = null;

if (
!mipmap.includes('-v26') &&
Expand Down Expand Up @@ -136,10 +138,14 @@ describe('prepare', () => {
return createResourceMap('ic_launcher_foreground.png');
} else if (resourceName.includes('ic_launcher_background.png')) {
return createResourceMap('ic_launcher_background.png');
} else if (resourceName.includes('ic_launcher_monochrome.png')) {
return createResourceMap('ic_launcher_monochrome.png');
} else if (resourceName.includes('ic_launcher_foreground.xml')) {
return createResourceMap('ic_launcher_foreground.xml');
} else if (resourceName.includes('ic_launcher_background.xml')) {
return createResourceMap('ic_launcher_background.xml');
} else if (resourceName.includes('ic_launcher_monochrome.xml')) {
return createResourceMap('ic_launcher_monochrome.xml');
} else if (resourceName.includes('ic_launcher.xml')) {
return createResourceMap('ic_launcher.xml');
}
Expand Down Expand Up @@ -305,7 +311,9 @@ describe('prepare', () => {
return [mockGetIconItem({
density: 'mdpi',
background: 'res/icon/android/mdpi-background.png',
foreground: 'res/icon/android/mdpi-foreground.xml'
foreground: 'res/icon/android/mdpi-foreground.xml',
monochrome: 'res/icon/android/mdpi-monochrome.png'

})];
};

Expand Down Expand Up @@ -343,7 +351,8 @@ describe('prepare', () => {
return [mockGetIconItem({
density: 'mdpi',
background: 'res/icon/android/mdpi-background.png',
foreground: 'res/icon/android/mdpi-foreground.png'
foreground: 'res/icon/android/mdpi-foreground.png',
monochrome: 'res/icon/android/mdpi-monochrome.png'
})];
};

Expand All @@ -352,6 +361,7 @@ describe('prepare', () => {
const phaseOneModification = {};
phaseOneModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_foreground.png')] = 'res/icon/android/mdpi-foreground.png';
phaseOneModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_background.png')] = 'res/icon/android/mdpi-background.png';
phaseOneModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_monochrome.png')] = 'res/icon/android/mdpi-monochrome.png';
const phaseOneUpdatedIconsForAdaptive = Object.assign({}, resourceMap, phaseOneModification);

updateIconResourceForAdaptiveSpy = jasmine.createSpy('updateIconResourceForAdaptiveSpy');
Expand All @@ -363,6 +373,7 @@ describe('prepare', () => {
const phaseTwoModification = {};
phaseTwoModification[path.join(PATH_RESOURCE, 'mipmap-mdpi', 'ic_launcher.png')] = 'res/icon/android/mdpi-foreground.png';
phaseTwoModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_background.png')] = 'res/icon/android/mdpi-background.png';
phaseTwoModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_monochrome.png')] = 'res/icon/android/mdpi-monochrome.png';
const phaseTwoUpdatedIconsForLegacy = Object.assign({}, phaseOneUpdatedIconsForAdaptive, phaseTwoModification);

updateIconResourceForLegacySpy = jasmine.createSpy('updateIconResourceForLegacySpy');
Expand Down Expand Up @@ -400,7 +411,8 @@ describe('prepare', () => {
density: 'mdpi',
src: 'res/icon/android/mdpi-icon.png',
background: 'res/icon/android/mdpi-background.png',
foreground: 'res/icon/android/mdpi-foreground.png'
foreground: 'res/icon/android/mdpi-foreground.png',
monochrome: 'res/icon/android/mdpi-monochrome.png'
})];
};

Expand All @@ -409,6 +421,7 @@ describe('prepare', () => {
const phaseOneModification = {};
phaseOneModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_foreground.png')] = 'res/icon/android/mdpi-foreground.png';
phaseOneModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_background.png')] = 'res/icon/android/mdpi-background.png';
phaseOneModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_monochrome.png')] = 'res/icon/android/mdpi-monochrome.png';
const phaseOneUpdatedIconsForAdaptive = Object.assign({}, resourceMap, phaseOneModification);

updateIconResourceForAdaptiveSpy = jasmine.createSpy('updateIconResourceForAdaptiveSpy');
Expand All @@ -420,6 +433,7 @@ describe('prepare', () => {
const phaseTwoModification = {};
phaseTwoModification[path.join(PATH_RESOURCE, 'mipmap-mdpi', 'ic_launcher.png')] = 'res/icon/android/mdpi-foreground.png';
phaseTwoModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_background.png')] = 'res/icon/android/mdpi-background.png';
phaseTwoModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_monochrome.png')] = 'res/icon/android/mdpi-monochrome.png';
const phaseTwoUpdatedIconsForLegacy = Object.assign({}, phaseOneUpdatedIconsForAdaptive, phaseTwoModification);

updateIconResourceForLegacySpy = jasmine.createSpy('updateIconResourceForLegacySpy');
Expand Down Expand Up @@ -511,13 +525,15 @@ describe('prepare', () => {
const ldpi = mockGetIconItem({
density: 'ldpi',
background: 'res/icon/android/ldpi-background.png',
foreground: 'res/icon/android/ldpi-foreground.png'
foreground: 'res/icon/android/ldpi-foreground.png',
monochrome: 'res/icon/android/ldpi-monochrome.png'
});

const mdpi = mockGetIconItem({
density: 'mdpi',
background: 'res/icon/android/mdpi-background.png',
foreground: 'res/icon/android/mdpi-foreground.png'
foreground: 'res/icon/android/mdpi-foreground.png',
monochrome: 'res/icon/android/mdpi-monochrome.png'
});

const icons = [ldpi, mdpi];
Expand Down Expand Up @@ -614,7 +630,8 @@ describe('prepare', () => {
mdpi: mockGetIconItem({
density: 'mdpi',
background: 'res/icon/android/mdpi-background.png',
foreground: 'res/icon/android/mdpi-foreground.png'
foreground: 'res/icon/android/mdpi-foreground.png',
monochrome: 'res/icon/android/mdpi-monochrome.png'
})
},
default_icon: undefined
Expand All @@ -636,6 +653,7 @@ describe('prepare', () => {
const expectedModification = {};
expectedModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_background.png')] = 'res/icon/android/mdpi-background.png';
expectedModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_foreground.png')] = 'res/icon/android/mdpi-foreground.png';
expectedModification[path.join(PATH_RESOURCE, 'mipmap-mdpi-v26', 'ic_launcher_monochrome.png')] = 'res/icon/android/mdpi-monochrome.png';

const expected = Object.assign({}, resourceMap, expectedModification);
const actual = updateIconResourceForAdaptive(preparedIcons, resourceMap, platformResourcesDir);
Expand Down Expand Up @@ -668,7 +686,8 @@ describe('prepare', () => {
const icons = [mockGetIconItem({
density: 'mdpi',
background: 'res/icon/android/mdpi-background.png',
foreground: 'res/icon/android/mdpi-foreground.png'
foreground: 'res/icon/android/mdpi-foreground.png',
monochrome: 'res/icon/android/mdpi-monochrome.png'
})];
const projectRoot = '/mock';
const projectConfig = {
Expand Down
3 changes: 2 additions & 1 deletion templates/project/res/mipmap-hdpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>
Binary file added templates/project/res/mipmap-hdpi-v26/ic_launcher_monochrome.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion templates/project/res/mipmap-ldpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>
3 changes: 2 additions & 1 deletion templates/project/res/mipmap-mdpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>
Binary file added templates/project/res/mipmap-mdpi-v26/ic_launcher_monochrome.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion templates/project/res/mipmap-xhdpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>
Binary file added templates/project/res/mipmap-xhdpi-v26/ic_launcher_monochrome.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion templates/project/res/mipmap-xxhdpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>
Binary file added templates/project/res/mipmap-xxhdpi-v26/ic_launcher_monochrome.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion templates/project/res/mipmap-xxxhdpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>
Binary file added templates/project/res/mipmap-xxxhdpi-v26/ic_launcher_monochrome.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.