Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Launcher Icon Rounded Corner Edge Radii

Are there any official guidelines for how many pixels the edge radii should be when giving Android launcher icons rounded corners?

I've found guidelines for launcher icon pixel sizes (but rounded corners aren't mentioned), a tool called Android Asset Studio which rounds the corners for you (but the tool provides undesirable and non-configurable padding around the edges of each icon), and another tool called Icon Slayer (but the tool creates corners that I feel are way too round, and feel very iOS).

I've also noticed that of all the apps that I personally use that have rounded corners on their launcher icons, the edge radii almost always seem to vary from icon to icon. When I place the various icons next to each other, some look pretty close, but they mostly feel just a little bit off from each other.

Any help?

like image 948
Luke Avatar asked Jul 06 '15 20:07

Luke


People also ask

What is round icon in Android?

Circular launcher icons are supported in Android 7.1. 1 and later. Circular launcher icons are not enabled by default. To use circular icons in your device implementation, you must edit the resource overlay on your device to enable them.

How do I make my apps icon rounded?

Right click on app > Go to Image Assets > Choose icon type and other properties > Click next and finish. Here you can generate all icon shapes and replace with new easily. If you choose icon type as adaptive and legacy it will generate both square shaped and round shaped.

What is adaptive icon?

An adaptive icon, or AdaptiveIconDrawable , can display differently depending on individual device capabilities and user theming. Adaptive icons are primarily used by the launcher on the homescreen, but can also be used in shortcuts, the Settings app, sharing dialogs, and the overview screen.


2 Answers

Check out Google's official Material Design guidelines for Icons about two thirds of the way down the page under the sub-heading Corners.
It indicates you should use a 2px radius on the corners. If go up a few sections, under the heading Content Area you'll see this is for a 24x24 px icon. You can scale up for other resolutions from there.

like image 73
Sound Conception Avatar answered Sep 20 '22 04:09

Sound Conception


The radius of the corners should be 8.33% of the size of the icon according to Materiel guidelines.

So if the size of the icon in your project is: 1000px by 1000px, then the corner radius should be 83.3px.

However, you should probably make your document bigger than that. Maybe 2000px by 2000px, and the radius:

  • 2000px * 0.0833 = 166.6px

This is just in case you need to export a version of your icon that is bigger than 1k px.

like image 41
Jose Miralles Avatar answered Sep 23 '22 04:09

Jose Miralles