Notification BigPictureStyle을 사용하여 스타일리쉬한 푸시 메시지를 보여주자!

Notification BigPictureStyle

 

우리는 푸시(Push)메시지를 받았을때 Notification을 화면의 상단에 디스플레이합니다.

이제는 젤리빈부터 스타일리쉬한 BigPictureStyle을 사용할 수 있게 되었습니다.

위의 사진과 같이 아래로 드래그 하면 사진이 확장되어 보여지는 Notification의 기능입니다.

간단하게 제가 만들어 놓은 코드를 공유합니다.

본 예제에서 BigPictureStyle의 큰 이미지는 디바이스 리소스에 저장되어 있는 이미지를 보여주지 않고,

서버에 있는 이미지 URL을 이용하여 비동기로 이미지를 Display 해주는 구조로 되어 있습니다.

사용된 오픈 라이브러리

- Gilde (이미지 라이브러리)

 

private void sendNotification(String title, String subtitle, String bigImage, String bigTitle, String bigSubtitle) {
    Intent intent = new Intent(this, IntroActivity.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);

    //Notification Builder
    final Notification.Builder notificationBuilder = new Notification.Builder(this)
            .setSmallIcon(R.drawable.icon)
            .setContentTitle(title)
            .setContentText(subtitle)
            .setAutoCancel(true)
            .setSound(defaultSoundUri)
            .setContentIntent(pendingIntent);

    //NotificationManager
    final NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

    if(bigImage != null) {
        if (!bigImage.equals("")) {
            notificationBigStyle(notificationManager, notificationBuilder, bigImage, bigTitle, bigSubtitle);
            return;
        }
    }
        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
}

title : 이미지를 드래그를 통해서 큰 이미지를 보여주기 전에 보여지는 타이틀 텍스트

subtitle : 이미지를 드래그를 통해서 큰 이미지를 보여주기 전에 보여지는 내용 텍스트

bigImage : BigPicture에서 사용될 큰 이미지 주소 (HTTP URLl)

bigTitle : 이미지를 드래그하여 확장된 상태에서 보여줄 타이틀 텍스트

bigSubtitle : 이미지를 드래그하여 확장된 상태에서 보여줄 내용 텍스트

위의 코드에서 한가지 조건이 추가되어 있습니다.

bigImage의 데이터가 NULL이라면 큰이미지가 없으므로 BigPictureStyle 형태의 Notification을 사용하지 않고,

일반 Notification을 사용하게 합니다.

BigImage의 데이터가 NULL이 아니고 URL이 존재한다면 BigPictureStyle 형태의 Notification을 세팅하고 사용하도록 아래의 메서드를 호출하도록 구성하였습니다.

    /**
     * BigStyle의 Notification을 Notify합니다.
     * @param notificationManager
     * @param notificationBuilder
     * @param bigImagePath 빅피쳐스타일 표시될 이미지 주소
     * @param bigTitle 빅피쳐스타일 표시될 타이틀
     * @param bigSubTitle 빅피쳐스타일 표시될 내용
     */
    private void notificationBigStyle(final NotificationManager notificationManager, final Notification.Builder notificationBuilder,
                                      String bigImagePath, final String bigTitle, final String bigSubTitle){
        //BigPicture Style
        Log.d(TAG, "BigPicture Style init");
        final Notification.BigPictureStyle bigPictureStyle = new Notification.BigPictureStyle(notificationBuilder);
        Glide.with(getApplicationContext())
                .load(bigImagePath)
                .asBitmap()
                .into(new SimpleTarget<Bitmap>(720,384) {
                    @Override
                    public void onResourceReady(final Bitmap resource, GlideAnimation glideAnimation) {
                        Log.d(TAG, "Glide onResourceReady.. Bitmap resource");
                            if(resource != null){
                              Log.d(TAG, "resource is null..");  
                            }

                        bigPictureStyle.setBigContentTitle(bigTitle);
                        bigPictureStyle.setSummaryText(bigSubTitle);
                        bigPictureStyle.bigPicture(resource);
                        notificationBuilder.setStyle(bigPictureStyle);
                        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
                    }

                    @Override
                    public void onLoadFailed(Exception e, Drawable errorDrawable) {
                        Log.d(TAG, "onLoadFailed..");

                    }
                });
         }

만약 이 코드를 참고하시는 프로그래머님께서 비동기로 서버에 있는 이미지를 디스플레이 시키지 않고, 리소스에 있는 BigImage를 사용하신다면 이미지 라이브러리 Glide를 사용하지 않으셔도 됩니다.

서버의 이미지를 불러와 디스플레이 하지 않으신다면 bigPicture() 메서드의 파라미터를 수정해주세요.

리소스에 존재하는 Bitmap을 전달하면 됩니다.

서버에 있는 이미지를 URL을 통해서 비동기로 디스플레이 하셔야 할 경우에는 위의 코드를 그대로 쓰셔도 좋습니다.

몇몇 매끄럽지 못한 부분들은 다듬어서 사용하셔도 좋습니다.

궁금하신 부분은 댓글 주시면 제가 알고 있는 부분에서는 답변 해드리겠습니다.