Notificações push do Android: ícone não exibido na notificação, quadrado branco exibido

179

Meu aplicativo gera uma notificação, mas o ícone definido por ela não está sendo exibido. Em vez disso, recebo um quadrado branco.

Tentei redimensionar o png do ícone (dimensões 720x720, 66x66, 44x44, 22x22). Curiosamente, ao usar dimensões menores, o quadrado branco é menor.

Pesquisei esse problema no Google, bem como a maneira correta de gerar notificações e, pelo que li, meu código deve estar correto. Infelizmente as coisas não são como deveriam ser.

Meu telefone é um Nexus 5 com Android 5.1.1. O problema também está presente nos emuladores, um Samsung Galaxy s4 com Android 5.0.1 e um Motorola Moto G com Android 5.0.1 (ambos os quais eu emprestei e não tenho no momento)

Segue o código para notificações e duas capturas de tela. Se você precisar de mais informações, não hesite em pedir.

Obrigado 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);
}

sem abrir a notificação notificações abertas

Blueriver
fonte
4
Possível duplicata do ícone da barra
Ciro Santilli 8 冠状 8 六四 事件
1
Aqui está uma
solução alternativa para
corrigiu esse problema? ainda estou enfrentando o mesmo problema, na barra de status superior ainda mostrando o espaço em branco para a notificação se eu adicionar a imagem transparente
AngelJanniee
Sim, eu o corrigi criando um ícone transparente ou segmentando o SDK versão 20 ou inferior. Se isso não resolver o problema, talvez o seu problema semelhante tenha uma causa diferente. Sugiro definir a versão do SDK de destino como 20 e verificar se isso muda alguma coisa. Se isso não acontecer, não tenho certeza se esta pergunta pode ajudá-lo :(
Blueriver 16/17

Respostas:

188

Causa: Para o Lollipop 5.0, "Os ícones de notificação devem ser totalmente brancos".

Se resolvermos o problema do ícone branco definindo o SDK de destino como 20, nosso aplicativo não segmentará o Android Lollipop, o que significa que não podemos usar recursos específicos do Lollipop.

Solução para o alvo Sdk 21

Se você deseja dar suporte aos ícones de materiais do Lollipop, crie ícones transparentes para o Lollipop e a versão acima. Consulte o seguinte: https://design.google.com/icons/

Veja http://developer.android.com/design/style/iconography.html e veremos que o estilo branco é como as notificações devem ser exibidas no Android Lollipop.

No Lollipop, o Google também sugere que usemos uma cor que será exibida atrás do ícone de notificação em branco. Consulte o link: https://developer.android.com/about/versions/android-5.0-changes.html

Onde queremos adicionar o cores https://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setColor(int)

A implementação do Notification Builder para a versão inferior e superior do sistema operacional Lollipop seria:

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 está disponível apenas no Lollipop e afeta apenas o plano de fundo do ícone.

Resolverá seu problema completamente !!

Garima Mathur
fonte
Uau, obrigada. Eu pensei que eles deveriam ser totalmente brancos, uma vez que alguns aplicativos que tenho no meu telefone têm ícones coloridos. Agora eu vejo o motivo. Obrigado!
Blueriver
3
Ao dizer targetSdkVersion 20 , você salvou meu dia! Muito obrigado.
Arshad Ali
11
Sua forma incorreta de definir a versão do targetSDK para <21 apenas por motivos de ícones. É melhor corrigi-lo da maneira correta, conforme descrito nesta resposta: stackoverflow.com/questions/27343202/…
user90766
1
mas no fundo quando o aplicativo não está na pilha que está mostrando os ícones brancos, o que fazer para conseguir mesmo resultado em qualquer caso
Pratik Vyas
1
Eu tentei de tudo, mas não está funcionando. ele ainda está mostrando dot com uma menção cor no arquivo de manifesto
Harsh Shah
67

Se você estiver usando o Google Cloud Messaging, esse problema não será resolvido simplesmente mudando seu ícone. Por exemplo, isso não 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();

Mesmo se ic_notification for transparente e branco. Também deve ser definido nos metadados do Manifest, da seguinte forma:

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

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

Os metadados estão sob a applicationtag, para referência.

Ruchir Baronia
fonte
6
Muito obrigado pela dica com os metadados no manifesto.
Eugen Timm
como você coloca "@ drawable / ic_notification"? é um ícone? muitos? é PNG?
Luke Pighetti
1
@LukePighetti podem ser muitos se você estiver carregando imagens de tamanhos diferentes para várias resoluções de tela. Caso contrário, sim, pode ser um arquivo PNG no seu diretório de desenho.
Ruchir Baronia 8/08/19
1
@RuchirBaronia então, para o exemplo acima res/drawable/ic_notification.pngde tamanho 196x196?
Luke Pighetti 08/08/19
thx @RuchirBaronia, votou positivamente na Meta-datasugestão de tags.
Ravi Vaniya
37

Eu realmente sugiro seguir as Diretrizes de design do Google :

que diz "Os ícones de notificação devem ser totalmente brancos".

NJ
fonte
2
Sua resposta é ainda melhor do que a que aceitei. Gostaria de poder aceitar o seu também. Não posso, mas você tem meu +1 e minha gratidão. Felicidades!
Blueriver
2
Esta não é uma resposta muito boa. E se os envolvidos no projeto precisassem segmentar o Android 7? Não posso apenas segmentar qualquer versão do SDK antes disso.
Neon Warge
1
A resposta foi negativa, pois o questionador diz que não consigo executar meu aplicativo no sdk21. A resposta diz "não use sdk 21"
Utsav Gupta 29/11
1
Isso realmente não é uma solução.
Jose Gómez
1
Não consigo encontrar nada nas diretrizes de design atuais que especifiquem que o ícone deve ser branco em um plano de fundo transparente. Independentemente da documentação pobre, ainda parece ser o caso.
Imagio 17/07/19
29

Declare este código no Android Manifest:

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

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

Espero que seja útil para você.

maick vicky
fonte
Oh meu! Este funciona perfeito para notificações push do FCM! Obrigado
Crono
1
Onde você está colocando ic_stat_name? É um png? são muitos? por favor ajude!
Luke Pighetti
3
@Luke Pighetti Em Android Estúdio Clique direito sobre App >> New >> ativos de imagem >> IconType (notificação)
Vicky Mahale
1
(Eu sei que já faz um tempo, mas) Você poderia, por favor, explicar isso? O que isso deve fazer? Torna o ícone não transparente em cores ou o quê?
afe
Essa é a resposta adequada para notificações de mensagens na nuvem do firebase.
Greg Ellis
11

(Android Studio 3.5) Se você é uma versão recente do Android Studio, pode gerar suas imagens de notificação. Clique com o botão direito na pasta res > Novo> Ativo da imagem . Você verá Configurar ativos de imagem, como mostra a imagem abaixo. Altere o tipo de ícone para ícones de notificação . Suas imagens devem ser brancas e transparentes. Este recurso Configurar imagem aplicará essa regra. Importante: Se você deseja que os ícones sejam usados ​​para notificações na nuvem / push, adicione os metadados sob a tag do aplicativo para usar os ícones de notificação recém-criados.Configurar ativos de imagem

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

Podemos fazer como abaixo:

Crie um novo objeto do construtor de notificações e chame setSmallIcon()usando o objeto do construtor de notificações, como no código abaixo.

Crie um método no qual verificaremos em qual versão do sistema operacional estamos instalando nosso aplicativo. Se estiver abaixo do Lolipop, ou seja, API 21, o ícone normal do aplicativo será usado com a cor de fundo, caso contrário, o ícone transparente do aplicativo será sem fundo. Portanto, os dispositivos que usam a versão do sistema operacional> = 21 definirão a cor de plano de fundo do ícone usando o método setColor()da classe do construtor Notification.

Código de amostra:

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;
}
rahul sharma
fonte
Eu testei setColorno Kitkat (API 19) e IceCreamSandwich (API 15), em ambos os casos, ignorou a cor, mas não travou . Então, posso omitir com segurança a verificação da versão do sistema operacional?
Maria
10

Tente isto

eu estava enfrentando o mesmo problema, tentei muitas respostas, mas não obtive nenhuma solução, finalmente encontrei o caminho para resolver o meu problema.

- faça o ícone de notificação com fundo transparente. A largura e a altura do aplicativo devem ser como os tamanhos abaixo e cole tudo isso em seu projeto-> app-> src-> main-> res

  • MDPI 24 * 24

  • HDPI 36 * 36

  • XHDPI 48 * 48

  • XXHDPI 72 * 72


após o acima, cole esta linha abaixo no seu 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());

Não se esqueça de adicionar este código no arquivo de manifesto

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

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

adicione esta linha no arquivo manifest.xml no bloco de aplicativos

Sajidh Zahir
fonte
7

Se você deseja fornecer o ícone de notificação de suporte de pirulito, faça dois ícones de notificação de tipo:

  1. ícone de notificação normal: para a versão abaixo do pirulito.
  2. ícone de notificação com fundo transparente: para pirulito e versão acima.

Agora defina o ícone apropriado para o construtor de notificações no tempo de execução, na versão do sistema operacional:

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);
}
Haresh Chhelana
fonte
7

Finalmente, tenho a solução para esse problema.

Esse problema ocorre apenas quando o aplicativo não está em execução. (nem em segundo plano nem em primeiro plano) . Quando o aplicativo é executado em primeiro plano ou em segundo plano, o ícone de notificação é exibido corretamente . (Não o quadrado branco)

Portanto, o que devemos definir é a mesma configuração para o ícone de notificação nas APIs de back-end e a do Frontend.

No frontend, usamos o React Native e, para notificação por push, usamos o pacote 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
   });
});

Usamos o pacote fcm-push npm usando o Node.js como back-end para notificação por push e configuramos a estrutura de carga útil da seguinte maneira.

{
  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"
  }
}

O que ele basicamente procura pela imagem notification_icon armazenada localmente em nosso sistema Android.

Aniruddha Shevle
fonte
1
Seu problema é MUITO diferente do meu, embora tenha o mesmo efeito. Obrigado por postar esta resposta, provavelmente ajudará alguém usando a mesma pilha de tecnologia que você está usando.
Blueriver
1
@IanWarburton: Não há necessidade.
Aniruddha Shevle
5

As notificações são escala de cinza, conforme explicado abaixo. Eles não são em preto e branco, apesar do que outros escreveram. Você provavelmente já viu ícones com vários tons, como barras de força da rede.

Antes da API 21 (Lollipop 5.0), os ícones de cores funcionavam. Você pode forçar seu aplicativo a segmentar a API 20, mas isso limita os recursos disponíveis para ele, portanto, não é recomendado. Você pode testar o nível da API em execução e definir um ícone de cor ou em escala de cinza adequadamente, mas isso provavelmente não vale a pena. Na maioria dos casos, é melhor usar um ícone em escala de cinza.

As imagens têm quatro canais, RGBA (vermelho / verde / azul / alfa). Para ícones de notificação, o Android ignora os canais R, G e B. O único canal que conta é o Alpha, também conhecido como opacidade. Crie seu ícone com um editor que lhe dê controle sobre o valor Alfa de suas cores de desenho.

Como os valores Alpha geram uma imagem em escala de cinza:

  • Alfa = 0 (transparente) - esses pixels são transparentes, mostrando a cor de fundo.
  • Alfa = 255 (opaco) - esses pixels são brancos.
  • Alfa = 1 ... 254 - Esses pixels são exatamente o que você esperaria, fornecendo os tons entre transparente e branco.

Alterando-o com setColor:

  • Ligue NotificationCompat.Builder.setColor(int argb). A partir da documentação para Notification.color:

    Cor de destaque (um número inteiro ARGB como as constantes em Cor) a ser aplicado pelos modelos de estilo padrão ao apresentar esta notificação. O design atual do modelo constrói uma imagem de cabeçalho colorida sobrepondo a imagem do ícone (estampada em branco) sobre um campo dessa cor. Componentes alfa são ignorados.

    Meus testes com setColor mostram que os componentes Alpha não são ignorados. Valores alfa mais altos tornam um pixel branco. Os valores alfa mais baixos transformam um pixel na cor de plano de fundo (preto no meu dispositivo) na área de notificação ou na cor especificada na notificação suspensa.

Jeremy Frank
fonte
5

Resolvi o problema adicionando o código abaixo 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" />

onde ic_stat_namecriado no Android Studio Clique com o botão direito do mouse em res >> Novo >> Recursos de imagem >> IconType (Notification)

E mais uma etapa que tenho que fazer no lado do servidor php com a carga útil da notificação

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

        "token" => $token,

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

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


    ]
];

Observe a seção

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

onde está o nome do ícone "icon" => "ic_stat_name"deve ser o mesmo conjunto no manifesto.

Haris
fonte
4

Encontrei um link onde podemos gerar nosso próprio ícone branco,

tente este link para gerar o ícone branco do ícone do iniciador.

Abra este link e faça o upload do seu ic_launcher ou ícone de notificação

Ghanshyam Nayma
fonte
1

Você pode usar um ícone diferente para diferentes versões. Basta definir a lógica no seu ícone assim:

int icon = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? R.drawable.colored_: R.drawable.white_tint_icon_for_lolipop_or_upper;
Md. Al- Rasel
fonte
1

Para SDK> = 23, adicione 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();
Caat c
fonte
1

Para reduzir versões específicas do SDK, você pode simplesmente fazer o seguinte: (substitua '#' por '0x')

Notification notification = new NotificationCompat.Builder(this);
notification.setSmallIcon(R.drawable.icon_transperent);
notification.setColor(0x169AB9); //for color: #169AB9
dongkichan
fonte
0xFF169AB9, você está perdendo o canal alfa totalmente opaco.
Eugen Pechanec 13/10/19
0

Quando você quiser manter o ícone colorido - Solução alternativa
Adicione pixel com cores ligeiramente diferentes ao ícone.
No meu caso, um ícone preto com sombras e luz. Quando adicionado pixel azul escuro, ele funciona.

Vouskopes
fonte
0

Tenho um problema semelhante no Android 8.0. Tente usar o recurso de ícone BRANCO. Eu tenho um quadrado branco quando estou tentando usar uma imagem colorida para o ícone; quando eu o substituo pelo ícone branco, ele começa a funcionar.

Zeon
fonte