Skip to content

Commit

Permalink
Compensate for Android launcher icon scaling (#424)
Browse files Browse the repository at this point in the history
Fixes #410

The launcher images created by `capacitor-assets generate` are correct,
but the Android platform itself is displaying them scaled and cropped.
We can compensate for that by defining an inset in the launcher XML.

Credit for this approach goes to:
https://stackoverflow.com/questions/66593626/why-does-adaptive-icon-generated-by-android-studio-crop-images-so-much-to-make-u

The workaround that twoco pointed out on the linked issue involves
adding padding to the icon so that the desired icon size was 2/3 of the
actual width. Using those numbers, I added a padding of ~1/6 to each
edge, so ~1/3 in total for each dimension.

I tested this in android studio. I saw that the icon was fully visible
in the launcher. I also tried it with background image that had circles
touching the image edges, and I confirmed that they were not visible
before this change and *were* visible at the edge of the image after
this change.
  • Loading branch information
noahbrenner authored Nov 10, 2022
1 parent 076a2e6 commit dae7898
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions src/platforms/android/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -361,8 +361,12 @@ export class AndroidAssetGenerator extends AssetGenerator {
const icLauncherXml = `
<?xml version="1.0" encoding="utf-8"?>
<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"/>
<background>
<inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
</background>
<foreground>
<inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
</foreground>
</adaptive-icon>
`.trim();

Expand Down Expand Up @@ -428,8 +432,12 @@ export class AndroidAssetGenerator extends AssetGenerator {
const icLauncherXml = `
<?xml version="1.0" encoding="utf-8"?>
<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"/>
<background>
<inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
</background>
<foreground>
<inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
</foreground>
</adaptive-icon>
`.trim();

Expand Down

0 comments on commit dae7898

Please sign in to comment.