Creating Material Text field in Xamarin forms — Part1

Introduction

With the ever-changing requirements and wide range of standards for Mobile application development, it gets confusing for stakeholders and developers. To address the concern to some extent Google has introduced Material Design which dictates how the Mobile controls should look and behave irrespective of operating system and catering for Web applications also. We have support for Native android,iOS,Flutter and Xamarin.

Xamarin being one of the promising cross platform development tool has ensured it has Material UI support as part of its Packages however there are limitations of using Material components in directly in Xamarin forms and hence requires custom renderers to be created. In this tutorial we will see how to build a Material Textfield in Xamarin forms for both iOS and Android step by side.

We will be building the Outlined Textfield as shown in the Material design guide. Let’s start!!!!!!!

Hands on

Step 1 :Create a new Xamarin forms project and update the Xamarin forms to latest in Nuget package manager and it should like below

Figure 1.1 Visual studio project creation

Step 2:Install the Xamarin.iOS.MaterialComponents nuget to the iOS project and make sure the nuget is from Microsoft to ensure the official support.

Step 3:Create a Class EntryView.cs in shared project as shown below and inherit from View. For demo I have not created bindable properties but viewers are free to create them and expose to XAML.

Figure1.2 Custom renderer base class in shared

Step 4:Now open the MainPage.xaml and create one control as shown below and make sure proper namespacing is given for control.

Figure1.3 MainPage.Xaml code

Step 5:Create a class named EntryViewRenderer.cs in Android project as shown below and add the required code from below. There will be some errors for Resources, we will be addressing in next step.

Figure 1.4 Android custom renderer

Step 6:Open Resources folder in android project and add a layout named MaterialEntryLayout.xml and add the below layout code. You may customize the appearance by adding custom styles.

Figure1.5 XML layout for android

Step 7:In the similar way add a class named MaterialEntryRenderer.cs to iOS project and add the code below as shown in screen shot.

Figure1.6 iOS renderer file

Step 8:We are now ready to Run the app on both devices. Make sure you have added Export attributes for renderers.

Ready for ACTION

Android Demo

Android demo

iOS Demo

Conclusion

I have demonstrated the Creation of MaterialTextField for iOS and Android, users are encouraged to create Bindable properties and try out various texfield options. In the next part I will show new Material control in Xamarin forms,till then stay safe and happy coding.