Adding Toolbar Icon in Xamarin Forms

UI is a most common thinks for making an mobile application.While creating any mobile application that targets on Android,iOS,first coming to our mind is that,how our application screen looks.All users needs that mobile application should have attractive and flexible looks.

So Toolbar Items is a spacial types of button that are useful to add the actions over the Navigation Bar.Such as home,about logout etc.

There are two types of Toolbar Item:

  • Primary.
  • Secondary.




Primary toolbar contain a icon as a button,so that user can click on this button and apply any event on that icon.




Secondary toolbar only contains text as a menu that appears on the right side three dot icon.After click on the three dot icon it will open a small popup that contains the menu.we can also add the event of the secondary toolbar items.

Ok fine,we already learn what actually toolbar item in Xamarin Forms.Lets implement this inside out XAML page.We can create toolbar item inside XAML and Code behind page.

First we are going to create this toolbar items inside our XAML page.So open any XAML page and add this line :


     <ContentPage.ToolbarItems>
        <ToolbarItem Icon="homeIcon.png" Priority="0" Order="Primary" Clicked="HomeClicked"/>
    </ContentPage.ToolbarItems>


So above this line will create a primary toolbar item over the navigation bar.While adding a toolbar item,make sure that we have to use three property for properly.The three property is Icon,Priority and Order 


  • Icon : For toolbar item icon.Before using icon we should have to know the correct dimension of an image.For android we have to use different type of icons for different mobile screen resolution.So expand the android project and you can notice that a Resource folder,this folder contains all drawable folders and also layout and value folder.so expand the Resource folder.and put the exact following icon sizes.
    • drawable: 24 x 24 pixel.
    • drawable-mdpi : 24 x 24 pixel.
    • drawable-hdpi: 36 x 36 pixel.
    • drawable-xhdpi: 48 x 48 pixel.
    • drawable-xxhdpi: 60 x 60 pixel.
    • drawable-xxxhdpi: 72 x 72 pixel.

  • Order : Here we can select Default,Primary or Secondary any enum value.You can select any of based on your requirement.
  • Priority: This are the icon priority,that will follow the display order of items inside navigation bar.Its an integer value.Make sure that use proper sequence.It will start from 0.
  • Clicked: Its is used for set the event that will fire when user click on this icon.If yo are using MVVM then instead of Clicked event we can bind Command  for that.

So we already learn the primary toolbar icon,and remember one think,do not create more than 5 toolbar item.Otherwise It will occupy your whole navigation bar.To download the icons for different size,I will suggest you to download it from Icon8 site.


Now we are going the add the secondary toolbar icon,so add this following line inside your ToolbarItems parent tag.

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="About" Priority="0" Order="Primary" Clicked="AboutClicked"/>
    </ContentPage.ToolbarItems>

So,here we are using Text property for secondary toolbar item name.Because we already discussed that,secondary item contain the menu name and it will appears on the popup,while user click on the three dot icon.

Make sure that implement this toolbar inside the Page.Okay so now we create this toolbar using C# inside our code behind page

So inside the code behind page,add this following line:
      
            ToolbarItem item = new ToolbarItem();
            item.Text = "Contact Us";
            item.Priority = 5;
            item.Order = ToolbarItemOrder.Secondary;
            item.Clicked += ContactUsClicked;

            this.ToolbarItems.Add(item);
So here first we are creating and instance of the ToolbarItem object and add the mandatory properties and a click event.
I believe that you can understand how to add Toolbar Item inside your Page.Thank you.If you have any query then comment here.

Adding Toolbar Icon in Xamarin Forms Adding Toolbar Icon in Xamarin Forms Reviewed by SP Tutorials on November 28, 2019 Rating: 5

No comments:

Powered by Blogger.