We Keep Coding

Visual bug with native plugin animation in Ionic 4 Capacitor

I'm currently working in a custom android native plugin for Capacitor. The plugin consists in an app's footer which is working fine except for a hiding animation.
The problem is I'm changing the WebView margin everytime the footer is being shown/hide, which makes a black(sometimes is orange, probably because is one of app's main colors) bar appears in the space occupied by the footer. Black bar disappears once the animation ends.
I've tried changing the WebView margin at animation start/end and the result is the same.
Thanks in advance guys, here is some code.
Animation XML:
<translate
android:duration="150"
android:fromYDelta="0"
android:toYDelta="100%" />
WebView margin function:
private void changeWebViewMargin(float pixels) {
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) wb.getLayoutParams();
params.setMargins(0, 0, 0, (int) dpTopixel(getContext(), pixels));
wb.setLayoutParams(params);
wb.requestLayout();
}
Hide function:
#PluginMethod()
public void hide(PluginCall call) {
Boolean animated = call.getBoolean("animated");
if (animated == null) {
animated = false;
}
final boolean finalAnimated = animated;
this.getBridge().getActivity().runOnUiThread(new Runnable() {
#Override
public void run() {
if (finalAnimated && footer.getVisibility() == View.VISIBLE) {
changeWebViewMargin(0f);
Animation myAnim = AnimationUtils.loadAnimation(getBridge().getContext(), R.anim.hide_footer);
myAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
footer_img.setVisibility(View.INVISIBLE);
footer.setVisibility(View.INVISIBLE);
btn3.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
footer.startAnimation(myAnim);
footer_img.startAnimation(myAnim);
btn3.startAnimation(myAnim);
} else {
footer_img.setVisibility(View.INVISIBLE);
footer.setVisibility(View.INVISIBLE);
btn3.setVisibility(View.INVISIBLE);
changeWebViewMargin(0f);
}
}
});
}

Instead of working with margins try using WindowInsets:
ViewCompat.setOnApplyWindowInsetsListener(wb, (v, insets) -> {
((ViewGroup.MarginLayoutParams) v.getLayoutParams()).bottomMargin =
insets.getSystemWindowInsetTop() + (int) dpTopixel(getContext(), pixels);
return insets.consumeSystemWindowInsets();
});

How would I animate multiple views at the same time over different points?

I'm quite new to Android Studio, and I would like to animate multiple images at the same time, over multiple coordinates.
Let's say I would like to move image A from 0/0 to 100/100, and then to 200/200; at the same time (eg. by the click of a button), image B shall be moved from 0/100 to 100/100, and then to 200/100. All with simple translations.
(As a plus, I would like to be able to set the duration of the movements independently.)
When the animations have finished, there should be an event (somthing like OnAnimationFinish?) to trigger other things, like enabling the start button again.
What would be the most effective way to do this? I know there is an AnimationSet in Android to store multiple animations, but I don't know if this is helpful here.
Thanks in advance!

You can use ObjectAnimator with AnimatorSet to play multiple animations simultaneously with proper listeners.
For example():
val imageXAnimator = ObjectAnimator.ofFloat(imageView, "translationX", translateX)
val imageYAnimator = ObjectAnimator.ofFloat(imageView, "translationY", translateY)
val imageAlphaAnimator = ObjectAnimator.ofFloat(imageView, "alpha", if (reverse) 0F else 1F)
val animationSet = AnimatorSet()
animationSet.playTogether(
imageXAnimator,
imageYAnimator,
imageAlphaAnimator)
animationSet.interpolator = DecelerateInterpolator()
animationSet.duration = 1000
animationSet.addListener(
onStart = {
//When animation is started
},
onEnd = {
//When animation finishes
}
)
animationSet.start()
Or a simple extension in kotlin which can be called on a specific View:
inline fun View.animateTranslationY(translationY: Float, duration: Long = 1000, startDelay: Long = 0) {
val translationYAnimator = ObjectAnimator.ofFloat(this, "translationY", translationY)
translationYAnimator.duration = duration
translationYAnimator.startDelay = startDelay
translationYAnimator.interpolator = LinearInterpolator()
translationYAnimator.addAnimatorListener(
onStart = { },
onEnd = { }
)
translationYAnimator.start()
}

You can use the "View.animate()" method that allow you to access to its sub-methods and events to manage all these stuff. You just have to call "animate()" on a View (TextView, ImageView, EditBox, etc..) and then call its sub-methods to decide what kind of animation to perform: motion, rotation, changing transparency, etc... For each animation you can set a listener that will be called at Start and/or at the End of animation.

Consider these two methods for both views
private void animateFirstView(final ImageView first, long durationFirst, final long durationSecond) {
first.setTranslationX(0);
first.setTranslationY(0);
first.animate().translationX(100).translationY(100).setDuration(durationFirst).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
first.animate().translationY(200).translationX(200).setDuration(durationSecond).setListener(null).setInterpolator(new LinearInterpolator()).start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}).setInterpolator(new LinearInterpolator()).start();
}
private void animateSecondView(final ImageView second, long durationFirst, final long durationSecond) {
second.setTranslationX(0);
second.setTranslationY(100);
second.animate().translationX(100).translationY(100).setDuration(durationFirst).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
second.animate().translationY(200).translationX(100).setDuration(durationSecond).setListener(null).setInterpolator(new LinearInterpolator()).start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}).setInterpolator(new LinearInterpolator()).start();
}

You can do this:
private void playAnimation(final View view, final int endRangeY) {
view.animate().translationY(endRangeY) //endRangeY where you want to end the animation
.alpha(0.0f)
.setDuration(3000)
.setListener(new AnimatorListenerAdapter() {
#Override public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
}
});
}

How to rotate image in imageview on button click each time?

This is java code.I am getting image from image gallery.I have one Button and one ImageView. It is rotating only one time.When I again click button it is not rotating image.
public class EditActivity extends ActionBarActivity
{
private Button rotate;
private ImageView imageView;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_edit);
rotate=(Button)findViewById(R.id.btn_rotate1);
imageView = (ImageView) findViewById(R.id.selectedImage);
String path = getIntent().getExtras().getString("path");
final Bitmap bitmap = BitmapFactory.decodeFile(path);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageBitmap(Bitmap.createScaledBitmap(bitmap, 510, 500,
false));
rotate.setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
imageView.setRotation(90);
}
});
}

Change your onClick() method to
#Override
public void onClick(View v)
{
imageView.setRotation(imageView.getRotation() + 90);
}
Notice, what the docs say
Sets the degrees that the view is rotated around the pivot point. Increasing values result in clockwise rotation.
I'd like to update my answer to show how to use RotateAnimation to achieve the same effect in case you're also targeting Android devices running Gingerbread (v10) or below.
private int mCurrRotation = 0; // takes the place of getRotation()
Introduce an instance field to track the rotation degrees as above and use it as:
mCurrRotation %= 360;
float fromRotation = mCurrRotation;
float toRotation = mCurrRotation += 90;
final RotateAnimation rotateAnim = new RotateAnimation(
fromRotation, toRotation, imageview.getWidth()/2, imageView.getHeight()/2);
rotateAnim.setDuration(1000); // Use 0 ms to rotate instantly
rotateAnim.setFillAfter(true); // Must be true or the animation will reset
imageView.startAnimation(rotateAnim);
Usually one can setup such View animations through XML as well. But, since you have to specify absolute degree values in there, successive rotations will repeat themselves instead of building upon the previous one to complete a full circle. Hence, I chose to show how to do it in code above.

Rotate video SurfaceView inside a ViewPage

I'm using a SurfaceView as display to a MediaPlayer, but the video is sideways and I need to rotate it. I tried using SurfaceView.setRotation(90) but this gave me a black View.
If I set the rotation to any degree lower than 90, the video translates to the right (being pushed behind the content of the other page in the ViewPage) by a relative amount.
Here is the code I'm using to create the view and play the video:
final SurfaceView surface = new SurfaceView(getActivity());
surface.setRotation(90);
surface.getHolder().addCallback(new SurfaceHolder.Callback(){
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {}
#Override
public void surfaceCreated(SurfaceHolder holder) {
holder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
mPlayer = new MediaPlayer();
mPlayer.setDisplay(surface);
try {
mPlayer.setDataSource(url);
mPlayer.setLooping(true);
mPlayer.setVideoScalingMode(MediaPlayer.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING);
} catch (IOException e) {
e.printStackTrace();
}
mPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
#Override
public void onPrepared(MediaPlayer mp) {
mp.start();
}
});
mPlayer.prepareAsync();
mPlayer.setScreenOnWhilePlaying(true);
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
mPlayer.stop();
mPlayer.release();
}
});
As said, I'm adding the surface to a ViewPage. The video plays, and, aside from rotation, everything else works.
I tried mPlayer.setSurface(holder.getSurface()) with the same results.
I tried using TextureView with limited success. It rotated, but I couldn't scale it and keep aspect ratio with cropping.
Tried locking the canvas and rotating the canvas of the holder, but all I've got was a black View, no matter what degree.

How to animate a Drawable in Android?

I have a Drawable object in my application which is moving on the screen:
public class MyDrawable extends Drawable {
#Override
public void draw(Canvas canvas) {
// ...
}
// ...
}
It worked fine so far but now I have to animate this Drawable. I checked out the documentation and it looks like that the best option for me is using AnimationDrawable.
I did something like this:
public void addAnimation() {
animation = new AnimationDrawable();
animation.addFrame(resources.getDrawable(R.drawable.anim_0), 100);
animation.addFrame(resources.getDrawable(R.drawable.anim_1), 100);
animation.addFrame(resources.getDrawable(R.drawable.anim_2), 100);
animation.addFrame(resources.getDrawable(R.drawable.anim_3), 100);
animation.setOneShot(false);
refreshAnimationBounds();
animation.start();
}
#Override
public void draw(Canvas canvas) {
refreshAnimationBounds();
animation.draw(canvas);
}
What happens is that my original Drawable is moving as intended but I only see the first frame. What could be the problem?
refreshAnimationBounds(); is just refreshing the bounds of my Drawable object (repositions it).
Edit:
The common:
public void onWindowFocusChanged(boolean hasFocus) {
if (hasFocus) {
animation.start();
} else {
animation.stop();
}
}
solution is not working.

In general Animation package is quite buggy. I recall I had same problem with animation not starting and the solution I came with was to start it not in onCreate() as I formerly did but onWindowFocusChanged() once all view stuff was set. I wasn't extending AnimationDrawable myself but it may be the same origin in your case.