Entry Custom Renderer(add all borders for Android) in Xamarin.Forms

Question

I have a question. I need to add all borders to an entry in Android using Xamarin.Forms. I created the renderer class in the PCL and referenced it in the xaml file. Then I created the specific class for the renderer in the Android Project. I have this:

[assembly: ExportRenderer (typeof(EntryCustom), ypeof(EntryRendererCustom))]
namespace InstagramApp.Droid.Renderers
{
 public class EntryRendererCustom : EntryRenderer
 {
    protected override void OnElementChanged(ElementChangedEventArgs<Entry>, e)
    {
        base.OnElementChanged(e);

        if(Control != null)
        {

        }
    }

  }
}

Now i have to add the code in the IF statement but I'm new with xamarin and the renderers. Can someone help me? If someone can also explain me some basics on how to approach to the custom renderers it could be gold for me. Thanks all!

Answer 1

This is how you can do it :

[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendererImplementation))]
namespace MyProject.Droid.Renderers
{
    public class EntryRendererImplementation : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Background = this.Resources.GetDrawable(Resource.Drawable.RoundedCornerEntry);
                Control.SetPadding(10,10,10,3);
            }
        }
    }
}

You will have to create this file in Resources/drawable/RoundedCornerEntry.xml in your android project

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" >
    <shape android:shape="rectangle">
      <gradient
          android:startColor="@color/entry_background"
          android:endColor="@color/entry_background"
          android:angle="270" />
      <stroke
          android:width="1dp"
          android:color="@color/entry_border" />
      <corners
          android:radius="6dp" />
    </shape>
  </item>
  <item>
    <shape android:shape="rectangle">
      <gradient
          android:startColor="@color/entry_background"
          android:endColor="@color/entry_background"
          android:angle="270" />
      <stroke
          android:width="1dp"
          android:color="#c6c6c6" />
      <corners
          android:radius="6dp" />
    </shape>
  </item>
</selector>

Of course, you need to update your Resources/values/colors.xml file Something like :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="entry_background">#ffffff</color>
  <color name="entry_border">#BDBDBD</color>
</resources>

There you go!

Answer 2

you have a lot of example for custom render in the page of xamarin.

Here is a long explanation : https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/

Here is an example for a hybridwebview:

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/hybridwebview/

Answer 3

Well to understand how to work with Custome Renderers there are plenty of tutorial both written and videos about that so it is better if you check that yourself ,

there are other ways to add the borders without the need of using custom renderer, and this depends on what is the image you have in mind when you say borders

1. Put the entry inside a frame
2. Put the entry above a boxView, with this you would have more control over the "Border" for example, thickness, opacity and even animation (maybe you want the borders to blink)

To do the second approach I would use a grid for that like this

<Grid>
   <BoxView Color="Blue" />
   <Entry/>
</Grid>

The order here is important in a grid for this case the elements which are defined first are placed below . Another obviouse point is the the height and width of the BoxView should be slightly larger than those for the Enrty, and the bigger the box the thicker the border (and I am still talking about code here ;) )