Android Status Bar Icon Size - Using Cordova / Phonegap Push Plugin

Question

Im developing an Android app using Ionic (Cordova + AngularJS). With it i use the Push Plugin (https://github.com/phonegap-build/PushPlugin)

In my resources Folder i have 6 different Application Icons specified, from ldpi to xxxhdpi

<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

Now after i build this, my final resources folder structure looks something like this:

android/res/drawable-ldpi/icon.png
android/res/drawable-mdpi/icon.png

and so on...

Now this works perfectly fine for the App icon on all devices. But if i get a Push Notification, the app icon appearing in the status bar is too big, so only the middle of the icon is displayed (only for the first seconds, seems there is a reload of the notification after that (if i pull down the status bar for example) it is displayed correctly).

After a bit of research i found that the icons i provided are correct for the general app icons, but icons for the status bar have to be in another dimension as i found out here: Android status bar expects icons of size 25x25dp while guidelines recommend 32x32dp. Who is wrong? (2nd answer)

For example, using my Samsung s5 i switched out my xxhdpi icon of 144*144px for the same icon in 72*72px size and it works. the icon is not cut anymore.

---

Now to my question: How do i have to setup this "secondary" icons which i use for the notifications only in my resources folder without overwriting the original ones?

Phalanx

Did you try to generate all your icons with the generator provided by the ionic team? ionicframework.com/docs/cli/icon-splashscreen.html – Probative

actually i didnt. thanks for the hint, will try it out. – Phalanx

Doesn't make a difference. Icon is still broken on push notification (when its received the first time..) – Phalanx

@Kryptik did you solve this? – Kaciekacy

nope. not trying at the moment, but didn't find a solution yet. – Phalanx

Answer 1

You don't need to be so stricted about the image size. Put two icons in the platform/android/res/drawable folder. One to show on navigation bar on lollipop (eg.: small_icon.png), it needs to be white and with no background. And other one to older android versions (eg.: large_icon.png).

Open the PushPlugin config file located at:

platforms/android/src/com/plugin/gcm/GCMIntentService.java

Set your icons path in the NotificationCompat.Builder object:

.setSmallIcon(com.domain.appName.R.drawable.small_icon)
.setLargeIcon(largeIcon)

The large icon needs to be a bitmap, so define before that:

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

Bitmap largeIcon = BitmapFactory.decodeResource(getResources(), com.domain.appName.R.drawable.large_icon);

Hope it helps you.

Epicritic

Thanks, actually very helpful for me, but not for this case. Adding the LargeIcon only makes a difference for me on Lollipop after i pulled down the statusbar (to see the notification details). There i have now the large Icon with a (100% white) small icon on the lower right side of the large icon. But the problem on the statusbar still remains. – Phalanx