Animation in Notification Bar Custom View

Animation in Notification bar Custom View

The best way I have found to show a custom animation in a notification is to use an AnimationDrawable as a resource with an ID. Then simply specify the drawable resource ID when you post your notification. No further code is needed to update each frame of the animation. The animation drawable handles that for you.

Here is a link to documentation: http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html

So for example you would need to:

1. Add an xml file (such as "wheelAnim.xml") to your res/drawable/ folder with the following contents:

   <!-- Animation frames are wheel0.png -- wheel5.png files inside the
        res/drawable/ folder -->
    <animation-list android:id="selected" android:oneshot="false">
       <item android:drawable="@drawable/wheel0" android:duration="50" />
       <item android:drawable="@drawable/wheel1" android:duration="50" />
       <item android:drawable="@drawable/wheel2" android:duration="50" />
       <item android:drawable="@drawable/wheel3" android:duration="50" />
       <item android:drawable="@drawable/wheel4" android:duration="50" />
       <item android:drawable="@drawable/wheel5" android:duration="50" />
   </animation-list>
   

2. Add each drawable reference in the xml file you just created for the animation-list (be it PNG or other image format) in the res/drawable/ folder as well.

3. Use the resource ID of the animation-list (which in this example is "R.drawable.wheelAnim") in your code. For example:

   Notification notification = new Notification(R.drawable.wheelAnim, null,
       System.currentTimeMillis());
   
   PendingIntent pendingIntent = PendingIntent.getActivity(this, 0,
       new Intent(), 0);
   
   notification.flags |= Notification.FLAG_AUTO_CANCEL;
   
   notification.setLatestEventInfo(this, getText(R.string.someTitle),
       getText(R.string.someText), pendingIntent);
   
   ((NotificationManager) getSystemService(NOTIFICATION_SERVICE)).notify(
       uid, notification);
   

Is it possible to make an animation icon on the notifications window (Android)

The video in your referenced question (which I admit I didn't see was the same as one of the links I gave) clearly shows an animated icon there. At about 0:35. http://www.youtube.com/watch?v=yNcs-sS2nFU&t=0m32s (this link jumps to that part). The arrow has a little black line move down through it repeatedly. Seems like animation to me. Is that what you want?

Regardless, what Android version is that on? Maybe it's something custom from T-Mobile, I don't know, it's just some video on YouTube.

You can create a custom view for the notification, for example: http://www.roman10.net/android-custom-notification-with-progress-bar/ You might be able to use a similar idea with an animation drawable (same SO question again) where Roman10's got the default android image.

RemoteViews contentView = new RemoteViews(getPackageName(), R.layout.noti);
contentView.setImageViewResource(... your animated resource ...);

Edit

So in the end RemoteViews doesn't support animation in the image resource as far as I can tell. But I figured out a way to work around that and it is possibly expensive, but I haven't profiled it to see how the CPU usage is.

I started with the code at roman10 (link above) and made a couple of modifications.

yinyangAnim.xml + animation frame .png files

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/yinyang0" android:duration="150" />
    <item android:drawable="@drawable/yinyang1" android:duration="150" />
    <item android:drawable="@drawable/yinyang2" android:duration="150" />
    <item android:drawable="@drawable/yinyang3" android:duration="150" />
    <item android:drawable="@drawable/yinyang4" android:duration="150" />
    <item android:drawable="@drawable/yinyang5" android:duration="150" />    
</animation-list>

Add another thread creation to the start button click:

             new Thread(new Runnable() {
                    public void run() {
                        int frameIndex = 0;
                        mRun = true;
                        while (mRun) {
                            ++frameIndex;
                            SystemClock.sleep(100);
                            BitmapDrawable frame = (BitmapDrawable) yinyangAnimation.getFrame(frameIndex);
                            noti.contentView.setImageViewBitmap(R.id.status_icon, frame.getBitmap());
                            nm.notify(STATUS_BAR_NOTIFICATION, noti);
                            if (frameIndex >= yinyangAnimation.getNumberOfFrames()-1) {
                                frameIndex = 0;
                            }
                        }

                    }
                  }).start();

Add to ProgressBarNotificationActivity.onCreate()

     ImageView yinyang = new ImageView(this);
     yinyang.setBackgroundResource(R.drawable.yinyang_anim);
     yinyangAnimation = (AnimationDrawable) yinyang.getBackground();

And the private variable of course: private AnimationDrawable yinyangAnimation;

Pressing the start button in the app and viewing the notification shows the spinning yin-yang for me. I got the yin-yang at loadinfo.net and split it using ImageMagick command line (ubuntu).

How to animate the progress notification icon

you can make the animation list as described above in the answer of Rushab patel but there could be problem if you are using the newst api and if you are targetting the new sdk .

so this following line would become outdated and deprecated

Notification notification = new Notification(R.drawable.wheelAnim,
null, System.currentTimeMillis());

which is too bad in coding notification , I must suggest you as you have described above that you are using notification builder , thus I would recomend you to directly use this animation list drawable in the notification builder.

from your snippet

mBuilder =
                    new NotificationCompat.Builder(DownloadService.this)
                            .setSmallIcon(R.drawable.youAnimationList)
                            .setContentTitle("MayUp")
                            .setContentText("Downloading new tools")
                            .setTicker("Downloading in progress");
            mBuilder.setAutoCancel(true);

Android - show animated status bar icon

The solution is simple, but very tricky. You just need to add

notificationBuilder.setTicker(getString(R.string.notification_ticker));

the magic happens and your icon is animated. It is related to this bug:

http://code.google.com/p/android/issues/detail?id=15657

Hope it helps someone.

Are animated notification bar icons acceptable?

I think it is not recommended to use by Google but acceptable.

Google: We make Android guidelines only to not follow them and force
everybody else to do the same.

I did not find any official Google guidelines for animeted Notification icons but there is a lot of usefull information

https://material.io/guidelines/patterns/notifications.html#notifications-behavior

Animate status bar alongside custom transition in segue

The reason why you couldn't see the animation is because in your second view controller you always return true to prefersStatusBarHidden, then such view controller starts with that condition, hence doesn't have any "chance" for playing the animation.

So in the second view controller you might try doing so:

class ViewController2: UIViewController {
  override var preferredStatusBarUpdateAnimation: UIStatusBarAnimation { get { return .slide } }
  override var prefersStatusBarHidden: Bool { return statusBarHidden }
  var statusBarHidden = false

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    self.statusBarHidden = true
    UIView.animate(withDuration: 0.35) {
      self.setNeedsStatusBarAppearanceUpdate()
    }
  }
}

Moreover in your Info.plist be sure to have View controller-based status bar appearance= YES

Change status bar style with animation

It's now a variable you have to override:

override var preferredStatusBarStyle: UIStatusBarStyle
override var preferredStatusBarUpdateAnimation: UIStatusBarAnimation

Depending on when you update the status bar, you might also have to call setNeedsStatusBarAppearanceUpdate()

---

Related Topics