derdilla / blood-pressure-monitor-fl

A cross platform app to save blood pressure values with export function

MIT License

64 stars 11 forks source link

[FEATURE] [Android] - Adaptive Launcher Icon - VectorDrawable Icon - Themed / Monochrome Launcher Icon #237

Open sebastien46 opened 10 months ago

sebastien46 commented 10 months ago

What you want:

Progress:

[ ] Adaptive Launcher Icon
[x] VectorDrawable Icon
[x] Monochrome Icon

I'd like to add these features using a pull request, however, if @NobodyForNothing is willing to provide the original vector file used to create the app's bitmap icon (if one exists), I would greatly appreciate it, as creating vectors from bitmaps can be quite messy.

Why you want it:

Starting with TargetSDK 26 / Android 8, devices start to use the app's adaptive icon / drawable in order for it to follow user theming and device preferences:
In combination with the VectorDrawable Class, apps can also use XML vector graphics to render their app icon, which significantly decreases the icon's file size, as it creates the bitmap cache on the fly.
Starting with TargetSDK 33 / Android 13, devices can request an app icon / drawable vector's monochrome version, which can enable the app to render a user-themed / monochromatic version of it's launcher icon:

Developer Reference Documentation

derdilla commented 10 months ago

Sounds like a good feature, feel free to open a PR. I already made an svg arcticons icon some time back, but I leave it up to you if you want to create one closer to the original.

The original icon was created using blender.

sebastien46 commented 10 months ago

Sounds like a good feature, feel free to open a PR. I already made an svg arcticons icon some time back, but I leave it up to you if you want to create one closer to the original.

The original icon was created using blender.

Alright, I made a monochrome vector using the original bitmap, it was fortunately high-res & simple enough for inkscape to not freak out 😅 Here's what it looks like: ic_launcher_monochrome

Now, I just need, to cut it up into different parts to have different colors.

Sidenote, I think you can export blender projects to vector files @NobodyForNothing Here's what I found in the docs

derdilla commented 9 months ago

@sebastien46 The blender icon was very scuffed, so I highly appreciate your efforts to create a vector graphic.

In case you want to look at the colors I used in Blender (beware of lighting), the file is here.

sebastien46 commented 9 months ago

@sebastien46 The blender icon was very scuffed, so I highly appreciate your efforts to create a vector graphic.

In case you want to look at the colors I used in Blender (beware of lighting), the file is here.

So, I did this 2 ways:

1.

Tracing the PNG
Cutting up the contour into multiple paths
Coloring the paths using eyedropped colors from the shadowed png (no gradient):

bloodpressure_preview_release2

2.

Exporting .blend file as Grease Pencil, original colors (no lighting):

bloodpressure_preview_release3

I'm pretty sure you want the colors that match the rendered version the most, not the base colors, correct @NobodyForNothing ?

derdilla commented 9 months ago

@sebastien46 yes, please use something close to the original. I leave it up to you to decide whether to keep the gradient.

sebastien46 commented 9 months ago

@sebastien46 yes, please use something close to the original. I leave it up to you to decide whether to keep the gradient.

I don't think I'm experienced with vectors enough to try and recreate rendered shadows with the naked eye into accurate gradients 😅 The one I made only with the eyedropped colors looks pretty damn close to the real thing imho. Besides, someone could still make a PR to modify the vector colors into gradients.

I won't be able to test whether or not these changes worked since I don't have a flutter environment set up, but I can still make a pr & you could try to see if it does on your side. Does that work for you @NobodyForNothing ?

derdilla commented 9 months ago

I won't be able to test whether or not these changes worked since I don't have a flutter environment set up, but I can still make a pr & you could try to see if it does on your side.

@sebastien46 go ahead, I will check if it works.

sebastien46 commented 9 months ago

I won't be able to test whether or not these changes worked since I don't have a flutter environment set up, but I can still make a pr & you could try to see if it does on your side.

@sebastien46 go ahead, I will check if it works.

Ok, so I was able to test it by copying the path data to another app that already has adaptive icons, and unfortunately it looks like this at the moment:

Gaps are clearly visible

I'll try to correct this first.

sebastien46 commented 9 months ago

I won't be able to test whether or not these changes worked since I don't have a flutter environment set up, but I can still make a pr & you could try to see if it does on your side.

@sebastien46 go ahead, I will check if it works.

Ok, so I was able to test it by copying the path data to another app that already has adaptive icons, and unfortunately it looks like this at the moment:

Gaps are clearly visible

I'll try to correct this first.

I'll probably make it in a separate PR Later. For now I'll just finish the monochrome icon which is easier to not screw up 😆

sebastien46 commented 9 months ago

Opened #239

derdilla commented 9 months ago

Can I have a rough estimate of when you plan on finishing this?

I plan to make a release over the next days and want to know if I should wait for this.

sebastien46 commented 9 months ago

I'm on vacation right now, but I'll finish it when I get back in a few days.