B4A Library Wrapper for KenBurnsView - an animated ImageView

Ken Burns Effect is a visual effect developed by director Ken Burns to animate photos, mostly in documentaries.


Now there is an ImageView available for Android called KenBurnsView that allows us to use this effect

https://github.com/flavioarfaria/KenBurnsView

Please develop a wrapper for this ImageView

 

[Erel]

The library is attached. It is implemented as a custom view. You need to add a CustomView with the designer and set its Custom Type to KenBurnsView.

You can pause and resume the transition and you can handle the TransitionStart and TransitionEnd events.

 

[eps]

Wow, that was quick!

 

[Erel]

Here is the source code:

package anywheresoftware.b4.objects;

import android.view.ViewGroup;
import anywheresoftware.b4a.BA;
import anywheresoftware.b4a.BA.DontInheritEvents;
import anywheresoftware.b4a.BA.Events;
import anywheresoftware.b4a.BA.ShortName;
import anywheresoftware.b4a.BA.Version;
import anywheresoftware.b4a.keywords.Common.DesignerCustomView;
import anywheresoftware.b4a.objects.ImageViewWrapper;
import anywheresoftware.b4a.objects.LabelWrapper;
import anywheresoftware.b4a.objects.PanelWrapper;
import anywheresoftware.b4a.objects.ViewWrapper;

import com.flaviofaria.kenburnsview.KenBurnsView;
import com.flaviofaria.kenburnsview.Transition;
import com.flaviofaria.kenburnsview.KenBurnsView.TransitionListener;

@Version(1.0f)
@ShortName("KenBurnsView")
@Events(values={"Click", "LongClick", "TransitionStart", "TransitionEnd"})
public class KenBrunsViewWrapper extends ImageViewWrapper implements DesignerCustomView{
   private BA ba;
   private String eventName;

   public void _initialize(BA ba, Object activityClass, String EventName) {
     this.eventName = EventName.toLowerCase(BA.cul);
     this.ba = ba;
   }

   public void DesignerCreateView(PanelWrapper base, LabelWrapper lw, anywheresoftware.b4a.objects.collections.Map props) {
     final KenBurnsView kbv = new KenBurnsView(ba.context);
     setObject(kbv);
     innerInitialize(ba, eventName, true);
     PanelWrapper pw = new PanelWrapper();
     pw.setObject((ViewGroup)base.getObject().getParent());
     pw.AddView(kbv, base.getLeft(), base.getLeft(), base.getWidth(), base.getHeight());
     setBackground(base.getBackground());
     kbv.setImageDrawable(getBackground());
     base.RemoveView();
     kbv.setTransitionListener(new TransitionListener() {

       @Override
       public void onTransitionEnd(Transition transition) {
         ba.raiseEventFromUI(kbv, eventName + "_transitionend");
         
       }

       @Override
       public void onTransitionStart(Transition transition) {
         ba.raiseEventFromUI(kbv, eventName + "_transitionstart");
       }
       
     });
   }
   /**
    * Pauses the transition.
    */
   public void Pause() {
     ((KenBurnsView)getObject()).pause();
   }
   /**
    * Resumes the transition.
    */
   public void Resume() {
     ((KenBurnsView)getObject()).resume();
   }
}

 

[eps]

Thanks for sharing this, who knows I might even take more than a cursory look at it, if I can squeeze in the time!

 

[Inman]

Thank you Erel for the super fast implementation.

I tried to add it via code (I always do it that way). Here is what I did.

    Dim kb As KenBurnsView
kb.Initialize("kb")
kb.Bitmap=LoadBitmap(File.DirAssets,"VIcxDWr.jpg")
Activity.AddView(kb,10dip,10dip,100%x-20dip,100%y-20dip)

It is displaying the image but only like a normal ImageView. There is no animation or anything. I tried kb.Pause and kb.Resume but those displayed errors.

BTW there is a kb._initialize function as well which I am not sure how to use.

 

[Erel]

Currently this view can only be added with the designer.

You should add it as a custom view and set its background from the designer to a BitmapDrawable.

 

[Inman]

Oh ok. I actually wanted to use in the DayDream mode for displaying a photo slideshow with Ken Burns effect.

When you get time, please update the view so that it can be added via code.

 

[eps]

Erel, pardon my ignorance, what is the difference here between adding in Code and the Designer?

Inman, surely you can add in the Designer and then manipulate it in code?

 

[Erel]

The library code implements the "custom view" interface and doesn't provide a way to create it from code.

 

[Inman]

Inman, surely you can add in the Designer and then manipulate it in code?

I believe you cannot load a layout in DayDream mode.

Erel, I tried to do it with the Designer but at runtime all I get is an empty Panel like area with rounded corners, instead of the bitmap I set it to load via code at runtime. Since this is the first time I am using Designer, it could very well be something I did wrong, although I did add a label along with it via Designer which is working correctly.

The TransitionStart and TransitionEnd events are raised correctly, so something is happening. It is just that I can't see it.

 

[NJDude]

Nice lib, however, I have a question, what's that: "_initialize" and also, the arg0, arg1, etc, should be more explicit.

 

[Erel]

You cannot call this method. It is part of the custom view interface.

If I remember correctly it cannot be hidden.

 

[Informatix]

You cannot call this method. It is part of the custom view interface.

If I remember correctly it cannot be hidden.

It is hidden in my BetterImageView lib and I cannot see any bad consequence. Is there one?

 

[Erel]

No. If it is working then it is fine. Apparently only DesignerCreateView needs to be visible.

 

[Inman]

Erel, I tried to do it with the Designer but at runtime all I get is an empty Panel like area with rounded corners, instead of the bitmap I set it to load via code at runtime. Since this is the first time I am using Designer, it could very well be something I did wrong, although I did add a label along with it via Designer which is working correctly.

The TransitionStart and TransitionEnd events are raised correctly, so something is happening. It is just that I can't see it.

So, did anyone manage to get it to work?

 

[Erel]

Can you upload your project (File - Export as zip)?

 

[Inman]

Here is the project. Please see if I made some blunder. I tried it on a Galaxy Note running Android 4.4.2.

https://mega.co.nz/#!zsgSDBQY!EGueZd08ofLKpPHFt7Ipp2hw6NVYGzPMcy52-1GUVAI

 

[Erel]

You need to set the image with the designer:

First add the Image file.

 

[Inman]

You need to set the image with the designer:

First add the Image file.

Ah! So you cannot change the image at runtime? That's sad.

I hope you will develop it into a normal view, when time allows.