What are the new icons on android

What are Adaptive Icons and why do I want them?

Android is an open system, and it’s a diverse system, especially when it comes to its apps and their icons. Some icons are lifted straight from the iOS versions of the same app. Some icons have unique and fun shapes. Some icons are completely flat, while others have deep drop shadows. Your app drawer on Android can look like a bit of a design style melting pot, and with Android Oreo’s Adaptive Icons, Google wants to fix it — again.

This is the second year in a row that Google has refocused efforts to standardize and fix app icons in a new version of Android, but what exactly are these new Adaptive Icons? And will this succeed where previous efforts have failed?

Fixing Android Icons, Take 3

Let us begin with Google’s previous attempts to fix Android’s app icon problem. Google tried to bring some order to icons with Material Design, including a new template and list of guidelines for creating app icons. Google went even further last year with Android Nougat, pushing app developers to include a round icon in addition to their regular icon in an effort to achieve icon uniformity, at least on their own Google Pixel and other devices running Android 7.1.

This year’s solution is Adaptive Icons. Adaptive Icons are a new way of formatting and submitting app icons so that they can be cut down into a variety of shapes depending on the device or launcher a person is using. This means that instead of your Google icons looking one way, your Samsung apps looking another way, and your third party apps being a mess, everything should be consistently shaped and there’s even a chance for your app icons to animate in interesting ways.

How Adaptive Icons adapt to their devices

This is how it’s supposed to look.

Developers submit Adaptive Icons in two layers, a transparent foreground layer and a solid background layer, which are then cut into shape by the launcher. By submitting an icon in two layers, developers can play with their icons and enable neat light and depth effects based on the way the two app icon layers interact and animate. These effects and the attention they can draw to an app are the carrot for developers. The stick is that if your app doesn’t submit an Adaptive Icon while targeting Android Oreo, you get your icon scaled down to fit inside the same mask the Adaptive Icons are using.

These effects and the attention they can draw to an app are the carrot. The shrinking of unthemed icons is the stick.

Manufacturers like Samsung have been skinning apps and sticking them inside their ugly, ugly icon pack masks for years now. It’s not hard to see them jumping on Adaptive Icons in order to get some clean uniformity on their devices without being stuck only with the shape Google picked. Samsung can stick with those gag-worthy squircles and LG can use squares and HTC can use hexagons to be different. No matter the shape the manufacturer chooses, the background won’t be plain white or some god-awful shade of teal; the background will be that background layer the app developer submitted.

Will it work this time?

Adaptive Icons have the potential to shake up Android home screens, app drawers, and Android theming in a lot of really fun ways. Users won’t have to use an icon pack to get some consistency in their app drawer; manufacturers can keep their own style while keeping things even; and developers won’t have to worry about their icon being shrunk and shoved into awkward, off-color masks. As a themer, I can only imagine what third-party launchers and icon pack makers could do with Adaptive Icon icon packs.

As with the circular icons last year, the only way this solution works is if app developers decide to take the time to build a two-layer adaptive icon. If they don’t, — well, there are always icon packs.

Источник

How To Change App Icons On Android Devices

Are you looking for a way to change app icons on Android? Since one of the coolest things about Android smartphones is the different levels of customization it offers to the users, I think boredom is the last thing that an Android user can experience. New layouts, fun backgrounds, and various icons can give your phone a new look every time you get bored of the current one. So if you have recently started to feel like your app icons are not fun enough then try one of the given methods that explain how to change app icons on an Android phone.

Ways To Change App Icon On Android

There are two ways in which you can change Android icons. The first method is to use a launcher while the second one is to use a standalone icon pack. Both of these methods do not require your phone to be rooted.

Method 1: Using a Launcher

There are quite a few launchers available on the Play store which you can choose from. Check the ratings and look for feedback to make sure you pick a launcher that works well and is suitable for your device. Once you pick the launcher you want to use on your phone, simply download and install the launcher.

After the launcher is installed, you will automatically be asked if you would like to start using the launcher when you press the home button. Choose the launcher as the default, and depending on the launcher you are using, you may be prompted with further steps to customize your screens.

Users who have been using a launcher before as well will be able to import the settings of their previous launcher, or else, you may need to spend some time to bring the different widgets and apps you use to your home screen.

Some launchers like Nova Launcher will even allow you to pick an image from your gallery for your app icon. With such amazing levels of flexibility in changing the app icons, you can continually assign your apps new icons either from images from your gallery or by using different launchers.

Launchers bring with them a spectrum of wallpapers, themes, and app icons that can dress up your device the way you want it to be. Some of them may contain ads but they work well especially if you are a person who enjoys exploring variety when it comes to the way their phone looks.

Method 2: Using an App

Some of our readers do not find themselves to be comfortable using a launcher. But they do not mind changing the app icons to give their phones a fresh new look. In a situation like this, an app is a good way to change the app icons without changing your phone’s skin by using a launcher. Apps like Awesome Icons and Icon Changer are known to be user-friendly apps that can help you change Android icons.

Depending on the app, the steps for using it will vary. But for most of the apps that help in changing app icons, once the app is downloaded and installed, you must click on the app to open it and then choose the apps for which you want to change the icons. Some apps may even allow you to rename the app. This can be a fun way of giving your phone a new look.

It can also help in keeping prying eyes away from your phone, especially when you rename your banking apps or if you happen to be using adult apps, you can rename the app and change the icon and it is easier to use your phone without others knowing which apps are installed on your device.

Conclusion

Use these two methods to customize app icons so that you can give your phone a new look. Not only does it make Android interesting, but it also ensures that you do not get tired of looking at the same set of app icons on your phone. You can change the icon on your device as often as you like with these methods. Both of these methods can be used on phones without the need to root your device or by having deep technical know-how of smartphones.

Источник

Designing Adaptive Icons

Android O introduces a new app icon format: adaptive icons. Adaptive icons can make devices more coherent by unifying the shape of all app icons and opening the door to interesting visual effects. This post explains how they work and explores some techniques for designing them.

For a look back at where this feature has come from, see:

Understanding Android Adaptive Icons

Android O introduces a new format for app icons called adaptive icons. To better understand the motivation and…

Fundamentals

Size and shape

Adaptive icons are 108dp*108dp in size but are masked to a maximum of 72dp*72dp. Different devices can supply different masks which must be convex in shape and may reach a minimum of 33dp from the center in places.

Because of the minimum reach of the mask, you can consider a centered 66dp diameter circle as a safe zone, guaranteed not to be clipped.

Keylines

Keyline shapes are the foundation of the icon grid helping your icon’s visual proportions be consistent with other apps’ icons . The keyline shapes are:

• Circles: 52dp & 36dp diameter
• Square: 44dp*44dp, 4dp corner radius
• Rectangles: 52dp*36dp & 36dp*52dp, 4dp corner radius

See the templates included at the end of this article.

Layers

Adaptive icons are actually made up of two layers; a foreground and a background. Both layers are 108dp*108dp; the background must be fully opaque while the foreground may include transparency. These layers are stacked on top of each other.

Providing elements in two separate layers which are larger than the displayed (i.e. masked) size creates the opportunity for interesting visual treatments and animations. Exactly what effects may be applied and when is still something of an open question; it is up to device and launcher makers to decide. Here are some simple examples you could imagine: parallax or pulsing by independently translating or scaling each layer before applying the mask.

As the 108dp*108dp icons are masked up to 72dp*72dp, the outer 18dp on each side can be considered the “extra” content, only revealed during motion.

Design Considerations

The material design guidelines for creating product icons still very much apply. Specifically the icon anatomy, shadows and finish remain, but you can now place elements in either the foreground or background layers yielding different effects.

Now I’m sure that many icons will be well served by placing their brand mark in the foreground on a solid colored background and calling it a day. This will ensure that your icon fits in well on the device. What excites me is how we as a community will explore these new constraints and find interesting, playful and innovative ways to make delightful icons. Here are a few things to keep in mind and a few ideas to potentially explore.

Clipping

Due to the dynamic nature of adaptive icons, you cannot know the exact mask shape that will be applied. For that reason it’s best to place any critical elements like your brand mark inside the safe-zone and to stay away from the mask edges.

Background Anchoring

Placing some elements which might appear to be foreground, actually in the background means that they will move independently. For example the calculator app places most elements in the foreground, but the equals button on the accent color block in the background:

This creates interesting opportunities for motion where you visually anchor on the bright color block, but it moves less than the foreground elements, creating a sensation of depth.

Masked masks

I think that there may be interesting opportunities for placing masking elements in the foreground — that is solid elements with areas cut out. Consider a possible icon for the Google Play Store, this might be constructed in an ‘obvious’ manner, that is placing the colored triangle in the foreground atop a white background.

Instead of doing this, we might use a colorful background and a white foreground with the triangle subtracted to produce the same static output:

This setup would allow the colors ‘peeking through’ to move independently of the mask revealing different parts of the background when translated or scaled.

Light & shadows

The interaction of lighting effects and shadows placed in separate layers can have interesting results. For example using the long-shadow technique on the foreground element can have a playful interaction as it moves within the masked area. Similarly lighting effects can be placed in the foreground layer rather than being baked into the background. For example, a ‘finish’ layer can be placed in the foreground to emulate a light source. Placing this in the foreground means that it will play over the background layer when under motion, moving at a different rate to it.

Be careful not to create an effect that doesn’t make sense e.g. a shadow detaching from a foreground element or moving behind a background element. Also remember that many icons are likely to be seen together so be conservative with bespoke lighting effects and stick close to the material guidelines.

Leave behinds

You could place elements in the background layer which are completely obscured by the foreground layer and only revealed under motion.

Resources and tools

Here is my sketch file which you can use as a template whilst creating adaptive icons. It includes the icon grid, keyline shapes and safe area. It’s implemented as a symbol so changing the master element will update the copies giving you a preview with different masks applied.

I’ve also uploaded an Adobe Illustrator template if that’s more your thing.

Additionally check out these other resources i’ve come across:

Adaptive Icon Playground

In developing adaptive icons, I’ve come to appreciate that many of the subtleties come from the interaction of the foreground and background elements when motion effects are applied. This is still something of an open question as we are yet to see how device and launcher makers will implement this. To help investigate this space, I’ve created a small test app to help you evaluate it whilst creating your icon:

The app displays all applications installed on your device with adaptive icons. Scrolling the grid applies parallax effects to the icons and touching an icon applies a scale effect. You can configure the strength of the effects and change the mask applied to all icons. Hopefully this tool helps you to envisage how your icon will appear and may move on different devices.

You can download an APK or checkout the source on github:

Источник