Xamarin Forms button with loading indicator

Question

I'm into Xamarin since about week and have a question about the possibility of making loading icon inside a button.

I would like to achieve something similiar to this: https://jsfiddle.net/mr8fwtcv/

I was trying to achieve this effect with FontAwesome but had a problem animating it, so it would be not bad to use Activity Indicator in the solution.

My button is placed inside Stack Layout, and here is the code:

var loginButton = new Button
{
    BackgroundColor = Color.FromHex("689F38"),
    TextColor = Color.White,
    HeightRequest = 46,
    Text = "Log in",
    FontAttributes = FontAttributes.Bold,
    FontSize = 18,
    Margin = margin
};

I was already looking for some plugins / solutions but couldn't find any. Thanks in advance.

Did you try just adding an ActivityIndicator on top of the button and setting the Text Property of the Button to an empty string once IsBusy (or whatever you bind to) is true? — Demitrian
I would do what Demitrian has recommended or create a ButtonRemderer and add it to the native. In the OpropretyChanging override, you can handle the functionality. — BrewMate

Rohit Vipin Mathews Rohit Vipin Mathews · Accepted Answer · 2017-01-15T00:47:10

You will have to use a Layout to have more than one control in it. If you are not looking for CustomRenderers then what you could do is have a RelativeLayout and inside that both the Button and the Activity Indicator. You will also have to write a Converter for the button text that will set the text to string.Empty when the IsBusy is true.

For example:

<StackLayout>
    <ActivityIndicator IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}" />
    <Button Text="{Binding ButtonText, Converter={StaticResource ButtonTextConverter}, ConverterParameter={Binding IsBusy}}" />
</StackLayout>

Also if you are planning to use this in multiple places you can create this as a custom control.

You can check out the custom control code here.

The full project is available here.

Xamarin Forms button with loading indicator

1 Answers