robinmanuelthiel / flexbutton

Flexible button control for Xamarin.Forms

Xamarin.Forms FlexButton

Flexible button control for Xamarin.Forms with events for different states, color overlays and adjustable shapes and paddings. Supports iOS, Android and UWP.

Features:

• Adjustable button size and shape
• Icons with adjustable size
• Color overlays for background and icon (normal and pressed state)
• Events for button hold and release
• Round button and Pill button (using corner radius)
• Icon only, text only or mixed mode
• Customizable Borders
• Toggle Mode

How to use

Add the NuGet package to the Xamarin.Forms project and all platform projects

PM> Install-Package Forms.Controls.FlexButton

[iOS only] Initialize the control In your AppDelegate.cs call this after Forms.Init();

FlexButton.Init();

Add the XML namespace

xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"

Add the control

<flex:FlexButton
    WidthRequest="76"
    HeightRequest="76"
    CornerRadius="38"
    HorizontalOptions="Center"
    Icon="lightbulb.png"
    ForegroundColor="#ffffff"
    HighlightForegroundColor="#49516F"
    BackgroundColor="#6279B8"
    HighlightBackgroundColor="#8EA4D2" />

Preview

Take a look a the Demo Project in this repository for a full sample.

API Reference

Property	Default	Description
Icon	null	Name of the icon file to use
Text	string.Empty	Button text to be displayed
FontSize	Default	Font size of the button text
ForegroundColor	White	Foreground color overlay for icon and text
BackgroundColor	Transparent	Background color of the button
BorderColor	Transparent	Border color of the button
HighlightForegroundColor	White	Foreground color overlay for icon and text when pressed down
HighlightBackgroundColor	Transparent	Background color of the button when pressed down
HighlightBorderColor	Transparent	Background color of the border when pressed down
CornerRadius	0	Button borner radius
Padding	30% of height, 10-30% of width	Inside distance from icon to button borders
IconPadding	0	Additional Padding around the icon to control distance to text
IconOrientation	IconOrientation.Left	Positions the icon on a button that has icon and text
BorderThickness	0	Width of the border in each direction
ToggleMode	false	Sets the button in Toggle Mode
IsToggled	false	Represents the Toggle state, when Toggle Mode is enabled
IconTintEnabled	true	Enables tinting of the icon (Set to false, if your icon is colorized)
HasShadow	false	Enables Xamarin.Forms Frame's Shadow around the button
MaxLines	1	Maximum number of lines for test. Set it to -1 for flexible amount of lines
AccessibleName	string.Empty	Accessibility Name for Automation

Event	Description
TouchedDown	Triggered, when button got pressed down
TouchedUp	Triggered, when button got released
TouchCanceled	Triggered, when moving the pointer out of the button area
Clicked	Same as TouchedUp
Toggled	Triggered, when the button got toggled on or off

flexbutton's Issues

[enhancement] Debounce & isBusy & Activity Indicator?

hello,

It will be great to add an activity indicator for Async Task
on the middle of the Button that make invisible Label and Image.

Maybe we could implement two sort of Bool
One IsBusy (true or false) bindable property for debouncing
One ShowLoader (true or false) bindable property (that show the activity indicator when busy)

(Without debouncing, pressing the button multiple times may cause unpredictable results)

It will help also for: #42 with a common isBusy bool for his grouped buttons.

I can make a Pull request, but waiting for your expectation and your Go.

Let me know

ClickCommand does not allow CanExecute function

When using the FlexButton ClickCommand bound to a Command that has CanExecute, the button will not be disabled when invalid or run the CanExecuteMethod to validate.

Regular button handles this.

Padding not working?

Not sure if this is padding but no matter what I do (setting the padding to 0) the text is centered with padding left and right?

I cant really give more then that, the code I'm using is:

            var test = new FlexButton
            {
                Text = "Test",
                FontSize = 14,
                HeightRequest = 26,
                Margin = 0,
                Padding = 0,
                BackgroundColor = Color.Red
            };

And it looks like this:

Any ideas why this is a thing? I need the text as far to the side as possible.

Create Button in csharp

Describe the bug
I have different output creating FlexButton in code VS xaml

To Reproduce
public static FlexButton CreateFlexButton(string text = null)
{

        FlexButton flexButton = new FlexButton();
        if (!String.IsNullOrEmpty(text))
            flexButton.Text = text;

        flexButton.HorizontalOptions = LayoutOptions.Center;
        flexButton.WidthRequest = 300;
        flexButton.HeightRequest = 80;
        flexButton.CornerRadius = 22;
        flexButton.BorderColor = Color.FromHex("#49516F");
        flexButton.HighlightBorderColor = Color.FromHex("#6279B8"/*"#f28e02"*/);
        flexButton.ForegroundColor = Color.FromHex("#ffffff");
        flexButton.HighlightForegroundColor = Color.FromHex("#49516F");
        flexButton.BackgroundColor = (Color) Application.Current.Resources["MyColor"];
        flexButton.HighlightBackgroundColor = Color.FromHex("#8EA4D2");
        flexButton.FontSize = 30;
        

        return flexButton;

    }

I think I should see text center aligned and the shadow on the bottom of each button, as I see in your xaml example

        <flex:FlexButton
            x:Name="WideButton"
            ClickedCommand="{Binding ButtonClickedCommand}"
            IconOrientation="Right"
            HorizontalOptions="Center"
            WidthRequest="300"
            HeightRequest="76"
            CornerRadius="22"
            Icon="lightbulb.png"
            Text="Icon and Text"
            BorderThickness="0,0,0,4"
            BorderColor="#49516F"
            HighlightBorderColor="#6279B8"
            ForegroundColor="#ffffff"
            HighlightForegroundColor="#49516F"
            BackgroundColor="#6279B8"
            HighlightBackgroundColor="#8EA4D2"/>

Expected behavior
center text and shadow at the bottom

Screenshots
I have this output on a Nexus 7.1 Android API 25 emulator

Please complete the following information:

• Which version of the FlexButton do you use? 0.70
• Which version of Xamarin.Forms do you use? 3.1 last stable
• Which OS are you talking about? Android

Problem with icon

Hi.
I have this function

   public static FlexButton CreateFlexButton(String text, String icon)
    {
        FlexButton flexButton = new FlexButton();
        flexButton.IconOrientation = Flex.Extensions.IconOrientation.Left;
        flexButton.HorizontalOptions = LayoutOptions.Center;
        if (!String.IsNullOrEmpty(text))
        {
            flexButton.WidthRequest = 300;
            flexButton.HeightRequest = 76;
            flexButton.CornerRadius = 22;
            flexButton.BorderThickness = new Thickness(0, 0, 0, 4);
            flexButton.FontSize = 30;
        }
        else
        {
            flexButton.WidthRequest = 50;
            flexButton.HeightRequest = 50;
            flexButton.CornerRadius = 25;
            flexButton.BorderThickness = 3;               
        }

        if (!String.IsNullOrEmpty(icon))
            flexButton.Icon = icon;
        if (!String.IsNullOrEmpty(text))
            flexButton.Text = text;

        flexButton.BorderColor = Color.FromHex("#49516F");
        flexButton.HighlightBackgroundColor = Color.FromHex("#6279B8");
        flexButton.ForegroundColor = Color.FromHex("#ffffff");
        flexButton.HighlightForegroundColor = Color.FromHex("#49516F");
        flexButton.BackgroundColor = Color.FromHex("#6279B8");
        flexButton.HighlightBackgroundColor = Color.FromHex("#8EA4D2");
            
        return flexButton;
    }

I call this function with this code

FlexButton flexButtonPrecedente = Utility.CreateFlexButton(null, "test.png");

and I attach the icon...
but I have a small icon in my button. How can I have a larger icon?

Xamarin.Forms Previewer is not working

Since the update to Xamarin.Forms 2.5.1, the Previewer is not working anymore

Respect HorizontalOptions when using icon and text

Describe the bug
Choosing HorizontalOptions="Start" aligns text-only buttons to the left, when adding an icon, everything is centered aligned again.

To Reproduce
<flex:FlexButton Text="Foo" Icon="Bar.png" HorizontalOptions="Start" />

Expected behavior
I would expect that icon and text are left aligned.

Border

Icon change color

Hi.

I have the icon attached. It's black

I visualize a button only with icon (no text)

When I press the button, the icon turn into white... why?

Differentiate your GestureFrameRenderer with Frame Class

Hello,

Could be nice if you don't use the Basic Frame Class for your custom renderer.

Because it could make some issue in our code using Frame and custom renderers too

I will think about a PR :)

Can't remove border on Android.

Hi there!

After updating to 0.6.1, I can't remove the border on Android anymore, on 0.5.0 worked fine.

Even if I set:

BorderThickness="0" HighlightBorderColor="Transparent" BorderColor="#00FFFFFF"

It still shows a white border, am I doing anything wrong here?

Icon isssues

Control version: 0.4.0

Hi, great control I just have 2 issues.

1. Is there going to be an update to allow SVG as an icon?
2. Is there a way to change the default position of the icon with text
   i.e. at the moment it defaults to the left of the text but we need it on the right.

Change only background color

Hi
i need to create a coloured button with a colored image, i only need background color is changed and not Highlight color is applied to the image.
I have tried setting various color to transparent but don't work.
How can i do this?

Thanks
Alessio

When border is set and then background color is transparent, It is filled with border color.

Add FontAttributes properties

Hi there!

First of all, thank you very much for the amazing work you did, it's indeed a really Flexible button and very helpful!

If possible, I would like to suggest a new feature, which is add the FontAttributes properties for the button text, I think this would make it even more flex!

Thank you once again!

Icon padding wrong in Xamarin.Forms Previewer

Toggle Mode

Set IconOrientation on a Icon Only Button causes icon size issues

Example

This

<flex:FlexButton
    x:Name="DemoButton"
    HorizontalOptions="Center"
    IconOrientation="Right"
    WidthRequest="76"
    HeightRequest="76"
    CornerRadius="38"
    Icon="lightbulb.png"
    ForegroundColor="#ffffff"
    HighlightForegroundColor="#49516F"
    BackgroundColor="#6279B8"
    HighlightBackgroundColor="#8EA4D2"/>

causes that

Possible explaination

When setting the IconPosition to a non-default value, the SetButtonMode method will be called one more time.

Support Text in button

Add HighlightText property.

Hello Robin

How is adding HighlightText property?
When it is null, text isn't changed.
If it has value, text is changed.
I think it is useful in Toggle mode.

If you want I can create PR for it.

Thanks.

Question about Building derived class from FlexButton

Hi!

I'm trying to build a class that is deriving from FlexButton.
When the Button is created i get an exception:

Xamarin.Forms.Xaml.XamlParseException: Position 30:18. Type extensions:TouchGestureRecognizer not found in xmlns clr-namespace:Flex.Extensions

In my code i do something like this:

C#:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyFlexButton: FlexButton {
public MyFlexButton() {
InitializeComponent();
}
}

Xaml:

<flex:FlexButton xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:extensions="clr-namespace:Flex.Extensions"
xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
x:Class="MyControls.MyFlexButton"/>

Does anybody have a solution for this?
I would like to add properties....

Thanks and regards

Corner Radius not working. How to fix it?

Corner Radius not working. How to fix it?

IOS, Android same

IsEnabledProperty does not work

Hi.
I have this code

        flexButtonSalva.SetBinding(FlexButton.IsEnabledProperty, "IsSalvaEnabled");

When IsSalvaEnabled is "false", the button is enabled...

If I change IsEnabledProperty with IsVisibleProperty, when IsSalvaEnabled is "false", the button disappear.

So I think there is a problem with Enabled property

Alessandro

VerticalOptions=FillAndExpand

Hi!
I'm using Flexbutton with in a Grid and want to set the height with percentage.
FlexButton wants to get a HeightRequest - VerticalOptions is not working.
Tried to set HeightRequest to a more bigger size - Than button has the correct size, but text is no align correctly
Would be a nice

Thanks

font size option

please, add font size option.

Button in ListView problem

I can't seem to get the button click to work in a ViewCell in a ListView.ItemTemplate. Anyone else see this?

This is the button I'm trying to replace. This code works as expected.

        <Button x:Name="btnMenu" 
            HorizontalOptions="End" 
            Text="Menu"
            BindingContext="{Binding Source={x:Reference _lvCarts}, Path=BindingContext}"   
            Command="{Binding GetMenuCommand}"   
            CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}"
        />   

I try to replace with the following, and every time I tap on the button the ListView ItemSelected code is what gets fired.

        <flex:FlexButton
            x:Name="btnMenu"
            Text="Menu"
            HorizontalOptions="End" 
            CornerRadius="6"
            ForegroundColor="#ffffff"
            HighlightForegroundColor="#49516F"
            BackgroundColor="#FF234389"
            HighlightBackgroundColor="#8EA4D2"
            BorderColor="#8EA4D2"
            HighlightBorderColor="#8EA4D2"
            BorderThickness="2"
            BindingContext="{Binding Source={x:Reference _lvCarts}, Path=BindingContext}"   
            ClickedCommand="{Binding GetMenuCommand}"   
            ClickedCommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}" 
        />

Transparent Button Background

Working in a camera page and is in need of a transparent background on the button.

ForegroundColor not applied when loaded in Android

Hi. I use a flexbuttton inside a contentview .
In android device, when the page appears the button icon has its original color ignoring foreground setting. When I click the button the foreground works out.
In iOS it's ok.
I think the foreground is applied before the icon is loaded into button. If the foreground is set after some event or with a delay, the icon changes rightly its color.
Any ideas?

Change icon size

How can I increase the size of the button icon?

[Android] Button does not detect "Release" when finger is released outside of it

The control FlexButton not work in WUP proyect

Hi Every one, I'm been workin with the Flexbutton control over a PLC project, and it wokrs fine in the Android and iOS projects but not work in UWP project, the project runs ok whiout errors but the button only appears like image, any else have some idea?

Project version netstand 2 and Xamarin Forms 3.0

on Android: System.MissingMethodException: Default constructor not found for type Flex.Android.Effects.ColorOverlayEffectAndroid

Describe the bug
When loading form with the control, error appears:
System.MissingMethodException: Default constructor not found for type Flex.Android.Effects.ColorOverlayEffectAndroid

To Reproduce
Installed on nuget, added button from code behind.

Expected behavior
Render buttons.

Please complete the following information:

• Which version of the FlexButton do you use? -- 0.8
• Which version of Xamarin.Forms do you use? -- 3.3.0.912540
• Which OS are you talking about? -- Android

When change IsToggled property from true to false, button is not changed.

It works when change IsToggled property from false to true, but it doesn't work when change the property from true to false.

Support shadow effect

Describe the solution you'd like
Not sure if this is already supported but couldn't find a way to add/enable a shadow effect to the button.

Pull Request
I could make a PR in case it's not supported yet and I can figure out how to implement it.

Creating flexbutton from Code Behind has jumping issue

Hello,

I am having an issue where the width of my button is changing when it is added from the code behind. this is resulting in the last letter of my button being shifted to a second line for a second.
The button which is added from the XAML is not affected.
Any help would be hugely appreciated.

Regards,
Shane

XAML
<StackLayout BackgroundColor="White"> <ScrollView Orientation="Horizontal" Padding="0"> <StackLayout Orientation="Horizontal" HeightRequest="50" Padding="0" BackgroundColor="MidnightBlue" Spacing="0"> <flex:FlexButton WidthRequest="70" HeightRequest="50" Icon="folder_up.png" Padding="0" HorizontalOptions="Center" ForegroundColor="#ffffff" HighlightForegroundColor="#49516F" BackgroundColor="#6279B8" HighlightBackgroundColor="#8EA4D2" ClickedCommand="{Binding BackUpBtnCommand}"/> <StackLayout Orientation="Horizontal" x:Name="TopButtons" Padding="0" Spacing="0"> </StackLayout> </StackLayout> </ScrollView>

C#
`private void CreateTopButtons()
{
TopButtons.Children.Clear();
TopButtons.HeightRequest = 50;

        foreach (var bc in ViewModel.BreadCrumbs)
        {
            var butt = new FlexButton
            {
                Text = bc.Name,
                WidthRequest = 100,
                HorizontalOptions = LayoutOptions.Start,
                ForegroundColor = Color.FromHex("#ffffff"),
                HighlightForegroundColor = Color.FromHex("#49516F"),
                BackgroundColor = Color.FromHex("#6279B8"),
                HighlightBackgroundColor = Color.FromHex("#8EA4D2"),
                TouchedUpCommand = ViewModel.SetCommand(bc)
            };
            TopButtons.Children.Add(butt);
        }
    }`

(sorry about the huge screenshots)

[UWP] In Release Mode the button is not clickable

In Release Mode the button is not clickable in FlexButton v. 0.8.

Commands doesn't work on TouchUp Down or clicked

hello,

I notice that Binding Commands doesn't work on TouchUp Down or clicked.

Thanks for your great work!

[Update] Border Frame on Xamarin.forms 3.0

Hello,

Xamarin.Forms 3.0 has just been released and they fix the issue on Android with border line frame.

So now we could just use one Frame to make appear the Border of it.
And It could also allow us, to get a button with transparent Background but borderer

Let me know about your expectation,
Regards,

TouchedUp event not firing; no tap behavior

Describe the bug
While testing the control I didn't see any visual tap behavior so I decided to add it via the TouchedUp event, but the event does not fire. I suspect both issues are related.

To Reproduce
The control is being created from xaml using the provided example and run on ios 11 device and emulator. The event was wired using both xaml and code behind with no resulting difference; no event was fired.

Expected behavior
Tap behavior feedback.
TouchUp event to fire (I attempted to produce the behavior myself).

Please complete the following information:

• Which version of the FlexButton do you use? 0.8
• Which version of Xamarin.Forms do you use? 3.1.0.697729
• Which OS are you talking about? iOS 11.4.1

    async void Icon_TouchedUp(object sender, EventArgs e)
    {
      Opacity = .25;
      await Task.Delay(200);
      Opacity = 1;
    }

  <flex:FlexButton
    x:Name="icon"
    WidthRequest="50"
    HeightRequest="50"
    CornerRadius="25"
    HorizontalOptions="Center"
    Icon="smartphone.png"
    ForegroundColor="#ffffff"
    HighlightForegroundColor="#49516F"
    BackgroundColor="#6279B8" TouchedUp="Icon_TouchedUp"
    HighlightBackgroundColor="#8EA4D2" />

Support UWP

Support macOS

Clicked event triggered even when dragged outside

Describe the bug
When clicking on a FlexButton, the Clicked event is triggered even if the user drags its finger outside the button to cancel the action.

To Reproduce

1. Create a simple FlexButton and implement the Clicked event.
2. Click on the button and drag outside its frame. Release.
3. The Clicked event is triggered.

Expected behavior
The Clicked event should not be triggered.

Please complete the following information:

• Which version of the FlexButton do you use? 0.8.0
• Which version of Xamarin.Forms do you use? 3.1.0
• Which OS are you talking about? Android 8.1, iOS 11.4

Visual Studio Team Services build step failure

I updated to v0.5.0 (can't remember what the previous version was) and now the Android Visual Studio Team Services build step fails (builds and runs fine locally).

Support for Icon Fonts

Label and icon position configuration

Thanks for a great control.

But I'd like to make a feature request.

Make it possible to control the location of the icon, and the alignment of the textlabel. A second line label would also be great, to allow for two fontsizes.

'FlexButton' does not contain a definition for 'Init' (CS0117)

I downloaded the nuget package and following the instructions from the website but I can not call the Init function in my Delegate.cs file.

Background Color Wrong?

When I tried using flexbutton to replace some of my existing buttons, I noticed that my chosen background colors were not being rendered the same. I'm using an iPhone X iOS 11.2 simulator, but I also tested it on the iPhone 8 simulator.

My original background color with my buttons was #37404A. This was rendered as #47525C.

The closest I could get was #37404B, but in order to do so, I had to use #2A313A. My XAML is below:

<flex:FlexButton WidthRequest="40" HeightRequest="40" CornerRadius="5" Padding="0" Margin="5,5,10,10"
                             Icon="chevrondown.png" ForegroundColor="#A8B4BB" HighlightForegroundColor="#A8B4BB"
                             BackgroundColor="#2A313A" HighlightBackgroundColor="#4E5866" TouchedDown="NextButtonPressed" />

It looks like the color is being overlayed or transformed in some way. This issue doesn't appear to affect Android; the color that showed up was the color set when I tested it on API 26, but on multiple iOS simulators, the color shows up wrong. Am I doing something wrong here?

Remove Icon when toggled = false

How do I delete the check image when IsToggle == false?

bug in changing backgroudcolor in the code

Describe the bug
It seems there is a bug in changing the flex button backgroundcolor from codes. I have two flex buttons in the content page. I want to change the buttons' backgroundcolor when clicking the buttons.
I use the following codes:
private void button1_OnClicked(object sender, EventArgs e)
{
button1.BackgroundColor = Color.Blue;
button2.BackgroundColor = Color.White;
}

private void button2_OnClicked(object sender, EventArgs e)
{
button1.BackgroundColor = Color.White;
button2.BackgroundColor = Color.Blue;
}

but after buttons change to blue, they are not able to change to white

Expected behavior
click button1: button1 is blue, button2 is white.
click button2: button1 is white, button2 is blue.

I am using FlexButton 0.8.0, Xamarin.Forms 3.1, PCL

anyone met same problem?

GroupButton

Hi
Should be useful to have to possibility to "group" buttons so I can only one Toggled button active at a time