custom entry box with icon for xamarin form (android,ios)

Question

Entry box should be rounded with an icon to the left or right in it. I'm using the code presented here to create this custom entry.

Answer 1

1. Remove the rectangular border of Entry

Used CustomRender to achieve this.

Forms

public class NoUnderlineEntry : Entry
{
    public NoUnderlineEntry()
    {
    }
}

Android Set Background to null

public class NoUnderLineEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.Background = null;
    }
}

iOS

Set BorderStyle to None

public class NoUnderlineEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.BorderStyle = UIKit.UITextBorderStyle.None;
    }
}

2. Placing Image next to Entry

Adding Image and Entry to the same Grid in two columns.

3. Adding Rounded border to the Entry and Image

Add them inside a Frame with CornerRadius.

XAML

<StackLayout>
        <Frame
            Padding="10, 5, 10, 5"
            HasShadow="False"
            BorderColor="Gray"
            CornerRadius="30">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <local:NoUnderlineEntry/>
                <Image Source="icon.png" Grid.Column="1" WidthRequest="50" Aspect="AspectFit"/>
            </Grid>
        </Frame>
    </StackLayout>

UI result:

Answer 2

Please note: I won't present a copy-and-paste-able answer, but rather an outline on how to add the images. You'll have to integrate the code in your solution by yourself.

On iOS

There already is an answered question on how to achieve this with Swift on iOS, you can find it here.

Basically what to do is to set the right view (or left view respectively) on the UITextField from your custom renderer (in OnElementChanged).

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

    var imageView = new UIImageView(new CGRect(0, 0, 20, 20));
    var image = UIImage.FromFile("ic_location.png");
    imageView.Image = image;
    this.Control.RightView = imageView;
    this.Control.RightViewMode = UITextFieldViewMode.Always;
}

This sets the view in the right of the UITextField to a UIImageView. If you wanted to show the icon before the text instead, you'd have to set LeftView and LeftViewMode instead. This is how it looks like. (I intentionally did not inline the image, because it rendered the answer less redable.)

Of course the file ic_location.png has to be in your platform projects resources.

You may need some fine tuning, but basically that's it.

On Android

The TextView.setCompoundDrawablesWithIntrinsicBounds

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. Use null if you do not want a Drawable there. The Drawables' bounds will be set to their intrinsic bounds. (source)

By loading the icon from the resource and setting it with SetCompoundDrawablesWithIntrinsicBounds (uppercase now, since we're now on C#) you can display the Entry with the icon:

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

    this.Control.SetCompoundDrawablesWithIntrinsicBounds(null, null, this.GetIcon(), null);
    this.Control.CompoundDrawablePadding = 25;
}

private Drawable GetIcon()
{
    int resID = Resources.GetIdentifier("ic_location", "drawable", this.Context.PackageName);
    var drawable = ContextCompat.GetDrawable(this.Context, resID);
    var bitmap = ((BitmapDrawable)drawable).Bitmap;

    return new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, 20, 20, true));
}

This is how the Android version looks like.

For showing the icon on left left, pass the drawable to the first parameter instead of the third.