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.

Answer 1

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.