0

Hello I am trying to build an app using Xamarin Forms which contain a Frame with an image and entry inside it.

Following is my XAML

    <?xml version="1.0" encoding="utf-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:SampleLoginRenderer" 
    x:Class="SampleLoginRenderer.SampleLoginRendererPage"
    BackgroundColor="Blue">

    <ContentPage.Content>
    <Grid Grid.Row="3" Padding="0,10,0,0">
        <local:MyFrame BackgroundColor="Red" OutlineColor="White" HasShadow="false" Padding="20,5,5,5" VerticalOptions="Center">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Image Source="nav_user.png" HeightRequest="20" WidthRequest="20" HorizontalOptions="Start" />

                <local:MyEntry Placeholder="UserName / PhoneNo" 
                       x:Name="EntryUserName" 
                       BackgroundColor="White" 
                       PlaceholderColor="White" 
                       Grid.Column="1" 
                       HorizontalOptions="FillAndExpand" 
                       TextColor="White"  
                       FontSize="15"    
                       HeightRequest="40" />
          </Grid>
    </local:MyFrame>
  </Grid>
        </ContentPage.Content>
</ContentPage>

And then I have Custom Renderers for the Frame and Entry in both iOS and Android projects.

Frame Renderers in Android Project:

Firstly, I have created a class in the PCL project,

    using System;
    using Xamarin.Forms;

    namespace SampleLoginRenderer
    {
        public class MyFrame : Frame
        {

        }
    }

And created a XML file, (See Below)

    <?xml version="1.0" encoding="UTF-8"?>

  <shape xmlns:android="http://schemas.android.com/apk/res/android" 
         android:shape="rectangle">
    <stroke android:width="2.3dp" android:color="#ffffff"/>

    <solid android:color="#00000000"/>
    <corners android:radius="5dp" />
  </shape>

FrameRenderer class in Android:

using Xamarin.Forms;
using System;
using Xamarin.Forms.Platform.Android;
using SampleLoginRenderer;
using SampleLoginRenderer.Android;
using Android.Content;
using Android.Graphics.Drawables;
using Android.Text;
using Android.Content.Res;
using SampleLoginRenderer.Droid;
using Android.Graphics;

[assembly: ExportRenderer(typeof(MyFrame), typeof(MyFrameRenderer))]
namespace SampleLoginRenderer.Droid
{
    public class MyFrameRenderer : FrameRenderer
    {
        public MyFrameRenderer(Context context) : base(context)
        {
        }

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


                this.SetBackgroundResource(Resource.Drawable.blue_resct);

        }
    }
}

Frame Renderers in iOS:

Create FrameRenderer Class

using Xamarin.Forms;
using System;
using SampleLoginRenderer;
using SampleLoginRenderer.iOS;
using Xamarin.Forms.Platform.iOS;
using CoreGraphics;
using UIKit;

[assembly: ExportRenderer(typeof(MyFrame), typeof(MyFrameRenderer))]

namespace SampleLoginRenderer.iOS
{
    public class MyFrameRenderer : FrameRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            this.Layer.CornerRadius = 18;
            this.Layer.Bounds.Inset(1, 1);
            Layer.BorderColor = UIColor.White.CGColor;
            Layer.BorderWidth = 2;
            Layer.BackgroundColor = Color.Transparent.ToCGColor();
        }
    }
}

Similarly I have created Entry Renderers in both Android and iOS projects:

In PCL,

using System;
using Xamarin.Forms;

namespace SampleLoginRenderer
{
    public class MyEntry : Entry
    {

    }
}

Xamarin Android Entry Renderer:

using Xamarin.Forms;
using System;
using Xamarin.Forms.Platform.Android;
using SampleLoginRenderer;
using SampleLoginRenderer.Android;
using Android.Content;
using Android.Graphics.Drawables;
using Android.Text;
using Android.Content.Res;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace SampleLoginRenderer.Android
{
    public class MyEntryRenderer : EntryRenderer
    {
        public MyEntryRenderer(Context context) : base(context)
        {
        }

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

            if (Control != null)
            {
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);
                #pragma warning disable CS0618 // Type or member is obsolete
                this.Control.SetBackgroundDrawable(gd);
                #pragma warning restore CS0618 // Type or member is obsolete
                this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
                Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
            }
        }
    }
}

Xamarin iOS Entry Renderer:

using SampleLoginRenderer;
using SampleLoginRenderer.iOS;
using Xamarin.Forms;
using System;
using Xamarin.Forms.Platform.iOS;
using UIKit;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace SampleLoginRenderer.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {

                Control.BorderStyle = UITextBorderStyle.None;
                Control.Layer.CornerRadius = 10;
                Control.TextColor = UIColor.White;

            }
        }
    }
}

I run the app on iOS and it gives me my desired result which is what i want (See Below)

Result iOS

But when I run the same app on Android, I get the following exception and the app crashes

Android Exception

I couldn't figure why is this happening on Android whereas on iOS it is working fine.

Any workarounds or suggestions would be highly appreciated.

Thanks in advance

magicandre1981
  • 27,895
  • 5
  • 86
  • 127

0 Answers0