Notificaciones push de Android: el icono no se muestra en la notificación, en su lugar se muestra un cuadrado blanco


179

Mi aplicación genera una notificación, pero el icono que configuré para esa notificación no se muestra. En cambio, obtengo un cuadrado blanco.

He intentado cambiar el tamaño del png del icono (dimensiones 720x720, 66x66, 44x44, 22x22). Curiosamente, cuando se usan dimensiones más pequeñas, el cuadrado blanco es más pequeño.

He buscado en Google este problema, así como la forma correcta de generar notificaciones, y por lo que he leído, mi código debe ser correcto. Lamentablemente, las cosas no son como deberían ser.

Mi teléfono es un Nexus 5 con Android 5.1.1. El problema también está presente en los emuladores, un Samsung Galaxy s4 con Android 5.0.1 y un Motorola Moto G con Android 5.0.1 (los cuales tomé prestados y no tengo ahora)

Sigue el código para las notificaciones y dos capturas de pantalla. Si necesita más información, no dude en solicitarla.

Gracias a todos.

@SuppressLint("NewApi") private void sendNotification(String msg, String title, String link, Bundle bundle) {
    NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
    Intent resultIntent = new Intent(getApplicationContext(), MainActivity.class);
    resultIntent.putExtras(bundle);
    PendingIntent contentIntent = PendingIntent.getActivity(this, 0,
            resultIntent, Intent.FLAG_ACTIVITY_NEW_TASK);
    Notification notification;
    Uri sound = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.notificationsound);
    notification = new Notification.Builder(this)
                .setSmallIcon(R.drawable.lg_logo)
                .setContentTitle(title)
                .setStyle(new Notification.BigTextStyle().bigText(msg))
                .setAutoCancel(true)
                .setContentText(msg)
                .setContentIntent(contentIntent)
                .setSound(sound)
                .build();
    notificationManager.notify(0, notification);
}

sin abrir la notificación notificaciones abiertas




solucionó este problema? Todavía estoy enfrentando el mismo problema, en la barra de estado superior sigo mostrando el espacio en blanco para la notificación si agrego la imagen transparente
AngelJanniee

Sí, lo arreglé creando un ícono transparente o seleccionando SDK versión 20 o inferior. Si esto no lo soluciona para usted, tal vez su problema similar tenga una causa diferente. Sugiero configurar la versión de destino del SDK en 20 y verificar si esto cambia algo. Si no es así, no estoy seguro de si esta pregunta puede ayudarlo :(
Blueriver

Respuestas:


188

Causa: para 5.0 Lollipop "Los iconos de notificación deben ser completamente blancos".

Si resolvemos el problema del icono blanco configurando el SDK de destino en 20, nuestra aplicación no apuntará a Android Lollipop, lo que significa que no podemos usar las características específicas de Lollipop.

Solución para el objetivo Sdk 21

Si desea admitir iconos de material de Lollipop, haga iconos transparentes para Lollipop y la versión anterior. Consulte lo siguiente: https://design.google.com/icons/

Mire http://developer.android.com/design/style/iconography.html , y veremos que el estilo blanco es cómo se deben mostrar las notificaciones en Android Lollipop.

En Lollipop, Google también sugiere que usemos un color que se mostrará detrás del ícono de notificación blanco. Enlace de referencia: https://developer.android.com/about/versions/android-5.0-changes.html

Donde queramos agregar colores https://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setColor(int)

La implementación de Notification Builder para la versión de Lollipop OS anterior y posterior sería:

Notification notification = new NotificationCompat.Builder(this);
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    notification.setSmallIcon(R.drawable.icon_transperent);
    notification.setColor(getResources().getColor(R.color.notification_color));
} else { 
    notification.setSmallIcon(R.drawable.icon);
} 

Nota: setColor solo está disponible en Lollipop y solo afecta al fondo del icono.

¡Resolverá su problema por completo!


Wow gracias. Pensé que DEBEN ser completamente blancos, ya que algunas aplicaciones que tengo en mi teléfono tienen iconos de colores. Ahora veo la razón. ¡Gracias!
Blueriver

3
Al decir targetSdkVersion 20 , ¡me salvaste el día! muchas gracias.
Arshad Ali

11
Es una mala forma establecer la versión targetSDK en <21 solo por el bien de los iconos. Es mejor arreglarlo de la manera correcta, como se describe en esta respuesta: stackoverflow.com/questions/27343202/…
user90766

1
pero en segundo plano, cuando la aplicación no está en la pila, muestra los íconos blancos, qué hacer para obtener el mismo resultado en cualquier caso
Pratik Vyas

1
Intenté todo pero no funciona. todavía muestra un punto con una mención de color en el archivo de manifiesto
Harsh Shah

67

Si está utilizando Google Cloud Messaging, este problema no se resolverá simplemente cambiando su icono. Por ejemplo, esto no funcionará:

 Notification notification  = new Notification.Builder(this)
                .setContentTitle(title)
                .setContentText(text)
                .setSmallIcon(R.drawable.ic_notification)
                .setContentIntent(pIntent)
                .setDefaults(Notification.DEFAULT_SOUND|Notification.DEFAULT_LIGHTS|Notification.DEFAULT_VIBRATE)
                .setAutoCancel(true)
                .build();

Incluso si ic_notification es transparente y blanco. También debe definirse en los metadatos Manifiesto, así:

  <meta-data android:name="com.google.firebase.messaging.default_notification_icon"

            android:resource="@drawable/ic_notification" />

Los metadatos van debajo de la applicationetiqueta, como referencia.


66
Muchas gracias por la pista con los metadatos dentro del manifiesto.
Eugen Timm

¿Cómo se coloca "@ drawable / ic_notification"? ¿Es un ícono? ¿muchos? ¿es PNG?
Luke Pighetti

1
@LukePighetti pueden ser muchos si está cargando imágenes de diferentes tamaños para múltiples resoluciones de pantalla. De lo contrario, sí, puede ser un archivo PNG en su directorio dibujable.
Ruchir Baronia

1
@RuchirBaronia, ¿para el ejemplo anterior res/drawable/ic_notification.pngde tamaño 196x196?
Luke Pighetti

thx @RuchirBaronia, votó por la Meta-datasugerencia de etiqueta.
Ravi Vaniya

37

Realmente sugiero seguir las pautas de diseño de Google :

que dice "Los iconos de notificación deben ser completamente blancos".


2
Tu respuesta es incluso mejor que la que acepté. Ojalá pudiera aceptar el tuyo también. No puedo, pero tienes mi +1 y mi gratitud. ¡Salud!
Blueriver

2
Esta no es una muy buena respuesta. ¿Qué sucede si las partes interesadas del proyecto deben apuntar a Android 7? No puedo apuntar a cualquier versión de SDK antes de eso.
Neon Warge

1
Rechazó esta respuesta porque es incorrecta. El interlocutor dice que no puedo ejecutar mi aplicación en sdk21. La respuesta dice "no use SDK 21"
Utsav Gupta

1
Esto realmente no es una solución.
Jose Gómez

1
No puedo encontrar nada en las pautas de diseño actuales que especifiquen que el icono debe ser blanco sobre un fondo transparente. Independientemente de la mala documentación, todavía parece ser el caso.
imagio

29

Declare este código en el Manifiesto de Android:

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" 

android:resource="@drawable/ic_stat_name" />

Espero que esto te sea útil.


¡Oh mi! ¡Este funciona perfecto para notificaciones push FCM! Gracias
Crono

1
¿Dónde estás poniendo ic_stat_name? ¿Es un png? ¿son muchos? ¡por favor ayuda!
Luke Pighetti

3
@Luke Pighetti En Android Studio Haga clic derecho en la aplicación >> Nuevo >> Recursos de imagen >> IconType (Notificación)
vicky mahale

1
(Sé que ha pasado un tiempo pero) ¿Podrías explicarme esto? ¿Qué se supone que haga? ¿Representa el ícono no transparente a todo color o qué?
afe

Esta es la respuesta adecuada para las notificaciones de mensajería en la nube de Firebase.
Greg Ellis

11

(Android Studio 3.5) Si es una versión reciente de Android Studio, puede generar sus imágenes de notificación. Haga clic derecho en su carpeta res > Nuevo> Activo de imagen . Luego verá Configurar activos de imagen como se muestra en la imagen a continuación. Cambiar el tipo de icono a iconos de notificación . Sus imágenes deben ser blancas y transparentes. Esta configuración de activos de imagen hará cumplir esa regla. Importante: si desea que los íconos se usen para notificaciones en la nube / push, debe agregar los metadatos debajo de la etiqueta de su aplicación para usar los íconos de notificación recién creados.Configurar activos de imagen

  <application>
      ...
      <meta-data android:name="com.google.firebase.messaging.default_notification_icon"
          android:resource="@drawable/ic_notification" />

10

Podemos hacer lo siguiente:

Cree un nuevo objeto de generador de notificaciones y llame setSmallIcon() usando el objeto generador de notificaciones como en el código a continuación.

Cree un método en el que verifiquemos en qué versión del sistema operativo estamos instalando nuestra aplicación. Si está debajo de Lolipop, es decir, API 21, tomará el ícono normal de la aplicación con el color de fondo; de lo contrario, tomará el ícono transparente de la aplicación sin ningún fondo. Por lo tanto, los dispositivos que usan la versión del sistema operativo> = 21 establecerán el color de fondo del icono usando el métodosetColor() de la clase de generador de notificaciones.

Código de muestra:

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this);

notificationBuilder.setSmallIcon(getNotificationIcon(notificationBuilder));

private int getNotificationIcon(NotificationCompat.Builder notificationBuilder) {

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
             int color = 0x008000;
             notificationBuilder.setColor(color);
             return R.drawable.app_icon_lolipop_above;

    } 
    return R.drawable.app_icon_lolipop_below;
}

He probado setColoren Kitkat (API 19) y IceCreamSandwich (API 15), en ambos casos ignoró el color pero no se bloqueó . Entonces, ¿puedo omitir con seguridad la comprobación de la versión del sistema operativo?
Maria

10

Prueba esto

Estaba enfrentando el mismo problema que probé muchas respuestas pero no obtuve ninguna solución, finalmente encontré la manera de resolver mi problema.

- Haga un icono de notificación con fondo transparente. El ancho y la altura de la aplicación deben ser como los tamaños inferiores y pegue todo esto en su proyecto-> aplicación-> src-> main-> res

  • MDPI 24 * 24

  • HDPI 36 * 36

  • XHDPI 48 * 48

  • XXHDPI 72 * 72


después de lo anterior, pegue esta línea a continuación en su método onMessageReceived


Intent intent = new Intent(this, News.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, intent,
                    PendingIntent.FLAG_ONE_SHOT);
            Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
            NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this);
            if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
            {
                notificationBuilder.setSmallIcon(R.drawable.notify)
                                      //            .setContentTitle(title)
                            //                        .setContentText(message)
                        .setAutoCancel(true)
                        .setSound(defaultSoundUri)
                        .setContentIntent(pendingIntent);
            } else
                {
                    notificationBuilder.setSmallIcon(R.drawable.notify)
                       //                                .setContentTitle(title)
                        //                        .setContentText(message)
                            .setAutoCancel(true)
                            .setSound(defaultSoundUri)
                            .setContentIntent(pendingIntent);
            }
            NotificationManager notificationManager =
                    (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
            notificationManager.notify(0, notificationBuilder.build());

No olvides agregar este código en el archivo de manifiesto

<meta-data 
android:name="com.google.firebase.messaging.default_notification_icon" 
android:resource="@drawable/app_icon" />

10
 <meta-data android:name="com.google.firebase.messaging.default_notification_icon"

        android:resource="@drawable/ic_notification" />

agregue esta línea en el archivo manifest.xml en el bloque de aplicación


7

Si desea proporcionar el icono de notificación de soporte de lollipop, haga dos tipos de icono de notificación:

  1. icono de notificación normal: para la versión de lollipop a continuación
  2. icono de notificación con fondo transparente: para piruleta y versiones superiores.

Ahora configure el icono apropiado para el generador de notificaciones en la base de tiempo de ejecución en la versión del sistema operativo:

NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this);
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    mBuilder.setSmallIcon(R.drawable.ic_push_notification_transperent);
} else {
    mBuilder.setSmallIcon(R.drawable.ic_push_notification);
}

7

Finalmente tengo la solución para este problema.

Este problema ocurre solo cuando la aplicación no se está ejecutando. (ni en el fondo ni en primer plano) . Cuando la aplicación se ejecuta en primer plano o en segundo plano, el icono de notificación se muestra correctamente (no el cuadrado blanco)

Entonces, lo que debemos establecer es la misma configuración para el icono de notificación en las API de backend que la de Frontend.

En la interfaz hemos usado React Native y para notificaciones push hemos usado el paquete react-native-fcm npm .

FCM.on("notification", notif => {
   FCM.presentLocalNotification({
       body: notif.fcm.body,
       title: notif.fcm.title,
       big_text: notif.fcm.body,
       priority: "high",
       large_icon: "notification_icon", // notification icon
       icon: "notification_icon",
       show_in_foreground: true,
       color: '#8bc34b',
       vibrate: 300,
       lights: true,
       status: notif.status
   });
});

Hemos usado el paquete fcm-push npm usando Node.js como back-end para notificaciones push y configuramos la estructura de carga de la siguiente manera.

{
  to: '/topics/user', // required
  data: {
    id:212,
    message: 'test message',
    title: 'test title'
  },
  notification: {
    title: 'test title',
    body: 'test message',
    icon : 'notification_icon', // same name as mentioned in the front end
    color : '#8bc34b',
    click_action : "BROADCAST"
  }
}

Lo que básicamente busca es la imagen de sondeo_notificación almacenada localmente en nuestro sistema Android.


1
Su problema es MUY diferente al mío, aunque tiene el mismo efecto. Gracias por publicar esta respuesta, probablemente ayudará a alguien que use la misma pila de tecnología que está utilizando.
Blueriver

1
@ IanWarburton: No es necesario.
Aniruddha Shevle

5

Las notificaciones son en escala de grises como se explica a continuación. No son en blanco y negro, a pesar de lo que otros han escrito. Probablemente haya visto iconos con varios tonos, como barras de fuerza de red.

Antes de API 21 (Lollipop 5.0), los iconos de color funcionan. Podría obligar a su aplicación a apuntar a la API 20, pero eso limita las características disponibles para su aplicación, por lo que no se recomienda. Puede probar el nivel de API en ejecución y establecer un icono de color o un icono de escala de grises de manera adecuada, pero probablemente no valga la pena. En la mayoría de los casos, es mejor ir con un ícono en escala de grises.

Las imágenes tienen cuatro canales, RGBA (rojo / verde / azul / alfa). Para los iconos de notificación, Android ignora los canales R, G y B. El único canal que cuenta es Alpha, también conocido como opacidad. Diseñe su icono con un editor que le brinde control sobre el valor Alfa de los colores de su dibujo.

Cómo los valores alfa generan una imagen en escala de grises:

  • Alfa = 0 (transparente): estos píxeles son transparentes y muestran el color de fondo.
  • Alfa = 255 (opaco): estos píxeles son blancos.
  • Alfa = 1 ... 254: estos píxeles son exactamente lo que esperarías, proporcionando los tonos entre transparente y blanco.

Cambiándolo con setColor:

  • Llamar NotificationCompat.Builder.setColor(int argb). De la documentación para Notification.color:

    Color de acento (un número entero ARGB como las constantes en color) que las plantillas de estilo estándar deben aplicar al presentar esta notificación. El diseño actual de la plantilla construye una imagen de encabezado colorida superponiendo la imagen del icono (estampada en blanco) sobre un campo de este color. Los componentes alfa se ignoran.

    Mi prueba con setColor muestra que los componentes Alpha no se ignoran. Los valores alfa más altos convierten un píxel en blanco. Los valores alfa más bajos convierten un píxel al color de fondo (negro en mi dispositivo) en el área de notificación, o al color especificado en la notificación desplegable.


5

He resuelto el problema agregando el siguiente código para manifestar,

    <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/ic_stat_name" />

    <meta-data
        android:name="com.google.firebase.messaging.default_notification_color"
        android:resource="@color/black" />

dónde ic_stat_name creó en Android Studio Haga clic derecho en res >> Nuevo >> Activos de imagen >> IconType (Notificación)

Y un paso más que tengo que hacer en el lado del servidor php con la carga de notificación

$message = [
    "message" => [
        "notification" => [
            "body"  => $title , 
            "title" => $message
        ],

        "token" => $token,

    "android" => [
           "notification" => [
            "sound"  => "default",
            "icon"  => "ic_stat_name"
            ]
        ],

       "data" => [
            "title" => $title,
            "message" => $message
         ]


    ]
];

Tenga en cuenta la sección

    "android" => [
           "notification" => [
            "sound"  => "default",
            "icon"  => "ic_stat_name"
            ]
        ]

donde el nombre del icono "icon" => "ic_stat_name"debe ser el mismo conjunto en el manifiesto.



4

Encontré un enlace donde podemos generar nuestro propio icono blanco,

prueba este enlace para generar el ícono blanco del ícono del iniciador.

Abra este enlace y cargue su ic_launcher o icono de notificación


1

Puede usar diferentes íconos para diferentes versiones. Simplemente configure la lógica en su icono de esta manera:

int icon = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? R.drawable.colored_: R.drawable.white_tint_icon_for_lolipop_or_upper;

1

Para SDK> = 23, agregue setLargeIcon

notification = new Notification.Builder(this)
            .setSmallIcon(R.drawable.ic_launcher)
            .setLargeIcon(context.getResources(), R.drawable.lg_logo))
            .setContentTitle(title)
            .setStyle(new Notification.BigTextStyle().bigText(msg))
            .setAutoCancel(true)
            .setContentText(msg)
            .setContentIntent(contentIntent)
            .setSound(sound)
            .build();

1

Para reducir las versiones específicas del SDK, simplemente puede hacer esto: (reemplace '#' a '0x')

Notification notification = new NotificationCompat.Builder(this);
notification.setSmallIcon(R.drawable.icon_transperent);
notification.setColor(0x169AB9); //for color: #169AB9

0xFF169AB9, te falta el canal alfa completamente opaco.
Eugen Pechanec

0

Cuando desee mantener el ícono colorido: solución alternativa
Agregue píxeles con un color ligeramente diferente al ícono.
En mi caso, tengo un icono negro con sombras y luz. Cuando se agrega un píxel azul oscuro, funciona.


0

Tengo un problema similar en Android 8.0. Intenta utilizar el recurso de icono BLANCO. Tengo un cuadrado blanco cuando intento usar una imagen en color para el icono, cuando lo reemplazo al icono blanco, comienza a funcionar.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.