Xamarin.Forms: create a Rounded/Circle Button from Iconize

Question

I try to create a Rounded/Circle Button that can display font icons . As I already use Iconize in my project, I tried to create the Rounded/Circle Button from the existing IconButton .

I first tried this, by fixing BorderRadiusas the half value of the HeightRequest / WidthRequest :

<iconize:IconButton HeightRequest="40" WidthRequest="40" 
                    BorderRadius="20"
                    Text="fa-500px" TextColor="Red" FontSize="20" 
                    BackgroundColor="Orange" BorderColor="Red"
                    BorderWidth="2" 
                    VerticalOptions="Start" HorizontalOptions="Center">
</iconize:IconButton>

The default rendering works as expected on UWP, but the "clicked" rendering is not good, as a rectangle is appearing. However on Android, the button is always in "default" mode: there is no border, no background, ...

So I've added a FlatButton control, and a Renderer for Android:

public class FlatButton : IconButton
{
}

[assembly: ExportRenderer(typeof(FlatButton), typeof(FlatButtonRenderer))]
namespace Iconize.Sample.Droid.Renderers
{
    public class FlatButtonRenderer : ButtonRenderer
    {
        protected override void OnDraw(Android.Graphics.Canvas canvas)
        {
            base.OnDraw(canvas);
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
        }
    }
}

And I use it like this:

<controls:FlatButton HeightRequest="40" WidthRequest="40" 
                    BorderRadius="20"
                   Text="fa-500px" TextColor="Red" FontSize="20" 
                   BackgroundColor="Orange" BorderColor="Red"
                   BorderWidth="2" 
                   VerticalOptions="Start" HorizontalOptions="Center">
</controls:FlatButton>

This time, the rounded rendering is fine on Android, but I've lost the "display" of the font icon.

Here is a screenshot:

Is there a way to keep the rounded renderer and the icon display? And in a second time, is there a way to fix the rendering issue on UWP when the button is clicked?

I also looked other plugins:

• Flexbutton : seems to work fine, but there is no UWP support
• ButtonCirclePlugin : I wasn't able to use it in my solution, and the I wasn't able to built the provided sample...

Would you have other suggestions?

Answer 1

I've finally found a temporary solution, by redefining the Iconize IconButtonRenderer like this:

• CircleIconButton : I've created a control that inherits from IconButton
• CircleIconButtonRenderer : I've duplicated the IconButtonRenderer for Android. I had to removed the first debug tests, and the expected new format of constructor: public CircleIconButtonRenderer(Context context) : base(context) . So this class appears as "obsolete".
• MainPage : I've implemented the new control in the page, like we do for an IconButton .

But there is probably a better way, as the expected constructor is not implemented...