How to add a Floating Action Button Without Third Party DLLs.-Xamarin Forms

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

Floating action buttons provide quick access to important or common actions within an app. They have a variety of uses, including:

• Performing a common action, such as starting a new email in a mail app.
• Displaying additional related actions.
• Update or transforming into other UI elements on the screen.

Floating action buttons adjust their position and visibility in response to other UI elements on the screen.

 

You can also set backgroud will be dim light which is available in code,You have to write below code inside ContentPage

<ContentPage.Content>

        <AbsoluteLayout  x:Name="mainLayout">
            <StackLayout Padding="40" Spacing="10" AbsoluteLayout.LayoutFlags="All"
               AbsoluteLayout.LayoutBounds="0,0,1,1">

<StackLayout Padding="40" Spacing="10" AbsoluteLayout.LayoutFlags="All" 

               AbsoluteLayout.LayoutBounds="0,0,1,1">

------------------------------------------------

------------Your XAML CODE------------------------

</StackLayout>

  <AbsoluteLayout  x:Name="MenuLayout" IsVisible="False" AbsoluteLayout.LayoutFlags="All" 

               AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="#A0000000">
               <Frame
            x:Name="menuframe"
            Margin="0,0,50,110"
            IsVisible="False"
            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            BorderColor="White"
            BackgroundColor="White"
            CornerRadius="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>
                    <local:MenuView
                    x:Name="FloatMenuItem1"
                    Grid.Row="0"
                    BackgroundColor="Transparent"
                    IsVisible="False"
                    MenuClicked="MenuClicked"
                    MenuText="Add Line Item To All Options"
                    MenuTextColor="Black"
                    MenuTextFontAttributes="None" />
                    <local:MenuView
                    x:Name="FloatMenuItem2"
                    Grid.Row="1"
                    BackgroundColor="Transparent"
                    IsVisible="False"
                    MenuClicked="MenuClicked"
                    MenuText="Add New Option"
                    MenuTextColor="Black"
                    MenuTextFontAttributes="None" />
                </Grid>
            </Frame>
           
        </AbsoluteLayout>
         <Image
            x:Name="imgRadialMenu"
            Margin="10,10,50,50"
            AbsoluteLayout.LayoutBounds="1,1,-1,-1"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            HeightRequest="50"
            Source="plus.png"
            WidthRequest="50">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="FloatButton_Click" />
                </Image.GestureRecognizers>
            </Image>
         </AbsoluteLayout>
    </ContentPage.Content>

Code Behind File :

In Constructor :

----------------------------------------------------------------------------------------------------------------

var tapGestureRecognizer = new TapGestureRecognizer();

            tapGestureRecognizer.Tapped += (s, e) =>
            {
                DisAppearFabMenu();

            };
            mainLayout.GestureRecognizers.Add(tapGestureRecognizer);

---------------------------------------------------------------------------------------------------------------- 

Please Note : No need to set IsVisible Properties for  every FloatMenuItem1 if we hidden FRAME.

    private async void FloatButton_Click(object sender, EventArgs e)

        {
            var source = imgRadialMenu.Source as FileImageSource;

            if (source.File == "plus.png")
            {
                await Task.Delay(10);
                imgRadialMenu.Source = "close.png"; //Icons will be required
                imgRadialMenu.IsEnabled = false;
                FloatMenuItem1.IsVisible = false;
                FloatMenuItem2.IsVisible = false;
                FloatMenuItem2.IsVisible = true;
                menuframe.IsVisible = true;
                MenuLayout.IsVisible = true;
                FloatMenuItem1.IsVisible = true;
                imgRadialMenu.IsEnabled = true;
            }
            else
            {
                DisAppearFabMenu();
            }
        }
        private async void DisAppearFabMenu()
        {
            await imgRadialMenu.RotateTo(0, 100, Easing.Linear);
            imgRadialMenu.Source = "plus.png"; // ICONS will be required
            FloatMenuItem1.IsVisible = false;
            FloatMenuItem2.IsVisible = false;
            menuframe.IsVisible = false;
            MenuLayout.IsVisible = false;
        }

// Menu Clicked Event

        private void MenuClicked(object sender, EventArgs e)
        {
           var selectedMenu=sender as Grid ;
            if (selectedMenu.classId == FloatMenuItem1)
            {

            }

        }

Creating Custome View (MenuView)--ContentView.XAML

<?xml version="1.0" encoding="UTF-8"?>
<ContentView 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"
             x:Class="ProjectName.CustomViews.MenuView">
    <ContentView.Content>
        <Grid x:Name="gridmenuclick"
              RowSpacing="0"
              ColumnSpacing="0"
              HorizontalOptions="Start"
              VerticalOptions="Start">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
            </Grid.ColumnDefinitions>
            <AbsoluteLayout Grid.Column="0">
                <Label x:Name="lblTooltipText"
                        Margin="5,0"
                        HorizontalOptions="Start"
                        BackgroundColor="Transparent"
                        VerticalTextAlignment="Center"
                        AbsoluteLayout.LayoutBounds="1,1,1,1"
                        AbsoluteLayout.LayoutFlags="All"/>
            </AbsoluteLayout>

        </Grid>
    </ContentView.Content>
</ContentView>

CODE BEHIND File :(I have created lots of bindable properties here you can use or you can create more.(i am not using all)

using System;

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ProjectName.CustomViews
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MenuView : ContentView
    {
        public event EventHandler MenuClicked;
        public MenuView()
        {
            InitializeComponent();

            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += (s, e) =>
            {
                MenuClicked?.Invoke(s, e);
            };
            gridmenuclick.GestureRecognizers.Add(tapGestureRecognizer);
        }

        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == MenuTextColorProperty.PropertyName)
            {
                lblTooltipText.TextColor = MenuTextColor;
            }
           
            else if (propertyName == MenuTextProperty.PropertyName)
            {
                lblTooltipText.Text = MenuText;
                gridmenuclick.Text=MenuText;
            }
            else if (propertyName == MenuTextFontAttributesProperty.PropertyName)
            {
                lblTooltipText.FontAttributes = MenuTextFontAttributes;
            }
           
        }

        public static readonly BindableProperty MenuTextColorProperty = BindableProperty.Create(nameof(MenuTextColor), typeof(Color), typeof(MenuView), default(Color), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty IconBackgroundColorProperty = BindableProperty.Create(nameof(IconBackgroundColor), typeof(Color), typeof(MenuView), default(Color), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty MenuTextProperty = BindableProperty.Create(nameof(MenuText), typeof(string), typeof(MenuView), default(string), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty MenuTooltipbackgroundImageProperty = BindableProperty.Create(nameof(MenuTooltipbackgroundImage), typeof(string), typeof(MenuView), default(string), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty MenuIconProperty = BindableProperty.Create(nameof(MenuIcon), typeof(string), typeof(MenuView), default(string), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty IconImageWidthRequestProperty = BindableProperty.Create(nameof(IconImageWidthRequest), typeof(double), typeof(MenuView), default(double), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty IconImageHeightRequestProperty = BindableProperty.Create(nameof(IconImageHeightRequest), typeof(double), typeof(MenuView), default(double), Xamarin.Forms.BindingMode.TwoWay);
        public static readonly BindableProperty MenuTextFontAttributesProperty = BindableProperty.Create(nameof(MenuTextFontAttributes), typeof(FontAttributes), typeof(MenuView), default(FontAttributes), Xamarin.Forms.BindingMode.TwoWay);

        public Color MenuTextColor
        {
            get { return (Color)GetValue(MenuTextColorProperty); }
            set { SetValue(MenuTextColorProperty, value); }
        }

        public Color IconBackgroundColor
        {
            get { return (Color)GetValue(IconBackgroundColorProperty); }
            set { SetValue(IconBackgroundColorProperty, value); }
        }

        public string MenuText
        {
            get { return (string)GetValue(MenuTextProperty); }
            set { SetValue(MenuTextProperty, value); }
        }

        public string MenuTooltipbackgroundImage
        {
            get { return (string)GetValue(MenuTooltipbackgroundImageProperty); }
            set { SetValue(MenuTooltipbackgroundImageProperty, value); }
        }

        public string MenuIcon
        {
            get { return (string)GetValue(MenuIconProperty); }
            set { SetValue(MenuIconProperty, value); }
        }

        public double IconImageWidthRequest
        {
            get { return (double)GetValue(IconImageWidthRequestProperty); }
            set { SetValue(IconImageWidthRequestProperty, value); }
        }
        public double IconImageHeightRequest
        {
            get { return (double)GetValue(IconImageHeightRequestProperty); }
            set { SetValue(IconImageHeightRequestProperty, value); }
        }
        public FontAttributes MenuTextFontAttributes
        {
            get { return (FontAttributes)GetValue(MenuTextFontAttributesProperty); }
            set { SetValue(MenuTextFontAttributesProperty, value); }
        }
    }
}

Xamarin Coding Standards

There are many best practices in writing Xamarin. Here are some that we’ve canonized where I work…

•       By convention the identifier for the ViewModel is vm
•       Do not assign more than one page to a view model. Generally speaking: it should be one page to one view model
•     Do not pass view modes to methods of other pages

 The only code in code-behind (e.g., foo.xaml.cs) should be

• initialize in the constructor
• create the view model
• assign the datacontext to the view model
•  call the viewmodel’s Initialize method

·         Lifecycle methods such as OnAppearing and OnDisappearing

    Why: we want to keep the code behind as sparse as possible. Unit testing requires reaching into code and that is infinitely easier with a viewmodel.

Every ViewModel should have an initialize method.

    Why: Having an initialize method keeps most of the code for the vm out of the constructor. This is recommended practice by Microsoft, and allows for async methods.

Do not put Xaml in templates in App.xaml. Put the Xaml in the Xaml file.

    Why: App.xaml quickly becomes bloated and hard to work with. Having the Xaml in the Xaml file is natural and helps create the troika we want: foo.xaml, foo.xaml.cs and fooViewModel.cs.

Create viewmodel name by appending “viewmodel” to the xaml name

• LigthController.xaml
• LightController.xaml.cs
• LightControllerViewModel.cs

    Why: It is far easier to find the file you want if we follow a convention.

Avoid Xaml file names ending in “view”

• LightControllerView.xaml
• LightControllerView.xaml.cs
• LightControllerViewViewModel.cs

    Why: Adding view to a view file is redundant and it makes reading the name of the ViewModel more difficult.

Use commands rather than event handlers

// wrong - handled in code behind

<button Text="Divide by 2" Clicked="onClick" /> 

//correct - handled in viewmodel

<button Text="Divide by 2" ClickedCommand="{Binding DivideBy2Command"

 

Why: It is much easier to write unit tests when the event handler is in the viewmodel.

Generate a PDF File from HTML String

XFPDF

This repository demonstrates you to generate the PDF file from HTML string in Xamarin Forms without any third party package.
In Xamarin Forms, there is no default support either to generate the PDF or to view the PDF file. But you can achieve these requirements with native support through renderers for both Android and iOS platform.
The demo application in the repository is divided into three segments.

1. Create HTML from URL.
2. Convert the HTML string to PDF file.
3. View the PDF file.

GitHub Link

How To Keep Your Android App Size Down

How To Keep Your Android App Size Down 

There are a few ways you can take to make your app smaller when developing with Xamarin. 

Additionally, any Android developer can do one simple thing when deploying to Google Play to reduce
their app size.

Linking Your Libraries

Xamarin applications use a “linker” in order to reduce your app size. 
You can browse through the documentation and find out how this works, but to simplify things,
it uses static analysis to your app to remove assemblies and types that are not used in your app to 
bring down your app size. This is for any Xamarin app, so you should also try this out in your iOS app 
because it can reduce your app size in a default “Hello, World” 
application from 16MB down to 2.9MB! There are three settings that you can supply from the
projects settings:

Don’t Link will do just that, it won’t link anything and you will be left with All of Mono, mscorlib, 
Xamarin.Android, and a bunch of other stuff:

Link SDK assemblies only is your safest bet and should be your default as it will only
attempt to strip things out of Xamarin.Android and any of your third party libraries will not be
touched. However, to really bring down your app size you should try out Link All Assemblies,
as it will investigate everything and bring down your app size. Be sure to FULLY test your app 
as it is possible that the linker may be agressive and strip out something you need, and if that is the 
case you can actually use a [Android.Runtime.Preserve] flag or set a linkskip in your MSBuild to 
ensure that not all of your libraries get linked. 

So employing this practice with my Bike Now app, which uses Json.NET, Android Support v4, v7,
Google Play Services, and Xamarin.Insights, we can compare and contrast the app size when we 
build our app to support all three ABIs (we will talk about this next!).

• Don’t Link: 40.7MB
• Link SDK Assemblies Only: 18.7MB
• Link All Assemblies: 13MB

As you can see linking correctly can make a huge impact, but we can do even better!

Splitting your APKs

On Android, there are ABIs (Application Binary Interfaces) that you can support when you
ship your application. The most used will be the armeabi-v7a, however there are still tons of devices 
that support and run the old armeabi ABI and even x86 devices as well. So to ensure your app is
reaching the most users you most likely have come into the project settings and selected every single
ABI

 

However, for every ABI that you select you are actually bundling a separate lib monodroid and 
sgen with your app. 
Don’t believe me then rename your .apk to .zip and take a look in the lib folder:

This of course makes sense as you would need a different version of monodroid and sgen 
that supports that ABI. The issue is that you now have all of these libraries bundle into a single APK
and your users will be downloading all of them! The solution for any Android developer 
(even Java devs) is to simply split up your APKs and upload all of them to Google Play! 
This way you have a smaller app size across all three APKs. 
You can do this now with a simple check in your project options:

Now, instead of just a single APK to upload I have three with different and smaller sizes
 (note it will take longer to create your packages):

• armeabi-v7a: 10.2MB
• armeabi: 10.3MB
• x86: 10.4MB

Notes: 

You may need to close XS after selecting check box and ensure this flag is set in your csproj:

<AndroidCreatePackagePerAbi>true</AndroidCreatePackagePerAbi> 

Additionally, your new APKs will be in your /bin/Release folder and will be marked with Signed in
 their file name.

Keep your users happy and keep down that app size with these quick tips.

Xamarin.Forms - Implement CI/CD Using App Center

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

App Center has multiple services that are most commonly used by mobile developers, where multiple services act as a single integrated product. With the use of a single integrated product, you can build, test, distribute, and monitor your mobile apps, and also implement push notifications.

Connect your repo, build your app. It’s that simple.

Connect to GitHub, Bitbucket, or Azure DevOps and build your app in the cloud on every commit.
Automatically run unit tests, release to testers and stores, or test your UI on real devices.

 

Support Platforms

• Android
• iOS
• React Native
• UWP
• Xamarin
• macOS
• Cordova

 

App Center Services

1. Build
2. Diagnostics (Formerly Crashes)
3. Test
4. Analytics
5. Distribute
6. Push Notifications

CI - Continuous integration is the process of merging all developers' work into a single main repository.

 

CD - Continuous delivery is a process of automatically building and deploying your Xamarin apps to testers or end-users.

 

More info

 

https://docs.microsoft.com/en-us/appcenter/sdk/getting-started/xamarin