DEV Community: Fabricio Bertani

Cool transition animations with Shapes in Xamarin.Forms

Fabricio Bertani — Wed, 09 Jun 2021 14:45:12 +0000

The official release of Xamarin.Forms 4.7, included for the first time the Shapes control, under the experimental flag. Fast-forward to the present, in the actual version (v5.0.0.2012), things change a lot, Shapes left behind the experimental flag, and now it’s pretty stable on all supported platforms (Android, iOS, UWP, WPF and macOS).

Shapes it’s a really powerful control that allow us to easily draw any shape on screen, like circles, lines, rectangles, polygons and even take values from some svg image file and paste it by using the paths.
We could use this control to create graphics, good-looking backgrounds, innovative UI controls, etc., as can be seen on this great article by David Ortinau.

Another really powerful tool provided by Xamarin.Forms are Animations, that help us to bring life to our application by using default controls or create our own custom animations.

Animating shapes!

In order to make our application outstand the others, we should create something really impressive, and putting shapes with animations together seems like a good start. Also, let’s add navigation between pages into the mix.

Let’s face it, Xamarin.Forms built-in transition animation it’s boring and the SharedTransitions plugin created by Giampaolo Gabba it’s really neat, but it just contains common transitions widely used nowadays in most applications.
We are going to create some awesome transition animations using shapes!

Before starting, some considerations for this post:

Despite Shapes being available for UWP, WPF and macOS, we will stick to Android and iOS only.
We are going to centralize most of the navigations on the MainPage.
We will remove the original toolbar and replace it with a fake one, in order to present the animations on full screen.
These are just samples, not actual production code.

Let’s get started!

For all our pages we will use a Grid control to wrap the entire page content, in order to take advantage of the overlap property.
Also, we will set x:Name to the toolbar and content to make them disappear during the transition.

Here we are going to create our first shape, in this case, we want a big red arrow pointing to the right.
Let’s use a Path control. While checking the markup syntax we can see that Data field basically needs: M to determine the start of the Path, next to the starting X,Y points, then with L we define the line and the several X,Y points that it travels and finally Z to signal the end of the path.
We make it invisible and hide it on the left side of the screen.

In the button click handler of our code behind, we just call an async method on the main thread that will run our custom animation.
In the animation, we will turn the shape’s visibility on and make it move from left to right, while we fade off our toolbar and content. This whole animation will last 350 milliseconds.
As our animation is committed synchronously, we need to add a delay a bit longer than the animation and then finally run the navigation to the next page.

Let’s check the result:

Our ArrowNavigationPage will be almost the same as the MainPage, but the arrow will be pointing in the opposite direction.

And code behind will be almost the same, but also add an override for the Android back button.

And this will be the result of the forward and backward navigation.

For our second page navigation transition, let’s create some overlapping shapes.

And let’s make it move from bottom to top

The result:

Now, for the return animation, let’s get a little more creative and create two circles using the Ellipse, one at the left top corner of our screen and the other at the right bottom.

We will grow a circle from the bottom right to return to its original size at the top left

The result:

Continuing with our “creative rush”, let’s create a multi-page transition animation, that’s mean an animation that starts on one screen and finish on the other one.

For that reason, on the Main Page we add some shapes hidden on both sides of the screen.

In the code behind, we will create an animation that closes the pane shapes we made and navigate the next page.

On the next page, we start with the same panes shapes, but they must start closed.

In the code behind, we override the OnAppearing method and execute the panes open animation.

The result:

For the return animation, let’s make something more interesting.

Although some shapes are simple to make with paths, others won’t or would require much time to make, so we will use SVG path data for that.
If you are lucky enough, maybe you have a UI designer on your team, you could go and ask them to make great designs that you can use.
If not, you can use some tool like Figma to create and export SVG code:

Create your shape on Figma, then right-click on it, look for the Copy/Paste section and select Copy as SVG.

Paste it on your editor and take the content inside the d tag

Now let’s add all the shapes to our screen:

Remember that we need to add the same on the Main Page, but also need to say that we only want to fire that animation when return from a specific page, so we simply add a flag:

Now we can add the rest of the code PadlockTransitionAnimationShapes code behind for the return animation.

The result:

For our last example, let’s stress the engine with lots of shapes and animations running on the screen. For that reason, we will make a wild pokemon appear as transition animation!

For this example we add the pokemon as a png image, but you can look at some svg pokemon image to take the path 😉.

These will be our shapes on the MainPage

And the code behind’s animation:

Result:

That’s all folks!

As I said before, these are just samples of how we can exploit our creativity and push the boundaries of Xamarin.Forms.

If this post helps you to create amazing transition animations or you want to showcase the things you’ve done, please leave a sample repo in the comments and will be added to this post later.

Also, you can see a complete sample repository for this post on GitHub. 👇

FabriBertani / XFShapeAnimatedTransitions

XFShapeAnimatedTransitions

Cool transition animations with Shapes in Xamarin.Forms

Sample repository created for Cool transition animations with Shapes in Xamarin.Forms

View on GitHub

Thanks for reading and keep coding! 😁

Create a Material Outlined Text Field with Xamarin.Forms

Fabricio Bertani — Tue, 25 May 2021 15:27:03 +0000

Sometime ago, the Xamarin team officially release Material Visual, a feature to change the UI controls of your application in order to follow the Material Design Rules & Guidelines proposed by Google.
This is an amazing feature, as you can check on the official docs and other several posts about using it. They are built natively on each platform and have a great performance, but…(there is always a but), they just add the standard material UI elements, leaving aside other elements, like the outlined text field.

For that reason, today we are going to create a material outlined textfield entirely on Xamarin.Forms!!!

As I said before, the Material Visual feature built by Xamarin is completely native, for that reason it has better performance. We are going to have to sacrifice a bit of performance (nearly unnoticeable to the untrained eye) in order to write this control, almost, without having to deal with native code on each platform.
Before starting, let's make a list of what our control should have:

Rounded borders
Borders should change color
Placeholder animation
Character counter
Leading and trailing icons
Interactive icons for password
Helper and error texts
Error icon

In order to see what we're dealing with, we just build our app with a regular entry and a material one.

Let's focus on the regular entry:

In UWP it has a frame that we need to get rid of.
In iOS also has a frame that needs to be removed.
In Android, we need to remove that annoying underline.

So let's create some effects for it:

Great! Now we need to make from our outlined text field a reusable solution, so we should create a component of it.
We will use:

A Grid that contains all, because of it overlay property will help us with the placeholder animation.
A Frame to wrap around the entry with rounded borders and border color.
The other labels for helper, counter and error texts.
Images for the icons

Let's create our reusable component!

And now on the code behind let's define the bindable properties, event handlers, animations and methods.

Let's test it

Just add the new component into a Xamarin.Forms page to see the results:

Now let's see it running in all the 3 different supported platforms!

That's all for today folks

Hope this help you to create new cool components and explore the power of Xamarin.Forms controls.

Also, you can see a complete sample repository for this post on GitHub.

FabriBertani / XFOutlinedMaterialEntry

Thanks for reading and keep coding! 😁

Edit: It also could works on macOS, but needs some changes and adjustments, check the sample repo.

How to create a custom keyboard with Xamarin Forms (Android)

Fabricio Bertani — Sun, 02 Jun 2019 18:13:32 +0000

Some time ago a client requested a special keyboard for his application, which had to have certain conditions that the regular Android keyboard didn’t meet.

Researching

The first option that came to mind was to add a disabled Entry with a GestureRecognizer that displays a control with an animation to emulate the appearance of the keyboard, but quickly discard the idea as it wasn’t reusable.
The best option was taking the native path, so I spent quite time researching, but I only found solutions that leads to create a keyboard as a service. I knew that our client wouldn’t like the idea of having to download a separate keyboard to only use it in the application and I needed a solution that should work with Xamarin Forms!
As I had to think about its implementation in Xamarin Forms I decided that the best option was to try with a Custom Renderer of the Entry control since it uses EditText as base for the native control and try to apply all those solutions that I had read previously in it.

Let’s get down to work!

Note: in order to correctly implement the custom keyboard we are going to need that the Xamarin Forms version to be 3.6.0.135200-pre1 or higher because we need the OnFocusChangeRequest method which is only available from this version.

First we’re going to create the custom control, which will have the next bindable property:

EnterCommand: typeof ICommand, to bind Enter key press action.

This is how our custom control will be:

Now we’re moving to our Android project and keep working there (later we will return to our Xamarin Forms project).
Before we go on, ensure to have all the required Android packages:

Next we’re going to edit our Android MainActivity to avoid that native keyboard to show up, for that we will use the SoftInputMode.StateAlwaysHidden attribute

What are we going to do next is start to define our custom keyboard.
Inside the Resource/layout folder we are going to create an Android layout named CustomKeyboard typeof InputMethodService.Keyboard

Firstly we set the alignParentBottom property to true because we want our keyboard to be visible from the bottom side of the screen.
Secondly we set the keyPreviewLayout property to null because on this sample we don’t want a response layout when some key is pressed.
As you can see in the keyBackground property refers to a drawable called keyboard_background, which doesn’t exist yet, so we are going to create it inside the Drawable folder as an xml file, there we are going to define a state selector for the two states our keys can have: normal (without pressing) and pressed.

As you can see, we are going to have to create another two xml inside the Drawable folder, in which we are going to define the look and feel of our keyboard to match (or not) with our application theme.

Now within the values folder we will create an xml named ids which we will need later.

Next, inside the Resources folder we will create a new folder called xml. Within it we will create an xml in which we will define the keys of our special keyboard.
In our case our keyboard will be called special_keyboard, it will be typeof Keyboard in which we will define the horizontal and vertical size of our keys, the horizontalGap and verticalGap properties refer to the spacing and dimension type %p (in case you’ve never seen it) is a kind of percentage relative to the parent view.
Each row of keys will be included within sections delimited by the <Row></Row> tags.
Our first row will be occupied with a separating line to mark the limit of our keyboard. The Row tag will have a height of 4dp and we will indicate that it is at the top of our keyboard through the rowEdgeFlags property. Then we will add a line as a Key within the Row tags that it would take the full width of the keyboard. Our separator is just another xml that we will create inside the Drawable folder:

Each Key will have two strictly necessary properties: codes and keyLabel code will be a number that tells the OS what letter or symbol the key corresponds to. At this point I want to clarify something: I found dozens of samples about creating customs keyboards for Android and they have used many different codes to refer to a certain symbol or key. The best list of codes that has been fulfilled most of all that I have tried is the following: Android Keycodes. You can also see the official Android docs or even the Xamarin Android but none of them has worked with accuracy.
keyLabel is the string that is going to be shown in our key, it is very important to put this property even if we don’t want to show any text in our key (in that case it would be keyLabel="").
For style decision, at the beginning and at the end of each row, I add a Key with code equal to 0 (so you don’t have any action), the width also of 0 and a spacing of 2%p, these keys will also carry the keyEdgeFlags property with the left or right values as appropriate.
Here our full keyboard:

Finally before starting to work in our renderer, we will create another folder within Resources, called anim with an xml that we are going to call slide_in_bottom this will be the animation with which our keyboard will appear on the screen.

Now we will create a new folder on our Android project, named Renderers and there we will create our renderer which we will call EntryWithCustomKeyboardRenderer which will extend from EntryRenderer and implement the interface IOnKeyboardActionListener. Also within our custom renderer we will create a private class called NullListener which is going to extend from Java.Lang.Object and implement the interface IOnKeyboardActionListener which we are going to use in our renderer to avoid null exceptions.

Finally, we return to our Xamarin Forms project and implement our special keyboard.

And in our code behind we implement the EnterCommand that we created previously, for the action that we want to happen when we press the Enter key of our custom keyboard.

Here’s the final result:

You can see the complete sample repository on GitHub

FabriBertani / CustomKeyboardXamarinForms

How to create a custom keyboard with Xamrain Forms (Android)

CustomKeyboardXamarinForms

How to create a custom keyboard with Xamrain Forms (Android)

Sample repository created for How to create a custom keyboard with Xamarin Forms (Android)

View on GitHub

In the next post we will see how to make a complex custom keyboard!

Thanks for reading 😁