Alternative Float Button ISO and Android

JuanDanielArboledaJuanDanielArboleda USMember
edited July 15 in Xamarin.Forms

Searching I could not find a floating button that works just like Ios and Android, all failed in something, so I decided to create one, and compare the code. Easy to use.

project XamarinFloatButton in github, user jarbol16

Posts

  • JuanDanielArboledaJuanDanielArboleda USMember
    edited July 15

    The C# files is: FloatButton.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    
    namespace ProjectWimcXam.Views
    {
        public class FloatButton: ContentPage
        {
            private StackLayout stack_main;
            private AbsoluteLayout button_main;
            private AbsoluteLayout button_main_aux;
            private int row = 0;
            private List<OPTION> optiones;
            private object viewPage;
            public delegate void SelectButton(string Id);
            public bool seeOptions = true;
            SelectButton select;
            public ContentView _view;
            public struct OPTION
            {
                public Label label;
                public AbsoluteLayout absoluteLayout;
            }
    
            public void Options(ref ContentView view)
            {
                if (optiones.Count > 0) { 
    
                    if (seeOptions)
                    {
                        SeeOptions(ref view);
                        seeOptions = false;
                    }
                    else
                    {
                        NotSeeOptions(ref view);
                        seeOptions = true;
                    }
                }
                else
                {
                    NotSeeOptions(ref view);
                    seeOptions = false;
                }
            }
    
            public void SeeOptions(ref ContentView view)
            {
                view.HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                view.VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                stack_main.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, true);
                stack_main.VerticalOptions = new LayoutOptions(LayoutAlignment.End, true);
                stack_main.Orientation = StackOrientation.Vertical;
    
                view.BackgroundColor = Color.FromHex("#60000000");
                foreach (OPTION opt in optiones)
                {
                    opt.absoluteLayout.IsVisible = true;
                    opt.label.IsVisible = true;
                }
    
                button_main = CreateButtonMain("ic_close_white", Color.FromHex("#0F6E8D"));
                view.Content = GetFloatButton();
            }
    
            private StackLayout GetActivityIndicartor()
            {
                StackLayout stack = new StackLayout
                {
                    Style = Theme.Style_load,
                    BackgroundColor = Color.Transparent
                };
                ActivityIndicator activity = new ActivityIndicator();
                activity.IsRunning = true;
                activity.Color = Color.White;
                stack.Children.Add(activity);
                Label label = new Label
                {
                    TextColor = Color.White,
                    Text = "Cargando ...",
                    Font =Font.SystemFontOfSize(NamedSize.Medium, FontAttributes.Bold),
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.Center, false),
                    VerticalOptions = new LayoutOptions(LayoutAlignment.End, false)
                };
                stack.Children.Add(label);
                return stack;
            }
    
            public void LoadingStart()
            {
                _view.HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                _view.VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                _view.Content = GetActivityIndicartor();
                _view.BackgroundColor = Color.FromHex("#60000000");
            }
    
            public void LoadingStop()
            {
                _view.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false);
                _view.VerticalOptions = new LayoutOptions(LayoutAlignment.End, false);
                _view.BackgroundColor = Color.Transparent;
                _view.Content = null;
                foreach (OPTION opt in optiones)
                {
                    opt.absoluteLayout.IsVisible = false;
                    opt.label.IsVisible = false;
                }
                _view.Content = GetFloatButton();
            }
    
            public void NotSeeOptions(ref ContentView view)
            {
                view.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false);
                view.VerticalOptions = new LayoutOptions(LayoutAlignment.End, false);
                view.BackgroundColor = Color.Transparent;
                view.Content = null;
                foreach (OPTION opt in optiones)
                {
                    opt.absoluteLayout.IsVisible = false;
                    opt.label.IsVisible = false;
                }
                button_main = button_main_aux;
                view.Content = GetFloatButton();
            }
    
            public FloatButton(ref ContentView contentView, string image_source,Color color, SelectButton Selection, object viewContext)
            {
                stack_main = new StackLayout();
                _view = contentView;
                contentView.BackgroundColor = Color.Transparent;
                AbsoluteLayout.SetLayoutBounds(contentView, new Rectangle(0, 0, 1, 1));
                AbsoluteLayout.SetLayoutFlags(contentView, AbsoluteLayoutFlags.All);
                contentView.Padding = new Thickness(0, 0, 20, 20);
                contentView.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false);
                contentView.VerticalOptions = new LayoutOptions(LayoutAlignment.End, false);
                select = Selection;
                this.viewPage = viewContext;
                button_main = CreateButtonMain(image_source, color);
                button_main_aux = button_main;
                optiones = new List<OPTION>();
            }
            public StackLayout GetFloatButton()
            {
                row = 0;
                stack_main.Children.Clear();
                foreach (OPTION option in optiones)
                {
                    StackLayout stack_child = new StackLayout();
                    stack_child.Orientation = StackOrientation.Horizontal;
                    stack_child.Children.Add(option.label);
                    stack_child.Children.Add(option.absoluteLayout);
                    stack_main.Children.Add(stack_child);
                    row++;
                }
                stack_main.Children.Add(button_main);
                return stack_main;
            }
    
            public List<OPTION> GetOptions()
            {
                return optiones;
            }
    
            public AbsoluteLayout CreateButtonMain(string image_source,Color color)
            {
                AbsoluteLayout absoluteLayout = new AbsoluteLayout
                {
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.End, true),
                };
               Frame frame = new Frame
                {
                    HeightRequest = 20,
                    WidthRequest = 20,
                    BackgroundColor = color,
                   CornerRadius = 30,
                   HasShadow = true,
                   Content = new Image
                   {
                       Source = image_source
                   }
               };
                frame.GestureRecognizers.Add(SetEventClik(ref frame,"Main"));
                absoluteLayout.Children.Add(frame);
                return absoluteLayout; 
            }
    
            public TapGestureRecognizer SetEventClik(ref Frame frame, string id)
            {
                BindableProperty click = BindableProperty.Create("ID", typeof(string), (Type)viewPage, null);
                frame.SetValue(click, id);
                TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
                tapGestureRecognizer.Tapped += (s, e) => {
                    string _id = (string)((Frame)s).GetValue(click);
                    select(_id);
                };
                return tapGestureRecognizer;
            }
    
            public void AddOption(string image_source,Color color,string text, string id)
            {
                AbsoluteLayout absoluteLayout = new AbsoluteLayout
                {
                    Padding = new Thickness(5, 5, 3, 10),
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.End, true),
                    IsVisible = false
                };
                Frame frame = new Frame
                {
                    HeightRequest = 18,
                    WidthRequest = 18,
                    BackgroundColor = color,
                    CornerRadius = 30,
                    HasShadow = true,
                    Content = new Image
                    {
                        Source = image_source
                    }
                };
                frame.GestureRecognizers.Add(SetEventClik(ref frame,id));
                absoluteLayout.Children.Add(frame);
                if (row == 0)
                    stack_main.Children.Clear();
                OPTION pTION = new OPTION
                {
                    label = TitleOption(text),
                    absoluteLayout = absoluteLayout
                };
                optiones.Add(pTION);
            }
    
            private Label TitleOption(string text)
            {
                Label label = new Label
                {
                    Text = text,
                    TextColor = Color.White,
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false),
                    VerticalOptions = new LayoutOptions(LayoutAlignment.Center, false),
                    FontAttributes = FontAttributes.Bold,
                    FontSize = 15,
                    IsVisible = false
                };
                return label;
            }
        }
    }
    

    THE CODE IN OF VIEW IS

    <ContentPage.Content>
            <AbsoluteLayout>
                <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                **code of view**
                </ScrollView>
               ** <ContentView x:Name="Float_Button" IsVisible="False"></ContentView>**
            </AbsoluteLayout>
        </ContentPage.Content>
    
  • The C# files is: FloatButton.cs
    --------------------------------------------------------------------
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    
    namespace ProjectWimcXam.Views
    {
        public class FloatButton: ContentPage
        {
            private StackLayout stack_main;
            private AbsoluteLayout button_main;
            private AbsoluteLayout button_main_aux;
            private int row = 0;
            private List<OPTION> optiones;
            private object viewPage;
            public delegate void SelectButton(string Id);
            public bool seeOptions = true;
            SelectButton select;
            public ContentView _view;
            public struct OPTION
            {
                public Label label;
                public AbsoluteLayout absoluteLayout;
            }
    
            public void Options(ref ContentView view)
            {
                if (optiones.Count > 0) { 
    
                    if (seeOptions)
                    {
                        SeeOptions(ref view);
                        seeOptions = false;
                    }
                    else
                    {
                        NotSeeOptions(ref view);
                        seeOptions = true;
                    }
                }
                else
                {
                    NotSeeOptions(ref view);
                    seeOptions = false;
                }
            }
    
            public void SeeOptions(ref ContentView view)
            {
                view.HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                view.VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                stack_main.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, true);
                stack_main.VerticalOptions = new LayoutOptions(LayoutAlignment.End, true);
                stack_main.Orientation = StackOrientation.Vertical;
    
                view.BackgroundColor = Color.FromHex("#60000000");
                foreach (OPTION opt in optiones)
                {
                    opt.absoluteLayout.IsVisible = true;
                    opt.label.IsVisible = true;
                }
    
                button_main = CreateButtonMain("ic_close_white", Color.FromHex("#0F6E8D"));
                view.Content = GetFloatButton();
            }
    
            private StackLayout GetActivityIndicartor()
            {
                StackLayout stack = new StackLayout
                {
                    Style = Theme.Style_load,
                    BackgroundColor = Color.Transparent
                };
                ActivityIndicator activity = new ActivityIndicator();
                activity.IsRunning = true;
                activity.Color = Color.White;
                stack.Children.Add(activity);
                Label label = new Label
                {
                    TextColor = Color.White,
                    Text = "Cargando ...",
                    Font =Font.SystemFontOfSize(NamedSize.Medium, FontAttributes.Bold),
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.Center, false),
                    VerticalOptions = new LayoutOptions(LayoutAlignment.End, false)
                };
                stack.Children.Add(label);
                return stack;
            }
    
            public void LoadingStart()
            {
                _view.HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                _view.VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, false);
                _view.Content = GetActivityIndicartor();
                _view.BackgroundColor = Color.FromHex("#60000000");
            }
    
            public void LoadingStop()
            {
                _view.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false);
                _view.VerticalOptions = new LayoutOptions(LayoutAlignment.End, false);
                _view.BackgroundColor = Color.Transparent;
                _view.Content = null;
                foreach (OPTION opt in optiones)
                {
                    opt.absoluteLayout.IsVisible = false;
                    opt.label.IsVisible = false;
                }
                _view.Content = GetFloatButton();
            }
    
            public void NotSeeOptions(ref ContentView view)
            {
                view.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false);
                view.VerticalOptions = new LayoutOptions(LayoutAlignment.End, false);
                view.BackgroundColor = Color.Transparent;
                view.Content = null;
                foreach (OPTION opt in optiones)
                {
                    opt.absoluteLayout.IsVisible = false;
                    opt.label.IsVisible = false;
                }
                button_main = button_main_aux;
                view.Content = GetFloatButton();
            }
    
            public FloatButton(ref ContentView contentView, string image_source,Color color, SelectButton Selection, object viewContext)
            {
                stack_main = new StackLayout();
                _view = contentView;
                contentView.BackgroundColor = Color.Transparent;
                AbsoluteLayout.SetLayoutBounds(contentView, new Rectangle(0, 0, 1, 1));
                AbsoluteLayout.SetLayoutFlags(contentView, AbsoluteLayoutFlags.All);
                contentView.Padding = new Thickness(0, 0, 20, 20);
                contentView.HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false);
                contentView.VerticalOptions = new LayoutOptions(LayoutAlignment.End, false);
                select = Selection;
                this.viewPage = viewContext;
                button_main = CreateButtonMain(image_source, color);
                button_main_aux = button_main;
                optiones = new List<OPTION>();
            }
            public StackLayout GetFloatButton()
            {
                row = 0;
                stack_main.Children.Clear();
                foreach (OPTION option in optiones)
                {
                    StackLayout stack_child = new StackLayout();
                    stack_child.Orientation = StackOrientation.Horizontal;
                    stack_child.Children.Add(option.label);
                    stack_child.Children.Add(option.absoluteLayout);
                    stack_main.Children.Add(stack_child);
                    row++;
                }
                stack_main.Children.Add(button_main);
                return stack_main;
            }
    
            public List<OPTION> GetOptions()
            {
                return optiones;
            }
    
            public AbsoluteLayout CreateButtonMain(string image_source,Color color)
            {
                AbsoluteLayout absoluteLayout = new AbsoluteLayout
                {
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.End, true),
                };
               Frame frame = new Frame
                {
                    HeightRequest = 20,
                    WidthRequest = 20,
                    BackgroundColor = color,
                   CornerRadius = 30,
                   HasShadow = true,
                   Content = new Image
                   {
                       Source = image_source
                   }
               };
                frame.GestureRecognizers.Add(SetEventClik(ref frame,"Main"));
                absoluteLayout.Children.Add(frame);
                return absoluteLayout; 
            }
    
            public TapGestureRecognizer SetEventClik(ref Frame frame, string id)
            {
                BindableProperty click = BindableProperty.Create("ID", typeof(string), (Type)viewPage, null);
                frame.SetValue(click, id);
                TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
                tapGestureRecognizer.Tapped += (s, e) => {
                    string _id = (string)((Frame)s).GetValue(click);
                    select(_id);
                };
                return tapGestureRecognizer;
            }
    
            public void AddOption(string image_source,Color color,string text, string id)
            {
                AbsoluteLayout absoluteLayout = new AbsoluteLayout
                {
                    Padding = new Thickness(5, 5, 3, 10),
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.End, true),
                    IsVisible = false
                };
                Frame frame = new Frame
                {
                    HeightRequest = 18,
                    WidthRequest = 18,
                    BackgroundColor = color,
                    CornerRadius = 30,
                    HasShadow = true,
                    Content = new Image
                    {
                        Source = image_source
                    }
                };
                frame.GestureRecognizers.Add(SetEventClik(ref frame,id));
                absoluteLayout.Children.Add(frame);
                if (row == 0)
                    stack_main.Children.Clear();
                OPTION pTION = new OPTION
                {
                    label = TitleOption(text),
                    absoluteLayout = absoluteLayout
                };
                optiones.Add(pTION);
            }
    
            private Label TitleOption(string text)
            {
                Label label = new Label
                {
                    Text = text,
                    TextColor = Color.White,
                    HorizontalOptions = new LayoutOptions(LayoutAlignment.End, false),
                    VerticalOptions = new LayoutOptions(LayoutAlignment.Center, false),
                    FontAttributes = FontAttributes.Bold,
                    FontSize = 15,
                    IsVisible = false
                };
                return label;
            }
        }
    }
    
    
    -----------------------------------------------------------------------------------------------
    THE CODE IN OF VIEW IS 
    
    
    <ContentPage.Content>
            <AbsoluteLayout>
                <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                **code of view**
                </ScrollView>
               ** <ContentView x:Name="Float_Button" IsVisible="False"></ContentView>**
            </AbsoluteLayout>
        </ContentPage.Content>
    
Sign In or Register to comment.