Tag Archives: Android

Ze Flippable View in Xamarin.Forms with Native Animations…

Let’s blend some Native Animation goodness to our Flippin’ Flipity Flippable View in Xamarin.Forms…

So I hop yol’ remember my previous post, It’s a Flippin’ Flipity Flippable View in Xamarin.Forms! where I showcased my awesome control built right from Xamarin.Forms without any native code implementation. 😉

  

But you may have noticed a slight issue in the Flip Animation, specially on Android and iOS as well (slightly though), where Flip animation moves the View out of it’s bounds.

^As you can see above, in the animation screenshots… 😮

Some improvement needed…

If you look closely, during the flip rotation, the View sort of scales up itself and moves out of the bounds of itself and scales back and revert back to the normal bounds.

This was kind of annoying me from a personal perspective, so that’s why I thought of finding a solution by trying to render the whole animation natively for Android and iOS separately. 😀

Behold ze Native Animation…

So basically the whole logic of the FlipViewControl is going to be the same, only the animation part would be executed natively. Let’s discuss how we could implement a native animation for each Android and iOS below. 😀

As of Android…

As of Android, the reason why the View scales out of bounds during the flip animation is because that is the default behavior of Flip Animation in Android. Since Xamarin.Forms Aniamtions binds to the native default behavior you could definitely expect it to behave that way. There’s an aspect called Camera View distance perspective for any given view, by default during any animation the Camera View aspect doesn’t change, thus causing the overblown effect of the Flip Animation.

So by implementing a native animation what we could achieve is to control the Camera View Distance value for each animation frame manually, also something to keep in mind this needs to be done according to the Screen density. I found this solution thanks to this forum post:  https://forums.xamarin.com/discussion/49978/changing-default-perspective-after-rotation

As of iOS…

Here for the iOS its not much of an issue, but you do see a bit of the View scaling out of the boundary. So let’s dive into the iOS native flip animation.

We’ll be using a CATransform3D to maintain the transformation of the View’s Layer and execute the animation using UIView.Animate(), we will be using two CATransform3D objects to make sure the View doesn’t scale beyond the boundaries during the animation. This whole awesome solution I found via a random snippet search https://gist.github.com/aloisdeniel/3c8b82ca4babb1d79b29

Time for some coding…

Let’s get started off with the subclassed custom control, naming it XNFlipView and the implementation is actually same as our previous XFFlipView control implementation, but the only difference is there’s no Xamarin.Forms Animation implementation, or handling of the IsFlipped property in the PCL code, since it will be handled in the Renderer level.

public class XNFlipView : ContentView
{
	public XNFlipView()
	{
		...
	}

	public static readonly BindableProperty FrontViewProperty
	...

	public static readonly BindableProperty BackViewProperty
	...
	
	// Everything else is same as XFFlipView implementation

	public static readonly BindableProperty IsFlippedProperty =
	BindableProperty.Create(
		nameof(IsFlipped),
		typeof(bool),
		typeof(XNFlipView),
		false,
		BindingMode.Default,
		null);

	/// <summary>
	/// Gets or Sets whether the view is already flipped
	/// ex : 
	/// </summary>
	public bool IsFlipped
	{
		get { return(bool)this.GetValue(IsFlippedProperty);}
		set { this.SetValue(IsFlippedProperty, value); }
	}
	
	...
}

 

You can take a look at the full class implementation in the github repo file: XFFlipViewControl/XNFlipView.cs

Native Renderers implementation…

Since the animations are going to be handled natively, we need to create the Custom Renderers for our XNFlipView for Android and iOS separately, so let’s get started…

Android Custom Renderer

Alright then let’s go ahead and create the XNFlipViewRenderer  extending from ViewRenderer, as of Xamarin.Forms 2.5 and later we have to pass the Context in the Custom Renderer’s constructor, so let’s begin with that.

public class XNFlipViewRenderer : ViewRenderer
{
	private float _cameraDistance;

	private readonly ObjectAnimator _animateYAxis0To90;
	private readonly ObjectAnimator _animateYAxis90To180;

	public XNFlipViewRenderer(Context context) : base(context)
	{
		...
		//Animation Initialization
		...
	}

	protected override void 
		OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
	{
		base.OnElementChanged(e);

		if (((XNFlipView)e.NewElement) != null)
		{
			// Calculating Camera Distance 
                        //to be used at Animation Runtime
			// https://forums.xamarin.com/discussion/49978/changing-default-perspective-after-rotation
			var distance = 8000;
			_cameraDistance = Context.Resources.DisplayMetrics.Density * distance;
		}
	}

	protected override void 
		OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
	{
		base.OnElementPropertyChanged(sender, e);

		if (e.PropertyName == XNFlipView.IsFlippedProperty.PropertyName)
		{
			if (!((XNFlipView)sender).IsFlipped)
			{
				this.RotationY = 0;
			}

			AnimateFlipHorizontally();
		}
	}

	private void AnimateFlipHorizontally()
	{
		SetCameraDistance(_cameraDistance);

		_animateYAxis0To90.Start();
	}
}

 

Now as you can see above in the constructor we’re initializing the ObjectAnimator objects _animateYAxis0To90 and _animateYAxis90To180 which will be executing the native Flip Animation.

Then in the Renderer’s OnElementChanged we’re calculating the Camera distance value to be used during the Animations execution as we explained before in the concept.

Also you can see how we’re listening to the XNFlipView.IsFlipped value change and executing Animations.

Next let’s take a look into the Animation execution implementation which goes inside the Constructor as you can see in the previous code snippet…

// Initiating the first half of the animation
_animateYAxis0To90 = ObjectAnimator.OfFloat(this, "RotationY", 0.0f, -90f);
_animateYAxis0To90.SetDuration(500);
_animateYAxis0To90.Update += (sender, args) =>
{
	// On every animation Frame we have to update the Camera Distance since Xamarin overrides it somewhere
	SetCameraDistance(_cameraDistance);
};
_animateYAxis0To90.AnimationEnd += (sender, args) =>
{
	if (((XNFlipView)Element).IsFlipped)
	{
		// Change the visible content
		((XNFlipView)Element).FrontView.IsVisible = false;
		((XNFlipView)Element).BackView.IsVisible = true;
	}
	else
	{
		// Change the visible content
		((XNFlipView)Element).BackView.IsVisible = false;
		((XNFlipView)Element).FrontView.IsVisible = true;
	}

	this.RotationY = -270;

	_animateYAxis90To180.Start();
};

// Initiating the second half of the animation
_animateYAxis90To180 = ObjectAnimator.OfFloat(this, "RotationY", -270f, -360f);
_animateYAxis90To180.SetDuration(500);
_animateYAxis90To180.Update += (sender1, args1) =>
{
	// On every animation Frame we have to update the Camera Distance since Xamarin overrides it somewhere
	SetCameraDistance(_cameraDistance);
};

 

As you can see we’re instantiating the animation objects accordingly to the degree angle of the Y Axis they’re suppose to animate the view. Also something very important is that in each animation frame we’re also updating the Camera View Distance, as we discussed earlier this to prevent the View from scaling beyond it’s boundaries. That SetCameraDistance() call takes of it with the previous calculated value. 😉

You can also change the speed of the animation by changing the SetDuration() parameters, which currently I’ve set to 1 second.

You could take a look at the full implementation of the android custom renderer in the github file: XFFlipViewControl.Android/XNFlipViewRenderer.cs

iOS Custom Renderer

Alright then let’s move to the iOS Custom Renderer…

public class XNFlipViewRenderer : ViewRenderer

   protected override void
       OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
   {
       base.OnElementPropertyChanged(sender, e);

       if (e.PropertyName == XNFlipView.IsFlippedProperty.PropertyName)
       {
           if (((XNFlipView)sender).IsFlipped)
           {
             AnimateFlipHorizontally(NativeView, false, 0.5, () =>
             {
                 // Change the visible content
                 ((XNFlipView)sender).FrontView.IsVisible = false;
                 ((XNFlipView)sender).BackView.IsVisible = true;

                 AnimateFlipHorizontally
                           (NativeView, true, 0.5, null);
             });
           }
           else
           {
             AnimateFlipHorizontally(NativeView, false, 0.5, () =>
             {
                 // Change the visible content
                 ((XNFlipView)sender).FrontView.IsVisible = true;
                 ((XNFlipView)sender).BackView.IsVisible = false;

                 AnimateFlipHorizontally
                             (NativeView, true, 0.5, null);
             });
           }
       }
   }
   
   public void AnimateFlipHorizontally(...)
   {
       ...
   }

 

So here in iOS Renderer, it seems a bit straight forward as we’re simply listening to the IsFlipped property change and directly executing the animation.

Next let’s see the Animation implementation…

//https://gist.github.com/aloisdeniel/3c8b82ca4babb1d79b29
public void AnimateFlipHorizontally
	(UIView view, bool isIn, 
		double duration = 0.3, Action onFinished = null)
{
	var m34 = (nfloat)(-1 * 0.001);

	var minTransform = CATransform3D.Identity;
	minTransform.m34 = m34;
	minTransform = minTransform.
		Rotate((nfloat)((isIn ? 1 : -1) * Math.PI * 0.5),
			(nfloat)0.0f, (nfloat)1.0f, (nfloat)0.0f);
	var maxTransform = CATransform3D.Identity;
	maxTransform.m34 = m34;

	view.Layer.Transform = isIn ? minTransform : maxTransform;
	UIView.Animate(duration, 0, UIViewAnimationOptions.CurveEaseInOut,
		() => {
			view.Layer.AnchorPoint = new CGPoint((nfloat)0.5, (nfloat)0.5f);
			view.Layer.Transform = isIn ? maxTransform : minTransform;
		},
		onFinished
	);
}

 

So that’s basically the animation implementation code, which I have extracted from the given gist link at the top, which I have explained in the concept description as well.

You can change the speed of the flip animation by changing the duration.

You could take a look at the full implementation of the android custom renderer in the github file: XFFlipViewControl.iOS/XNFlipViewRenderer.cs

Try it out eh! 😀

Well its use is exactly same as our previous XFFlipView Control. As of an example you could take a look here in my github file: XNFlipViewDemoPage.xaml

So now to execute the awesome Flip Animation, simply change the value of the IsFlipped as follows.

XNFlipViewControl1.IsFlipped = !XNFlipViewControl1.IsFlipped;

 

As you can see in code behind, we’re changing the value of the control’s IsFlipped property, Simples eh! 😀 This is fully bindable as well, so you can directly bind this to a ViewModel property as well.

...
<xfFlipViewControl:XNFlipView 
     x:Name="XNFlipViewControl1" 
          IsFlipped="{Binding IsViewFlipped}">
...

</xfFlipViewControl:XNFlipView>

 

So you can directly use this in your beautifully crafted MVVM Xamarin.Forms app as well. 😀

Some Live Action…

Here we go baby! iOS and Android running side by side…

 

 

Woot!

Look at that the Flip Animation maintains the Bounds of the View nicely during the animation in both Android and iOS! 😉

This whole awesome project i hosted up in my Github repo : https://github.com/UdaraAlwis/XFFlipViewControl 

Cheers! 😀 Keep on going my fellow devs!

Spread the love…

Advertisements

It’s a Flippin’ Flipity Flippable View in Xamarin.Forms!

Something that Flips! Flipity Flippy Flippin’ Flip View right out of Xamarin.Forms yol! 😀

Sometime back while I was trying to push the limits of Xamarin.Forms Views, I came across this requirement of Flipping a View with a cool animation. So let me share the story of it right here as usual…

I wanted to create a control that would have a Front View and a Back View, whilst being able to switch between those two Views in with a cool Flip animation!

Behold ze me effortz… 😀

 

TADAAA! 😀 How cool it is eh! 😉

And its all pure Xamarin.Forms, without a single line of native code… Say whuut! 😀 lol

So yeah let’s see how I did it.

The Golden Recipe…

So the solution here is to simply use a View which can hold two layouts (where we will be placing out child elements in) on top of each other, and rotate the View with the easy use of  Xamarin.Forms Animations, whitest swapping the two layouts on top of each other accordingly.

Ok so let me elaborate step by step.

  • Prepare a MainLayout View to hold two child Layouts (FrontView and BackView) in it
  • Add the FrontView and BackView on top of each other inside the MainLayout  View
  • Rotate the MainLayout 90 degrees using Xamarin.Forms Animations API
  • Swap the FrontView and BackView 
  • Then Rotate the MainLayout another 90 degrees
  • And Repeat the same…

That’s it!

The Golden Control…

Alright let’s start of with creating a custom control, which we shall call the golden XFFlipView which would derive from a ContentView. Then myself be using a RelativeLayout as the Parent Layout View of this control,

I’m using bindable FrontViewProperty and BackViewProperty inside the XFFlipView control to hold the reference of the two child Layout Views that we are going to be using as FrontView and BackView of this Flippin’ Flippity Flippy thing! 😀

Additionally we are going to use a bindable boolean, IsFlippedProperty to handle the flipping of this flip view 😉

Well why all the “bindable properties” you might ask? Oh come on, why not silly! So we can monitor the changes of those properties at run time and react accordingly, such as the IsFlipped property, whereas whenever the value changes we shall be activating the Flip View animation functionality.

public class XFFlipView : ContentView
{
	private readonly RelativeLayout _contentHolder;
	
	public XFFlipView()
	{
		_contentHolder = new RelativeLayout();
		Content = _contentHolder;
	}

	public static readonly BindableProperty FrontViewProperty =
	BindableProperty.Create(...);

	public static readonly BindableProperty BackViewProperty =
	BindableProperty.Create(...);

	public static readonly BindableProperty IsFlippedProperty =
	BindableProperty.Create(...);

	private static void IsFlippedPropertyChanged(BindableObject bindable, object oldValue, object newValue)
	{
		if ((bool)newValue)
		{
			((XFFlipView)bindable).FlipFromFrontToBack();
		}
		else
		{
			((XFFlipView)bindable).FlipFromBackToFront();
		}
	}
	
	/// <summary>
	/// Performs the flip
	/// </summary>
	private async void FlipFromFrontToBack()
	{
		...
	}

	/// <summary>
	/// Performs the flip
	/// </summary>
	private async void FlipFromBackToFront()
	{
		...
	}
}

 

There you have it as we just discussed earlier. Ops I may have forgotten about those two methods at the bottom, so those are the methods we are going to use the actual Flip Animation logic, as you can see they’re are being called every time the IsFlipped property is changed.

Oh for them lazy fellas, here grab the full implementation above on my github: XFFlipView.cs

Ze Animationalization…

Alright time for the reveal of the animation thingy, which has been completely done through the easy to use Xamarin.Forms Animations API. Surprise!!?? 😛

...
private async void FlipFromFrontToBack()
{
	await FrontToBackRotate();

	// Change the visible content
	this.FrontView.IsVisible = false;
	this.BackView.IsVisible = true;

	await BackToFrontRotate();
}
...

So basically that’s the implementation of the above said mystery two methods, as you can clearly see, inside there I’m calling another method called FrontToBackRotate() which is the actual method that performs the animation. And right after that we are swapping the Visibility of the FrontView and BackView. Then continue with the rest of animation in BackToFrontRotate() call, just like how we discussed at the beginning.

Let’s see the actual animation implementation, shall we…

#region Animation Stuff

private async Task<bool> FrontToBackRotate()
{
	ViewExtensions.CancelAnimations(this);

	this.RotationY = 360;

	await this.RotateYTo(270, 500, Easing.Linear);

	return true;
}

private async Task<bool> BackToFrontRotate()
{
	ViewExtensions.CancelAnimations(this);

	this.RotationY = 90;

	await this.RotateYTo(0, 500, Easing.Linear);

	return true;
}

#endregion

 

Oh look at that simplicity eh! Thank you Xamarin.Forms animation! 😀 lol

So what happen over there is first we cancel any pending animation and the do initial Y axis rotate property of the parent View and then actually call on the RotateYTo() of Xamarin.Forms Animations, causing it the parent Layout to rotate around the Y Axis with the given value of degrees.

Then when the parent View is flipping from Back To Front View, the same process’s opposite will be executed. 😀 Simples!

Try it out eh! 😀

Since its full on Xamarin.Forms without a single line of native Xamarin code, you could straightaway use this in your XAML or C# code behind anywhere in your PCL.

<xfFlipViewControl:XFFlipView 
        x:Name="XFFlipViewControl1">

    <xfFlipViewControl:XFFlipView.FrontView>
        <Frame
            Margin="10"
            Padding="0"
            BackgroundColor="#0080ff"
            CornerRadius="10"
            HasShadow="True">
            <Grid>
                <Label
                 Grid.Row="0"
                 FontAttributes="Bold"
                 FontSize="Large"
                 HorizontalTextAlignment="Center"
                 Text="this is front view"
                 TextColor="White"
                 VerticalTextAlignment="Center" />
            </Grid>
        </Frame>
    </xfFlipViewControl:XFFlipView.FrontView>

    <xfFlipViewControl:XFFlipView.BackView>
        <Frame
            Margin="10"
            Padding="0"
            BackgroundColor="#ff0080"
            CornerRadius="10"
            HasShadow="True">
            <Grid>
                <Label
                 Grid.Row="0"
                 FontAttributes="Bold"
                 FontSize="Large"
                 HorizontalTextAlignment="Center"
                 Text="this is back view"
                 TextColor="White"
                 VerticalTextAlignment="Center" />
            </Grid>
        </Frame>
    </xfFlipViewControl:XFFlipView.BackView>

</xfFlipViewControl:XFFlipView>

 

Woot! Such simplicity! 😀 So you can see how I have directly used our awesome XFFlipView control right inside XAML and defined the Front and Back Views. Also I have used a Frame View to make it look cooler 😉 lol

So now to execute the awesome Flip Animation, simply change the value of the IsFlipped as follows.

XFFlipViewControl1.IsFlipped = !XFFlipViewControl1.IsFlipped;

 

As you can see in code behind, we’re changing the value of the control’s IsFlipped property, Simples eh! 😀 This is fully bindable as well, so you can directly bind this to a ViewModel property as well.

...
<xfFlipViewControl:XFFlipView 
     x:Name="XFFlipViewControl1" 
          IsFlipped="{Binding IsViewFlipped}">
...

</xfFlipViewControl:XFFlipView>

 

So you can directly use this in your beautifully crafted MVVM Xamarin.Forms app as well. 😀

Some Live Action…

Here we go baby! iOS and Android running side by side…

  

Oh hold on… there’s more coolness… 😀

 

Ohhh! Eye Candy! 😀

And the craziest thing about it is that, all of this awesomeness is right from Xamarin.Forms, without a single line of native Xamarin code. 😉

Woot!

This whole awesome project i hosted up in my Github repo : https://github.com/UdaraAlwis/XFFlipViewControl 

Oh BTW, you might ask me why on Android during the Animation, the view seem to be expanding out of the view? Yes its basically how the Android native flip animation executes, since Xamarin.Forms directly maps its Animation rendering calls down to native level. But we could easily tweak it up by implementing our own native renderer for the Animation, which we will be looking into in the next post. 🙂

Cheers! 😀 Keep on going my fellow devs!

Spread the love…

I encountered “GenerateJavaStubs” task failed unexpectedly in Xamarin Android

I encountered this during error during a compilation of one of my Xamarin Android apps. After installation of a new 3rd party library, I tried compiling my project, but BOOM! this happened!

What happened ?

So I took a little look-around. Well my project solution is a multi-hierarchical project, where as I have an Android Library, Core Library, and Client Project App referenced in a hierarchical manner .

So what has happened was, after some third party library installation, a duplicate MainApplication class had been generated somehow. 😮

Solution ?

Remove the duplicate  MainApplication class in your project, hence Android requires only one point to fire up. 😉

Make sure you don’t have duplicate MainApplication classes that derives from Application base class in your Xamarin.Android project. Specially if you have a hierarchical project implementation, such as a Android Library project attached to your Main application project.

In such cases make sure you maintain only one MainApplication class that derives from Application base class, in either of your projects. 😀

TADAAA! 😀

An infamous(or not?) fact(something important?) about Xamarin Forms Navigation in Android…

Xamarin Forms uses a very neat and simplified Navigation Architecture which can be easily justified among Android, iOS and WinPhone mobile platforms under common grounds.

Xamarin Forms Navigation

Alright, now this is not an article about Xamarin Forms Navigation article, as it is very well explained in Xamarin official documentation. If you want to go check it out right now before you get into this article. https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/hierarchical/

Now the way Xamarin Forms handles this navigation during the actual runtime, specifically in native levels are different for each mobile platforms. Of course they have to somehow map Xamarin Forms Navigation paradigm to the Native app navigation paradigm, which is extremely complex and Xamarin has done a great job so far. 😀

Why is Navigation so Important?

Navigation plays a huge part in your Mobile Application development, specially when it becomes more complex when you need to implement deeper customisations to your cross platform app.

So when we get down to complex customisations related to your Navigation, it is very important to be aware of the underlying mechanics of the platform.

Hence with Xamarin Forms, we are dealing with a cross-platform situation, where it is very crucial that we pay attention to three different mobile platforms, and how their navigation is actually handled in Xamarin Forms.

Xamarin has done a great job in handling a common cross-platform navigation pattern, and faded out the Native-compatibility mechanics to the background, to the point a developer doesn’t really have to pay any attention to it. So kudos Xamarin! 😉

Recently I…

So the reason I’m writing this article is because, recently I came across a situation where I had to pay detailed attention for Xamarin Forms Navigation and how it actually handles it in native execution. 🙂

And there’s something very interesting I spotted in how Xamarin Forms handles Navigation in Android runtime..

So I thought of sharing it with everyone, hence most developers doesn’t seem to be aware of this.

Specially amongst the fresh developers of the Xamarin Community, where a lot of developers assume Xamarin Forms follows everything exactly as the Native Framework patterns and properties, which is not actually accurate and they have taken some unique (or may be different) approaches for mapping Native stuff to the Xamarin Forms level, which are quite out of the box. So you need to pay a good attention to their details when you are dealing with complex implementations in Xamarin Forms.

So what’s the big deal I found with Xamarin Forms Navigation in Android ?

Xamarin Forms Navigation in Android?

Now when it comes to handling Xamarin Forms Navigation in Android run time, I noticed something very interesting, which I should blame myself for not paying any attention way earlier for this aspect. However…

If you’re familiar with Native Android development, the standard pattern of how we navigate in-between Activities and Fragments, how the activity lifecycle is handled so on and so forth yeah? (Nope, I’m not gonna get into the details of Android Navigation pattern in this article, if you aren’t aware, please stop reading this article and Google about it, then you may get back here… other wise you might get confused!)

Now have you ever thought how Xamarin Forms actually handles this complex Android Navigation Pattern? And actually map the Xamarin Forms Navigation paradigm to the Native Android Execution?

Now this is where it gets interesting…

Go on to this link which explains the NavigationPage (the page that manages the navigation) of Xamarin Forms, and read the REMARKS! READ IT!

https://developer.xamarin.com/api/type/Xamarin.Forms.NavigationPage/

Let me quote it,

“Note that on the Android platform, INavigation operations do not generate activity lifecycle notifications. For each Page that you push or pop, the Android implementation of NavigationPage simply adds or removes the content of the page to or from a single activity.”

Interesting right?

Now I did some more research about it, and came across more interesting facts.

At Xamarin Evolve 2014…

Watch this Youtube clip where an attendee asks Jason Smith about the Navigation pattern of Xamarin Forms in Android.

Attendee: I was curious why you designed the Xamarin Forms Android to be a Single Activity as opposed to Multiple Activity?

Jason: Couple of minor considerations I guess. At the time Fragments weren’t fully back ported when we started the project. So we couldn’t actually target Fragments, which was really annoying. And Google was advocating the Single Activity approach and on top of that Navigations Paradigms of Activity didn’t fully map to the Xamarin Forms Navigation Paradigm.

Furthermore from Jason Smith…

So I found a post in Xamarin Forms Community Forum  where Jason Smith has commented regarding the navigation further more a s follows…

https://forums.xamarin.com/discussion/17668/running-xamarin-forms-as-one-single-activity-vs-performance-design

TheRealJasonSmith [Jason Smith]

“Xamarin.Forms pre-dates the backporting of Fragments on Android, however it is written in a fashion similar to how fragments work. The Views we add/remove from the view hierarchy are fully cleaned up and disposed of when they go away. This works around the standard issue people had with single activity apps where all the views would stick around eating lots of memory.

Even if you as the user pre-allocate all of your Xamarin.Forms views, we do not realize them into actually android objects until they are needed on screen. We then will remove and dispose those same objects dynamically when they are no longer needed. This means that you should not be paying a significant memory overhead, even if you are not mindful of this yourself.”

So now what does this all tell us?

So after all these findings what is the conclusion we could come to?

In Native Android Development…

Untitled-3

When we develop Native Android application we usually use the standard Multiple Activities approach to propagate the pages and to navigate in between them, and sometimes we throw in some Fragments here and there as needed for memory saving and re-usability.

There is also an approach called “Single Activity Architecture” approach where you maintain only one activity and render all the pages on top of it in Native Android development.

Xamarin Forms Navigation in Android?

Untitled-2

Short and sweet Xamarin Forms does not follow the same standard multiple activity pattern in Android

Instead,

Xamarin Forms uses a unique Single Activity Architecture based pattern in Android which is similar to the use of Fragments, but with a better management of memory with its approach…

As with all our findings this is quite a unique approach that Xamarin Forms has implemented under the hood for Android. Which is very important to keep in mind when you get down to complex implementation of Xamarin Forms in Android.

Advantages and also Disadvantages ?

This gives many advantages and also disadvantages for us developers. Advantages such as good memory management, ease of navigation, instead of dealing with Activities and Fragments directly.

But this also brings many disadvantages which I had struggled in great deals with in Xamarin Forms complex implementations for Android, such as management of a custom ActionBar across your views, adding custom page transition animations for pages, unpleasant UX behavior when hiding ActionBar and so on.

But then again, there is always a way to solve problems in programming. 🙂

That’s it… 🙂

Well there you go, hope this clears any confusion anyone had just like I did sometime back… 🙂 And if you weren’t aware of this before, now you know how to handle stuff when it’s in need during your Xamarin Forms mobile development.

Cheers! 😀

Handling Page Transition Animations in Xamarin Android

Alright let’s get straight to point, You want to add some fancy transition animations to your Pages in your Xamarin Android app ? more specifically when the user navigates through the app between the pages, you need to add some nice animations for the page transition ? 😉

I came across this situation and I couldn’t find any articles on it, therefore after solving my issue, I decided to write my own to share my experience.

Yep here’s how you do it in Xamarin Android.. 😉

In Android we could define the type of transition animation that we need to add to our pages, both when we are opening the page and exiting the page, whereas we could pass those defined properties to the page Activity included in the Bundle object. 😀

So that’s what we are going to do.

As you can see below I have created a custom animation for the page MyPageActivity whereas this certain page would use the defined animations when during it’s opening and exiting executions.

We define the animation and include them in a bundle to pass into the StartActivity method, in order to deliver it to the opening Activity.

// Adding the transition animation to the ActivityOptions and include them in a Bundle
Bundle animationBundle = ActivityOptions.MakeCustomAnimation(this, Resource.Animation.abc_fade_in, Resource.Animation.abc_fade_out).ToBundle();

// Pass on the Bundle object to the StartActivity method 
this.StartActivity(new Intent(this, typeof(MyPageActivity)), animationBundle);

 

Above I have created the animation using the existing default animation types, you could add your own custom animations as you wish just as above, whereas you just have to give the resource ID for the custom animation of your’s. 🙂

Well, hope that was helpful… 🙂

Sorry this was a short post without any screenshots, going through some crazy busy times at office, barely having any time to blog 😦

Cheers! Stay Awesome! 😀

 

Auto spanning LinearLayout for Xamarin Android

Ever wanted to have a LinearLayout to auto span through the screen, more over take the whole screen width and expand itself with equal spaces in between the elements ? Well I know have. 😉

So here’s another short and sweet code sharing post! 😀

So what happened ?

Well anyhow usually during such above scenarios the first thing that come’s to my mind is the RelativeLayout in Android, so I went ahead and implemented it, whereas I had two buttons in the corner and a textview in the middle, I just needed it to be auto spanned the whole screen width and take equal space in between. I managed to create the design as expected but weirdly enough, the click events of the buttons weren’t working, and literally the I wasn’t able to click on the buttons, as if RelativeLayout was hovering over the buttons.

Oh yes I tried enabling the Clickable property of RelativeLayout as well, even the Focus enable property, but nothing worked!

LinearLayout for the rescue!

So helplessly I forced myself to change to LinearLayout, and lucky enough I managed to get it done after a few hours of playing around lol! 😀 It still doesn’t make any sense why the buttons weren’t clickable inside the RelativeLayout. O_o However I’m glad I figured out a workaround with the LinearLayout.

So anyways if any of you run into such situation, or looking to implement LinearLayout for a similar situation, here  is the code XML code I used for my layout. 😉

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 1" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 2" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 3" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 4" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
</LinearLayout>

 

So basically what I have done is, added empty LinearLayouts in between the buttons and assign an equal weight to the layout property. This will make the layout span across the full screen width, taking equal spaces in between, despite of Landscape mode Portrait mode. You could even assign different spacing in between the buttons, which will get automatically maintained among Landscape and Portrait modes. 🙂

Here’s how it actually looks like…

Screen Shot 2016-02-11 at 4.09.17 PM Screen Shot 2016-02-11 at 4.09.37 PM

 

WOOT! WOOT! 😀 there you go ! 😉 Enjoy!

Stay Awesome fellas!

How to Install Flashtool Drivers on Windows 8 (64bit)

Recently, well actually two days back when I installed Flashtool on my Windows 8 Laptop in order to flash my cutie pie, Xperia Ray phone 😛 I ran into a massive issue. After successfully installing Flashtool setup I headed up to installing flashtool drivers. I selected the needed drivers from the list and executed with the process, but then suddenly the driver installation results had failed at the end. I tried running as Admin, restarting the Lap and I even downloaded the whole set up once again, which was pretty much retarded until i realized the issue and reinstalled the whole thingy. But still NO ! -_-

I was really frustrated and thought of making up my mind to use Flashtool on my Windows 7 boot, where as I have my laptop dual booted to Windows 8 and Windows 7. Then suddenly it occurred to me could this be a incompatibility of the drivers or some security issue, and i went through all the forums available on XDA developers and finally found some solution.  Here is the link to that thread – http://forum.xda-developers.com/showthread.php?t=1913245

You may have to go to the end of the thread to find the solution over there, but i though of leaving a small note about How I solved this issue.

The only solution left is by disabling the Driver Signature Enforcement, which is a security feature that comes with Windws 8 where it does not allow unofficial drivers to be installed in your PC.

And below is how I managed to solve this issue, and please be cautions that you have to restart the PC in the middle ! 😛

Step 1 – Install the Flashtool set up as usual

Step 2 – Hover over the mouse in your top right hand side corner of the screen and go to,

Settings -> Change PC Settings -> General

a

Over there Click on “Restart Now”, this is to restart the PC and edit the settings in order to disable the Driver Signature Enforcement.

1

Once you Restart, the above screen will Appear, from there select on “Troubleshoot”.

2

Next select “Advanced Options”,

3

Then select “Startup Settings”,

4

At the end Click on “Restart” button in order to go to next step.

Step 3 –

5

At the of that long process this screen will pop up and from here you need to select the option you want to execute with. So in our case we need to disable the “Driver Signature Enforcement”, go ahead and press “F7” in your keyboard. 🙂

Step 4 – Then the PC will start up and you can go ahead with the usual  Flashtool Driver installation which is located in C:\Flashtool\drivers folder.

And if you want to re-enable Driver Signature Enforcement feature, you can go through the same process once again and enable it as you wish. But as a careless experimental IT Geek I would rather not go for it, because I don’t wanna go through the same burden process again and again ! 😛

Aaaaaand that was it ! BOOM ! xD

Oh oh I almost forgot, here is some video I found on Youtube of how to Disable DSE. 😀 Check it out if you are interested.

http://www.youtube.com/watch?v=NM1MN8QZhnk