Creating Material Chips In Xamarin Forms (Material Series Continued)

In this Blog we are going to create Material Chips for Xamarin forms for Android and next series will be focusing for iOS

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 popular cross platform development tools, has ensured it has Material UI support as part of its Packages. However there are limitations of using Material components directly in Xamarin forms and hence it requires custom renderers to be created. In this tutorial we will see how to build Material Chips in Xamarin forms for Android step by step.

 

In the last blog we have seen how to create TextField; here is a  link for reference

 

We will be building the Material Chips with embedded ChipGroup as shown in the Material guide. Let’s start!!!!!!!

 

Hands on

 

Step 1

 

Create a new Xamarin forms project and update the Xamarin forms to the latest in Nuget package manager.

 

 

Step 2

 

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

 

public static readonly BindableProperty ChipTextProperty = BindableProperty.Create("ChipText", typeof(string), typeof(ChipsControl), default(string),defaultBindingMode:BindingMode.TwoWay,propertyChanged:ChipTextPropertyChanged);

        private static void ChipTextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (ChipsControl)bindable;
            control.ChipText = newValue.ToString();
        }

        public string ChipText
        {
            get { return (string)GetValue(ChipTextProperty); }
            set { SetValue(ChipTextProperty, value); }
        }

Step 3

 

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

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:cntrl="clr-namespace:MaterialChipsDemo"
             x:Class="MaterialChipsDemo.MainPage">

    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Spacing="10">
            <cntrl:ChipsControl x:Name="chip"/>
    </StackLayout>

</ContentPage>

Step 4

 

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

 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Chip;
using Android.Views;
using Android.Widget;
using Java.Lang;
using MaterialChipsDemo;
using MaterialChipsDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(ChipsControl), typeof(ChipsViewRenderer))]
namespace MaterialChipsDemo.Droid
{
    public class ChipsViewRenderer:Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<ChipsControl,Android.Support.Design.Chip.ChipGroup>
    {
        ChipGroup chipGroupLayout;
        ChipsControl chipsControl;
        Activity activity;
        string chipText;
        public ChipsViewRenderer(Context ctx) : base(ctx)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<ChipsControl> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                chipsControl = e.NewElement as ChipsControl;
            }
            if (e.OldElement != null || Element == null)
            {
                return;
            }
            try
            {
               // chipText = chipsControl.ChipText;
                SetupUserInterface();
            }
            catch (System.Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(@"ERROR: ", ex.Message);
            }
        }

        private void SetupUserInterface()
        {
            try
            {
                activity = this.Context as Activity;
                chipGroupLayout = (ChipGroup)LayoutInflater.From(Context).Inflate(Resource.Layout.ChipGroupXml, null);





                string input = "hello world xamarin Forms";

                var tags = input?.Split(" ");

                foreach (var tag in tags)
                {
                    var chip = (Chip)LayoutInflater.From(Context).Inflate(Resource.Layout.ChipItem, null);
                    chip.Text = tag;
                    chipGroupLayout.AddView(chip);
                }

                SetNativeControl(chipGroupLayout);
            }
            catch (System.Exception ex)
            {

                System.Diagnostics.Debug.WriteLine(@"ERROR: ", ex.Message);
            }

        }

        //protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        //{
        //    base.OnElementPropertyChanged(sender, e);
        //    var control = sender as ChipsControl;
        //    chipText = control.ChipText;
        //    SetupUserInterface();
        //}
    }
}

Step 5

 

Open Resources folder in the Android project and add a layout named ChipGroupXml.xml and add the below layout code. You may customize the appearance by adding custom styles. 

 

<?xml version="1.0" encoding="utf-8" ?>
<android.support.design.chip.ChipGroup
     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_marginTop="16dp"
    android:id="@+id/chipGroup"
    android:theme="@style/Base.Theme.MaterialComponents.Light"
    android:layout_height="wrap_content">
    </android.support.design.chip.ChipGroup>

Step 6

 

Open Resources folder in the Android project and add a layout named ChipItem.xml and add the below layout code for designing individual chips.

 

<?xml version="1.0" encoding="utf-8" ?>
<android.support.design.chip.Chip
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chipItem"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:gravity="center_horizontal"
    app:closeIcon="@drawable/ic_mtrl_chip_close_circle"
    app:chipBackgroundColor="@android:color/holo_blue_light"
    app:closeIconVisible="true"
    android:theme="@style/Base.Theme.MaterialComponents.Light"
    android:text="Cart">
</android.support.design.chip.Chip>

Step 7

 

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

https://gifyu.com/image/Q6pr

 

Conclusion

 

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