Android notification large icon from vector xml

There are several icons you can set on an Android notification: small app icon and a large optional icon for the body of the notification.

In this post we will explore how to set a large vector graphics icon on an Android Notification.

Check out the notification anatomy for more details.

1. Create the icon.
   We will be working with vector graphics and create a “More” icon with three dots in vector xml:

   Here’s an example of how an XML file with vector image of three dots might look.

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
           android:width="24dp"
           android:height="24dp"
           android:viewportWidth="24.0"
           android:viewportHeight="24.0">
       <path
           android:fillColor="#FF000000"
           android:pathData="..."/>
   </vector>
   

   Place this XML file under the folder res -> drawable in your project.

   Read more about vector drawable resources and how to create them.

2. Convert vector to bitmap.

   You will need a Bitmap file in order to set a large icon for your Android notification.

   Vector XML files are of type Drawable and not Bitmap and need to be converted to Bitmap.

   Normally with PNG and JPG files you would use BitmapFactory.decodeResource() to set the resource as an icon. In case of vector files it will return null for shapes defined in xml drawable files.

   Here’s how to convert vector graphics image to a bitmap in Android.

   First, get a Drawable object from your vector file:

   Drawable largeIcon = getResources().getDrawable(R.drawable.more);
   

   Second, convert the drawable to bitmap using Canvas:

   public static Bitmap drawableToBitmap (Drawable drawable) {
   
       if (drawable instanceof BitmapDrawable) {
           return ((BitmapDrawable)drawable).getBitmap();
       }
   
       Bitmap bitmap = Bitmap.createBitmap(
   						drawable.getIntrinsicWidth(), 
   						drawable.getIntrinsicHeight(), 
   						Config.ARGB_8888);
       Canvas canvas = new Canvas(bitmap); 
       drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
       drawable.draw(canvas);
   
       return bitmap;
   }
   

   If you get exceptions like IllegalArgumentException: width and height must be > 0 make sure you set the right dimensions in your vector file (we set 24dp for height and width).

3. Set the large icon.

   First, create the Android notification and set all required parameters:

   NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context);
   mBuilder.setSmallIcon(R.mipmap.ic_launcher)
   		.setLargeIcon(largeIcon)
   		.setColor(ContextCompat.getColor(context, R.color.yellow))
   		.setContentTitle("My notification")
   		.setContentText("Here comes some text")
   		.setDefaults(Notification.DEFAULT_ALL)
   		.setAutoCancel(true)
   		.setVibrate(new long[]{1000, 1000, 1000, 1000, 1000})
   		.setSound(RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION));
   

   Small icon and large icon are different things! Small icon is a main App icon and is required. Large icon is an optional icon and is used to make the notification more personal or give it more information.

   In our example we have also provided several extra options:

   • the notification will disappear after it is clicked setAutoCancel(true),
   • vi have specified that the phone will vibrate when receiving the notification setVibrate()
   • the phone will also make the default notification sound when receiving the notification setSound()
Android notification large icon from vector xml was last modified: November 16th, 2019 by codinghorror
Related posts:  



How to upload files from Android App to server



React Native Navigation example



Ways to program your drone to do awesome stuff



Image grid layout with css example



String concatenation in React Native