Android Push Notification Icon size

Android Push Notification Icon size & format Guidelines

The creation of a unified feel and look throughout the user interface is bound to add value to your product list or service site. The streamlining of the graphic style will also ensure the overall look of the user interface (UI) appear more professional and user-friendly to the users. If you wish to enhance the icon design of your Google Mobile push notifications, then here are some helpful guidelines to help you in the creation of the same.Android Push Notification Icon size

Status Bar Icons

The status bar icons in the Google Mobile push notifications are used for representing notifications from the application in the given status bar. The experts suggest that you must create individual status bar icons for all the desired generalized screen densities including low, medium, high, and even extra high density screens. This would ensure that the icons are displayed properly across several devices upon which the application will be installed.

Android 3.0 & Later

The following set of guidelines explains the designing of the status bar icons for the systems of Android 3.0 (API level 11) and later models.

The Changes Overview

The overall design of the notification (status bar) icons has been modified in the status bar icons of Android 3.0. The notification or the status bar icons that are used in the Android 3.0 and later models are highly simple to create. Moreover, these icons also allow for more flexible presentation of the Google mobile push notifications in several situations:

  • The status bar (notification) icons in the Google Mobile push notifications are composed mainly of white pixels that are displayed on a transparent backdrop. These come with alpha blending that is used for internal texture and smooth edges wherever appropriate.
  • The icons are usually the square icon content that must fill the given available space. Though a small amount of internal padding might help in maintaining the overall balance across the different status bar icons.

The notification (status bar) icons are brighter and larger icons and could be highly legible. These are also highly intense to be used in the dark on the phone notification or status bar. The status bar icons can be highly distracting if these are used directly in the notification or status bar. Therefore, the given system must be able to resize and dim the icons automatically in certain situations. As such, the developers of the status bar icons for Google mobile push notifications need not provide separate icons for achieving the desired results.

Size & Format

The notification (status bar) icons for Google mobile push notifications should be 32-bit PNGs with the presence of an alpha channel for providing utmost transparency. The completed dimensions of the status bar icons that are corresponding to a certain screen density can be summarized as follows:

The developers of the status bar icons can also include some pixels of padding in these icons for maintaining a visual weight that remains consistent along with the adjacent icons. For instance, a pixel of the dimension 48 X 48 xhdpi status bar icon could contain the pixel shape of 44 X 44 with around 2 pixels on each side for the required padding.

Note: The system would dim and shrink the status bar icons for minimizing the distractions. As such, this allows the users to give their focus on the activities happening in the foreground of the Google mobile push notifications.

Colors, Styles & Effects

The notification or status bar icons tend to be flat, with enabled pictured face, and should be white displayed upon a transparent background. For maintaining the overall consistency across the different notifications of the status bar icons, these icons should be using the styling guidelines as:

Automatic Dimming

The given system might shrink or dim the available status bar icons for allowing the users to focus mainly on the activities happening in the foreground screen of the Google Mobile push notifications. For instance, in Android 4.0, the status bar that tends to be platform-standard for the devices of handset size is able to reduce the icons to as much as 18 X 18 dip and to around 40% status bar opacity. At the same time, this also draws the status bar icons to the full size and at their maximum intensity in the expanded notification panel.

Android 2.3

The following set of guidelines explains the designing of the status bar icons in the Android 2.3 (API Levels 9 & 10) models:

Size & Positioning

The status bar icons should be using simple forms and shapes. Moreover, these must be scaled as well as positioned in the final asset of the Google mobile push notifications design. The icons should be sized and positioned in a smaller frame than the actual sizing or bounds of the given assets. The notification or status bar icons might differ from each other with respect to width, but too slightly.

For indicating the advisable size of the Google mobile push notification icons for Android 2.3 models, there should be two different rectangles for guiding the overall design:

  • The red box indicates the bounding box for the given full asset
  • The blue box is used to refer to the bounding box that is required for the actual icon. The icon box is usually sized smaller & vertically than the box of full asset for allowing the different icon shapes to maintain a consistent visual weight.

Style, Effects, and Colors

The status bar icons in the Google mobile push notifications in Android 2.3 models tend to be matte, flat and with enabled pictured face.

Android 2.2 & Earlier

The following set of guidelines tends to explain the designing of the status bar icons for Google mobile push notifications in Android 2.2 (API Level 8) and earlier models:

  • The rounded corners should be applied at all times to the given base shape as well as to the details of the status bar icon
  • All the specified dimensions must be based on the 25 x 25 artboard size of the pixel with 2 safeframe of the pixel
  • The status bar icons might overlap the safeframe to the right & left whenever necessary. However, these should not overlap the safeframe of top & bottom.

Leave a Reply

Your email address will not be published. Required fields are marked *