Develop Reference

MvxFragment enter animation

I want to implement enter and exit fragment animation during navigation in MVVMCross project.
[MvxFragmentPresentation(typeof(TestViewModel),
Resource.Id.content_frame, true,
Resource.Animation.enter_from_right,
Resource.Animation.exit_nothing_animation)]
enter_from_right
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%p" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
exit_nothing_animation
<?xml version="1.0" encoding="UTF-8" ?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromAlpha="1"
android:toAlpha="1" />
I expect that new fragment slide from right over the old frgamnet and old fragment will remain in the same place.
But new fragment just instantly appears without animation
Other topics suggest use Add insted Replace, but what the right way in MVVMCross project?

Answer is override this method in base fragment class
public override Animation OnCreateAnimation(int transit, bool enter, int nextAnim)
{
if (nextAnim == Resource.Animation.enter_from_right)
{
ViewCompat.SetTranslationZ(view, 1f);
}
else
{
ViewCompat.SetTranslationZ(view, 0f);
}
return base.OnCreateAnimation(transit, enter, nextAnim);
}

Xamarin.Forms. Swipe to previous page like Telegram

How create swipe to back?
In iOS:
[assembly: ExportRenderer(typeof(HIPSTO.Controls.CustomContentPage), typeof(HIPSTO.iOS.Platform.Renderers.IOSPageRenderer))]
namespace HIPSTO.iOS.Platform.Renderers
{
public class IOSPageRenderer : PageRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
ViewController.NavigationController.InteractivePopGestureRecognizer.Enabled = true;
ViewController.NavigationController.InteractivePopGestureRecognizer.Delegate = new UIKit.UIGestureRecognizerDelegate();
}
}
}
But it only works from the edge. It is necessary from any place.
No ideas with android
As below shown:

First, You could achieved by NavigationPageRenderer in android.
This is GIF of this demo
TransitionNavigationPageRender.cs
[assembly: ExportRenderer(typeof(SwipePageDemo.Controls.TransitionNavigationPage), typeof(TransitionNavigationPageRenderer))]
namespace SwipePageDemo.Droid.Renderers
{
public class TransitionNavigationPageRenderer : NavigationPageRenderer
{
public TransitionNavigationPageRenderer(Context context) : base(context)
{
}
protected override void SetupPageTransition(Android.Support.V4.App.FragmentTransaction transaction, bool isPush)
{
if (isPush)
{
}
else
{
transaction.SetCustomAnimations(Resource.Animation.enter_left, Resource.Animation.exit_right,
Resource.Animation.enter_right, Resource.Animation.exit_left);
}
}
}
}
enter_left.xml
<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="enter_from_left"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300"/>
</set>
enter_right.xml
<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300" />
</set>
exit_left.xml
<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300"/>
</set>
exit_right.xml
<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300" />
</set>
If you want to know more details about Page Transition , you could refer to this link.
https://github.com/jsuarezruiz/xamarin-forms-page-transitions
But it only works from the edge. It is necessary from any place
You could achieved it by threshold property of SwipeGestureRecognizer class
The SwipeGestureRecognizer class also includes a Threshold property, that can be optionally set to a uint value that represents the minimum swipe distance that must be achieved for a swipe to be recognized, in device-independent units. The default value of this property is 100, meaning that any swipes that are less than 100 device-independent units will be ignored. If you want to increase the area that can be swiped, you could reduce this data of Threshold like following code.
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
leftSwipeGesture.Threshold = 50;
leftSwipeGesture.Swiped += (sender, e) => Navigation.PopAsync();
stackLayout.GestureRecognizers.Add(leftSwipeGesture);
I changed value of leftSwipeGesture.Threshold to 50, this is GIF of swipe.

Android objectAnimator set propertyValuesHolder

When I changed code line android:propertyName="scaleX" to android:propertyName="alpha", animation is not working!
Code
AnimatedVectorDrawableCompat mAnimatedVectorDrawable = AnimatedVectorDrawableCompat.create(
getApplication(), R.drawable.v_frame_animation
);
image.setImageDrawable(mAnimatedVectorDrawable);
if (mAnimatedVectorDrawable != null) {
mAnimatedVectorDrawable.start();
}
animator/v_frame_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:drawable="#drawable/gears_copy">
<target
android:name="vaaa"
android:animation="#animator/heart_frame_animator" />
</animated-vector>
animator/heart_frame_animator.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="5000"
android:repeatCount="infinite"
android:valueType="floatType">
<propertyValuesHolder
android:propertyName="scaleX"
android:valueType="floatType">
<keyframe
android:fraction="0"
android:interpolator="#android:anim/accelerate_interpolator"
android:value="0" />
<keyframe
android:fraction=".5"
android:interpolator="#android:anim/accelerate_interpolator"
android:value="1" />
<keyframe
android:fraction="1"
android:interpolator="#android:anim/accelerate_interpolator"
android:value="0" />
</propertyValuesHolder>
</objectAnimator>

If you want to add fade animation to your android, you can use this xml code.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0"
android:toAlpha="1.0"
android:duration= "2000"
/>
</set>
This code makes the alpha value go from 0 to 1.0 in 2000ms.
Don't forget to add this in your res/anim folder and add this to your Activity.java
try {
Animation myFadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.splash);
splash.startAnimation(myFadeInAnimation);//splash is an ImageView
}catch (NullPointerException e){
e.printStackTrace();
}
This should solve it.
Happy Coding.

layout animation issues

First, sorry for my english, i'm vietnamese and my english is bad so please don't be mad ok!
hi everyone, i have to create an app with using animation for layout (pushleft and pushright)
this is my code :
ArrayList<LinearLayout>linear=new ArrayList<LinearLayout>();
Animation animLeft,animRight;
for(int i=0;i<10;i++)
{
LinearLayout llayout=new LinearLayout(getApplicationContext());
LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
lp.setMargins(0, 0, 0, 0);
llayout.setLayoutParams(lp);
llayout.setId(i);
if(i%2==0)
{
llayout.setAnimation(animLeft);
Log.d("SetAnimation,Left","i:"+i);
llayout.startLayoutAnimation();
}
else
{
llayout.setAnimation(animRight);
Log.d("SetAnimation,Right","i:"+i);
llayout.startLayoutAnimation();
}
linear.add(llayout);
}
//code for animation :
+pushleft
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
+pushright
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
public void CreateGame(int round)
{
///////////Load all method//////////////
tvarray=TaoTextView(round);
addTexttoLayoutbyRandom(round, tvarray);
for(int i=0;i<round;i++)
{
Linearcenter.addView(linear.get(i));
//linear.get(i).startLayoutAnimation();
}
////////////////////////////////////////
Linearcenter.startLayoutAnimation();
iResult=RandomRound(round);
iRound=round;
//Linearcenter.startLayoutAnimation();
}
I set CreateGame in onCreate(), pleaze ignore some param extraneous (like round,iRound,iResult ..)
when the application start i just see 1 child layout effect and it's a first layout with id = 0
What's wrong??plz tell me why ?

How to use fade in and fade out effect with an image using Transition, android

I have seen in Android mobile. When i click photo gallery, one image is opened (Fade in) and after I clicked disappeared (Fade out).
Same, I have done in my app. I have pasted one image in Drawable. And applied Fade in and Fade out conditions. But I have not seen any images than sky blue color background. That is view.
How could I do this programmatically in Android?
In what way can I fix this problem? What mistake have I done here?
My code is:
btn=(Button)findViewById(R.id.Click);
viewToAnimate=(View)findViewById(R.id.view1);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(viewToAnimate.getVisibility()==View.VISIBLE)
{
boolean toRight = false;
Context c = null;
//Animation out=AnimationUtils.makeOutAnimation(this,true);
Animation out=AnimationUtils.makeOutAnimation(c, toRight);
viewToAnimate.startAnimation(out);
viewToAnimate.setVisibility(View.INVISIBLE);
} else {
int id = 0;
Context c = null;
// Animation in = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
Animation in=AnimationUtils.loadAnimation(c, id);
viewToAnimate.startAnimation(in);
viewToAnimate.setVisibility(View.VISIBLE);
}
}
} );
} }
Then in Main.xml :
<Button
android:id="#+id/Click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fade" />
<View
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#AAA"
android:src="#drawable/fade"/>

for fadeIn.xml
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="2000"/>
</set>
for fadeOut.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="2000"/>
</set>
try using this animation in your image view..

This works for me:
Fade in-
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="1000" />
</set>
Fade out-
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="1000" />
</set>