search

mit-cml / appinventor-sources

MIT App Inventor Public Open Source
http://appinventor.mit.edu/appinventor-sources/
Apache License 2.0
1.48k stars 2.06k forks source link

Adaptive icons have white edges #2328

Open Vishwas-Adiga opened 4 years ago

Vishwas-Adiga commented 4 years ago

Describe the bug Adaptive icons often have white edges that are at most a few pixels wide. image

These edges are a result of the background layer of the adaptive icon being set to #FFFFFF. On square images, the edges appear only on the centres of the top, bottom, left, and right edges. On circular images, the white area outlines the entire icon.

In addition, the entire icon slides around when the icon is dragged, whereas the intended behaviour is to have only the foreground layer move around while the backdrop remains stationary.

Further context: https://community.appinventor.mit.edu/t/problems-with-app-icon/4739

Affects

Expected behavior

image Expected: icon at the centre which has no white outline Observed: icons at the periphery which have white edges

Steps to reproduce

  1. Add any image to Screen1's AppIcon property.
  2. Compile the app and observe the icon

Possible fix

  1. Set the user's app icon as the adaptive icon's background layer. Pros: No white patches along the edges Cons: The wiggle/parallax/spring motion that comes with adaptive icons is lost; the icon is stationary.

  2. Set the background layer of the icon from #FFFFFF (white) to #00FFFFFF (transparent). This will get rid of the artefacts while retaining the parallax motion. Pros: Motion is retained Cons: Motion is applied to the entire icon (this is not an issue introduced by this solution, rather a limitation of the system currently implemented in App Inventor). It is not possible to have, say in the other image attached above , the "k" ligature maintain motion while the background art stay stationary.

  3. Add a new property called AppIconForeground. This will let the user set an optional foreground image for their app's icon that will slide when the icon is dragged. The AppIcon will act as the required background layer of the adaptive icon. This solves the issue with the edges while also letting advanced users leverage the full potential of adaptive icons.

(Image credits to Anke)

ewpatton commented 4 years ago

It seems like option 2 would be easiest to implement and the fastest to verify and deploy. I think option 3 is a better long term solution.

ewpatton commented 3 years ago

As a bit of background, when this was first implemented we discussed doing something similar to option 3 first but the timeline made it not feasible. If you want to take a stab at implementing that I think that'd be best.

Vishwas-Adiga commented 3 years ago

I'll try and work on it sometime this month and see if I can have a working solution 👍

kevinwolff commented 3 years ago

Hey @Vishwas-Adiga, were you able to make any progress with this? It might seem trivial to some, but I think your solution would be a great way to really add that official polish to AI apps. :)

ItsDedSec00 commented 2 years ago

It would be nice to be able to change the Icon background Color for adaptive Icons, so we can use transparent Icons. On Android 12 this affects the startup Animation Background Color too. The White Splash Screen is pretty harsh.