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!

score 4 · Accepted Answer · answered Mar 22 '17 at 10:39

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!

This is definettly what I was looking for, thanks!! And if i have to change the placeholder style, for example the font size of the placeholder, I have to work in the .xml file? — denno, Mar 22 '17 at 11:47
As a fairly new Xamarin developer this tutorial was missing the following point... xml file must have the build action set to AndroidResource. This is was adds the file to the Resource.Drawable class. — Stephen Hewison, Mar 30 '17 at 12:00

score 0 · Answer 2 · answered Mar 22 '17 at 09:38

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/

score 0 · Answer 3 · answered Mar 22 '17 at 09:41

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

Put the entry inside a frame
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 ;) )

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

3 Answers3