[Android][FMX] Which solution to have a full size app icon with Android 10?

[Fabian1648 2]

Hello,

 

I developed an FMX app for Android with Delphi Rio.

 

On Android 9, the app icon is well readable. On Android 10, the app icon is reduced to a small size with a huge white frame around it.

 

Here are 2 examples: Some apps have a "full size" icon (Editor++) and others an icon with a huge white frame (Droid Info).

 

Does anyone know a solution to have a full size icon without the white frame?

 

 

 

[Dalija Prasnikar 1396]

You need to create vector icons (adaptive icons), and you will need to add those additional files to deployment manually. 

 

You can find more about icons formats and deployment folders at https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

 

 

[Fabian1648 2]

Thank you for your answer.

 

But I don't see how to put the proposed solution into practice.

 

With Delphi Rio in the project options, you can only set for the icons .png files with the right resolution (if for the 144x144 icon, you propose an image with another size, Delphi detects it and refuses the proposed file).

 

So the stories of adaptive icons and other vector images, I do not see how to add them to my project. Is it by modifying the manifest.xml file?

[corneliusdavid 214]

I presume you've tried going into Project > Options > Application > Icons and setting all listed resolution image filenames under the Launcher, Notification, and Splash Images tabs?

[Dave Nottage 557]

15 hours ago, Fabian1648 said:

I don't see how to put the proposed solution into practice

Please refer to this part of the answer:

On 6/28/2021 at 5:15 PM, Dalija Prasnikar said:

you will need to add those additional files to deployment manually.

i.e. you would need to uncheck all of these:

..and add your own, keeping the same Remote Path and Remote Name values

[Dalija Prasnikar 1396]

3 hours ago, Dave Nottage said:

Please refer to this part of the answer:

i.e. you would need to uncheck all of these:

..and add your own, keeping the same Remote Path and Remote Name values

There is no need to uncheck those. Actually, those are still needed for supporting older Androids (unless you set minimum API to 26) 

 

Procedure would be - fill all icons you can through Project > Options > Application > Icons, then only add additional icons that cannot be set through Delphi.

 

There is open issue requesting support for adaptive icons https://quality.embarcadero.com/browse/RSP-21335  and I attached zip with default icons resources created by Android Studio new project template. This makes it easier to see which icons need to be added manually and how they should look like.

[Fabian1648 2]

@corneliusdavid: Yes!

 

I wrote " On Android 10, the app icon is reduced to a small size with a huge white frame around it". I tried it on another Android 10 device and the icons appear normal. So the problem is not with Android 10 but with the use of Android 10 by the device manufacturer.

 

I tried to add files through "Project > Deployment": I can add a file but I can't modify the corresponding values, I end up with an empty value under "Local path" and the value "file" under "Type" without being able to edit and modify the values linked to the added file.

 

@  dalija.prasnikar:

I looked at your zip. So if I understand correctly:

1. I don't modify in "Project > deployment" the icons defined by Delphi via "Project > options"
2. I add the files of the additional icons in "Project > deployment"
3. I modify the manifest.xml file

Is this correct?

[Dalija Prasnikar 1396]

20 minutes ago, Fabian1648 said:

@  dalija.prasnikar:

I looked at your zip. So if I understand correctly:

1. I don't modify in "Project > deployment" the icons defined by Delphi via "Project > options"
2. I add the files of the additional icons in "Project > deployment"
3. I modify the manifest.xml file

Is this correct?

1. You add your own icons of appropriate sizes 

2. Yes, you add additional icons in Project > deployment

3. Modifying manifest.xml is probably not even needed. AFAIK only difference between Android Studio manifest and Delphi manifest is in android:RoundIcon declaration and as far as I know round icon is not mandatory. However, you can also add that one just in case. Problem with Android is that there is plethora of devices with customized OS-es and some may require round icon for better UX.

[vfbb 285]

Adaptive Icon

 

First of all, don’t uncheck the icons in deployment and don’t change the manifest.

 

1) Add your icons in .png format in Project Options normally. This is necessary to keep the compatibility with android 7.1 and oldest.

2) You need to create 3 files "ic_launcher.xml", "ic_launcher_background.xml" and "ic_launcher_foreground.xml"

3) ic_launcher.xml example:

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

Add it in deployment with remote path "res\drawable-anydpi-v26"

 

4) ic_background.xml example:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108.0"
    android:viewportHeight="108.0">
    <path android:name="square"
        android:fillColor="#ff3657f4"
        android:pathData="M0,0 L108,0 L108,108 L0,108 z" />
</vector>

Note that I fixed a solid color (#ff3657f4), but you can put gradients in this xml or an image in place the background (not recomended).

Add it in deployment with remote path "res\drawable"

 

5) ic_foreground.xml example:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108.0"
    android:viewportHeight="108.0">
    <path android:name="square"
        android:fillColor="#ffffffff"
        android:pathData="M 53.91,32.73
           C 54.35,32.75 54.49,33.06 54.75,33.39
             54.75,33.39 56.18,35.17 56.18,35.17
             56.18,35.17 62.30,42.80 62.30,42.80
             62.30,42.80 65.32,46.57 65.32,46.57
             67.71,49.56 69.15,51.35 69.99,55.19
             70.19,56.06 70.35,56.97 70.35,57.86
             70.35,60.63 70.34,61.92 69.39,64.60
             67.61,69.60 63.19,73.48 58.06,74.76
             56.05,75.26 54.85,75.23 52.81,75.20
             51.89,75.19 50.64,74.92 49.74,74.70
             44.14,73.29 39.76,68.84 38.20,63.31
             37.95,62.41 37.66,60.97 37.65,60.04
             37.62,57.15 37.69,55.37 38.79,52.61
             39.86,49.91 41.15,48.49 42.92,46.27
             42.92,46.27 48.17,39.73 48.17,39.73
             48.17,39.73 51.98,34.98 51.98,34.98
             52.41,34.44 53.40,33.04 53.91,32.73 Z
           M 46.57,58.86
           C 46.57,58.86 43.70,58.86 43.70,58.86
             43.70,58.86 43.70,59.45 43.70,59.45
             43.70,63.37 46.54,66.93 50.04,68.42
             50.88,68.79 51.80,69.02 52.71,69.13
             53.27,69.20 53.36,69.10 54.00,69.26
             54.00,69.26 54.00,66.29 54.00,66.29
             52.87,66.29 51.97,66.13 50.93,65.66
             48.53,64.57 46.57,61.94 46.57,59.25
             46.57,59.25 46.57,58.86 46.57,58.86 Z" />
</vector>

You can change the white color (#ffffffff) and the pathData. Note: this pathData is the same path data inside the .svg. If you have your icon in .svg, just open it in notepad and copy the "d" field inside the "path" to the pathData of xml (only if the svg has size 108x108).

Add it in deployment with remote path "res\drawable"

 

 

Result

(the low quality is due to the gif format)

 

Extra

You can do the same with the splash screen (vector splash screen). The vector splash screen works in all android versions supported by Delphi.

Edited July 1, 2021 by vfbb

[Dave Nottage 557]

14 hours ago, Dalija Prasnikar said:

There is no need to uncheck those.

Sorry, I missed the "additional" part 🙂

 

[Fabian1648 2]

I must be a fool because I tried to follow the examples of both Dalija and vfbb and it doesn't work with Delphi Rio: I still have the basic icons (the Delphi flame).

 

In my case, it's the customized Android OS of the device manufacturer that shown my icon with an external white frame. Are the adptative icons the only solution to remove this problem or is there an alternative way to disable this customized behavior?

[vfbb 285]

@Fabian1648 The adaptive icon is the way to have your icon full quality in all devices of all manufacturers.

 

You did something wrong during the steps as it works on a blank project (you can test). 
 

Remembering that in some versions of android it is necessary to uninstall the old application for the icon to be updated. Also, on some androids (like LG's Android 10) when you click beyond uninstall, the android only disables the application, so you must go to Settings > Applications, and uninstall.

 

Please provide more information, print the deployment and the manifest and the print also, after a Run, the generated files in the output folder, example: (project)\Android64\Release\(project)\res

[Fabian1648 2]

@vfbbStarting from an empty project, I have done your example successfully.

 

Now I have my standard icons (.png files up to 144 pixels). How can I use my .png files as Adaptive Icon?

 

I have converted a .png file to .svg (I obtain about hundred different "d=" lines!... I concatenated them to have only one "d="), but in the end I obtain only on the Android device a white square as icon.

 

I have as "ic_laucher_background.xml":

 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108.0"
    android:viewportHeight="108.0">
    <path android:name="square"
        android:fillColor="#ffffffff"
        android:pathData="M0,0 L108,0 L108,108 L0,108 z" />
</vector>

 

I have as "ic_launcher_foreground.xml"

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
    <path android:name="square"
        android:fillColor="#ffffffff"
        android:pathData="M1590 1370 c0 -5 5 -10 10 ..........." />
</vector>

Is this the right approach to tranform my .png icons in adaptives icons?

[vfbb 285]

@Fabian1648 Apparently you don't know anything about vector manipulation. You cannot directly transform a .png to .svg. I advise you to download the GIMP and go on learning...

But I'll help you, I vectored an icon similar to yours. See your new icon:

 android.svg 

Now what you have to do is change the ic_background.xml and ic_foreground.xml.

ic_background.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108.0"
    android:viewportHeight="108.0">
    <path android:name="background" android:fillColor="#1570a6" android:pathData="M0,0L108,0L108,108L0,108z"/>
</vector>

ic_foreground.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108.0"
    android:viewportHeight="108.0">
    <path android:name="robot" android:fillColor="#ffffff" android:pathData="M63.56,62.94C63.56,63.72 62.94,64.35 62.16,64.35 62.16,64.35 45.85,64.35 45.85,64.35 45.08,64.35 44.45,63.72 44.45,62.94 44.45,62.94 44.45,48.37 44.45,48.37 48.72,48.36 58.69,48.36 63.56,48.37 63.56,48.37 63.56,62.94 63.56,62.94 63.56,62.94 63.56,62.94 63.56,62.94ZM50.49,40.91C50.57,41.06 50.5,41.26 50.34,41.34 50.34,41.34 50.34,41.34 50.34,41.34 50.19,41.42 49.99,41.36 49.91,41.2 49.91,41.2 47.85,37.18 47.85,37.18 47.77,37.02 47.83,36.83 47.99,36.75 47.99,36.75 47.99,36.75 47.99,36.75 48.15,36.67 48.34,36.73 48.43,36.89 48.43,36.89 50.49,40.91 50.49,40.91 50.49,40.91 50.49,40.91 50.49,40.91ZM57.99,41.07C57.9,41.23 57.7,41.28 57.55,41.19 57.55,41.19 57.55,41.19 57.55,41.19 57.39,41.1 57.34,40.91 57.43,40.75 57.43,40.75 59.69,36.84 59.69,36.84 59.78,36.69 59.98,36.63 60.13,36.72 60.13,36.72 60.13,36.72 60.13,36.72 60.29,36.81 60.34,37.01 60.25,37.17 60.25,37.17 57.99,41.07 57.99,41.07 57.99,41.07 57.99,41.07 57.99,41.07ZM68.54,58.99C68.54,60.12 67.62,61.04 66.49,61.04 66.49,61.04 66.49,61.04 66.49,61.04 65.35,61.04 64.43,60.12 64.43,58.99 64.43,58.99 64.43,50.01 64.43,50.01 64.43,48.87 65.35,47.95 66.49,47.95 66.49,47.95 66.49,47.95 66.49,47.95 67.62,47.95 68.54,48.87 68.54,50.01 68.54,50.01 68.54,58.99 68.54,58.99ZM43.56,58.99C43.56,60.12 42.64,61.04 41.51,61.04 41.51,61.04 41.51,61.04 41.51,61.04 40.38,61.04 39.46,60.12 39.46,58.99 39.46,58.99 39.46,50.01 39.46,50.01 39.46,48.87 40.38,47.95 41.51,47.95 41.51,47.95 41.51,47.95 41.51,47.95 42.64,47.95 43.56,48.87 43.56,50.01 43.56,50.01 43.56,58.99 43.56,58.99ZM52.5,69.27C52.5,70.4 51.58,71.32 50.45,71.32 50.45,71.32 50.45,71.32 50.45,71.32 49.31,71.32 48.4,70.4 48.4,69.27 48.4,69.27 48.4,60.29 48.4,60.29 48.4,59.15 49.31,58.23 50.45,58.23 50.45,58.23 50.45,58.23 50.45,58.23 51.58,58.23 52.5,59.15 52.5,60.29 52.5,60.29 52.5,69.27 52.5,69.27ZM59.62,69.27C59.62,70.4 58.7,71.32 57.57,71.32 57.57,71.32 57.57,71.32 57.57,71.32 56.43,71.32 55.51,70.4 55.51,69.27 55.51,69.27 55.51,60.29 55.51,60.29 55.51,59.15 56.43,58.23 57.57,58.23 57.57,58.23 57.57,58.23 57.57,58.23 58.7,58.23 59.62,59.15 59.62,60.29 59.62,60.29 59.62,69.27 59.62,69.27ZM54.01,38.78C49.01,38.78 44.9,42.58 44.35,47.46 44.35,47.46 63.66,47.46 63.66,47.46 63.11,42.58 59,38.78 54.01,38.78 54.01,38.78 54.01,38.78 54.01,38.78ZM49.65,44.04C49.2,44.04 48.85,43.68 48.85,43.24 48.85,42.8 49.2,42.44 49.65,42.44 50.09,42.44 50.45,42.8 50.45,43.24 50.45,43.68 50.09,44.04 49.65,44.04 49.65,44.04 49.65,44.04 49.65,44.04ZM58.38,44.04C57.94,44.04 57.58,43.68 57.58,43.24 57.58,42.8 57.94,42.44 58.38,42.44 58.82,42.44 59.18,42.8 59.18,43.24 59.18,43.68 58.82,44.04 58.38,44.04 58.38,44.04 58.38,44.04 58.38,44.04Z"/>
    <path android:name="gear" android:fillColor="#1570a6" android:pathData="M57.83,54.26C57.83,54.26 57.56,53.63 57.56,53.63 57.56,53.63 58.18,52.23 58.13,52.17 58.13,52.17 57.3,51.37 57.3,51.37 57.25,51.31 55.84,51.95 55.84,51.95 55.84,51.95 55.2,51.69 55.2,51.69 55.2,51.69 54.62,50.27 54.54,50.27 54.54,50.27 53.38,50.27 53.38,50.27 53.3,50.27 52.77,51.7 52.77,51.7 52.77,51.7 52.13,51.96 52.13,51.96 52.13,51.96 50.69,51.35 50.64,51.4 50.64,51.4 49.81,52.21 49.81,52.21 49.76,52.26 50.41,53.64 50.41,53.64 50.41,53.64 50.14,54.27 50.14,54.27 50.14,54.27 48.69,54.83 48.69,54.91 48.69,54.91 48.69,56.05 48.69,56.05 48.69,56.13 50.15,56.65 50.15,56.65 50.15,56.65 50.42,57.28 50.42,57.28 50.42,57.28 49.79,58.68 49.85,58.74 49.85,58.74 50.67,59.54 50.67,59.54 50.73,59.6 52.13,58.96 52.13,58.96 52.13,58.96 52.78,59.22 52.78,59.22 52.78,59.22 53.35,60.64 53.43,60.64 53.43,60.64 54.59,60.64 54.59,60.64 54.67,60.64 55.2,59.21 55.2,59.21 55.2,59.21 55.85,58.95 55.85,58.95 55.85,58.95 57.28,59.56 57.34,59.51 57.34,59.51 58.16,58.7 58.16,58.7 58.22,58.65 57.56,57.27 57.56,57.27 57.56,57.27 57.83,56.64 57.83,56.64 57.83,56.64 59.29,56.08 59.29,56 59.29,56 59.29,54.86 59.29,54.86 59.29,54.78 57.83,54.26 57.83,54.26ZM53.99,57.12C53.05,57.12 52.29,56.37 52.29,55.45 52.29,54.54 53.05,53.79 53.99,53.79 54.92,53.79 55.69,54.54 55.69,55.45 55.69,56.37 54.92,57.12 53.99,57.12Z"/>
</vector>

 

[Fabian1648 2]

Thanks for all answers!