Custom renderer for button

Question

I am pulling my hair with this one. I am trying to create a custom renderer in using Xamarin Forms (Portable Class Library-PCL) to get the result showing in image below:

What I need:

1. Rounded corners
2. Button apperance (showing touch)
3. "Normal" button label in center
4. Image in the right corner
5. Smaller text in the lower left.

I have managed to create a custom renderer for a normal button but not being able to add the small text and the image. See image below

Thanks!

Answer 1

This might help

use a CardView as a button and handle click events on the cardview the way you handle on button

<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
card_view:contentPadding="4dp"
card_view:cardBackgroundColor="@color/darkorange"
android:id="@+id/view">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:text="centered"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_menu_send"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textView3"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>
</android.support.v7.widget.CardView>

Answer 2

Here is the solution for UWP for anyone interested!

[assembly: ExportRenderer(typeof(RoundedButton), typeof(RoundedButtonRenderer))]
namespace Platformspecific.Buttons
{
    public class RoundedButtonRenderer : ViewRenderer<RoundedButton, Windows.UI.Xaml.Shapes.Rectangle>
    {
        Xamarin.Forms.Color originalBackground;
        private RoundedButton _control;

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

            if (e.NewElement != null)
            {
                _control = e.NewElement as RoundedButton;

                originalBackground = _control.CustomBackgroundColor;

                this.PointerPressed += Control_Pressed;
                this.PointerReleased += Control_Released;
                this.PointerExited += Control_Released;

                var rectangle = new Windows.UI.Xaml.Shapes.Rectangle();
                rectangle.Width = this.Width; // 100;
                rectangle.Height = this.Height;


                rectangle.Fill = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 

                rectangle.RadiusX = _control.BorderRadius;
                rectangle.RadiusY = _control.BorderRadius;



                rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor));
                rectangle.StrokeThickness = _control.BorderWidth;

                this.SetNativeControl(rectangle);


            }
        }


        public static Windows.UI.Color ToMediaColor(Xamarin.Forms.Color color)
        {
            return Windows.UI.Color.FromArgb(((byte)(color.A * 255)), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
        }


        void Control_Pressed(object sender, PointerRoutedEventArgs e)
        {


            Windows.UI.Xaml.Shapes.Rectangle _rectangle = e.OriginalSource  as Windows.UI.Xaml.Shapes.Rectangle;


            var rectangle = new Windows.UI.Xaml.Shapes.Rectangle();
            rectangle.Width = this.Width; 
            rectangle.Height = this.Height;
            rectangle.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 100, 100, 100));
            rectangle.RadiusX = _control.BorderRadius;
            rectangle.RadiusY = _control.BorderRadius;
            rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor));
            rectangle.StrokeThickness = _control.BorderWidth;

            this.SetNativeControl(rectangle);

            e.Handled = false;
        }

        void Control_Released(object sender, PointerRoutedEventArgs e)
        {

            Windows.UI.Xaml.Shapes.Rectangle _rectangle = e.OriginalSource as Windows.UI.Xaml.Shapes.Rectangle;


            var rectangle = new Windows.UI.Xaml.Shapes.Rectangle();
            rectangle.Width = this.Width; 
            rectangle.Height = this.Height;
            rectangle.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(((byte)(originalBackground.A * 255)), (byte)(originalBackground.R * 255), (byte)(originalBackground.G * 255), (byte)(originalBackground.B * 255)));
            rectangle.RadiusX = _control.BorderRadius;
            rectangle.RadiusY = _control.BorderRadius;
            rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor));
            rectangle.StrokeThickness = _control.BorderWidth;



            rectangle.Fill = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 
            rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 


            this.SetNativeControl(rectangle);
            e.Handled = false;
        }


    }
}