How to place an icon before entry in Xamarin Forms

I am working to create a login screen in Xamarin Forms and want to achieve something like this.

Desired UI

I have tried this using a Frame in XAML (see below)

<Frame CornerRadius="4" HasShadow="false" OutlineColor="White" BackgroundColor="{StaticResource MocoBlue}" HeightRequest="50">
<StackLayout Orientation="Horizontal">
<Image x:Name="emailImage" Source="nav_user" HorizontalOptions="Start"/>
<suave:MaterialEntry Placeholder="Your email address" WidthRequest="50" Text="{Binding UserName}" HorizontalOptions="FillAndExpand" />
</StackLayout>
</Frame>


The above code gives me this: (See Below)

Result.iOS

Result.Android

This only works on iOS not on Android
I have also tried custom renderers but could not achieve the desired UI.

Any help would be appreciated.

Thanks

What exactly doesn't work on Android? How is the result on Android?
– Dennis Schröer
Apr 27 at 8:19

Hello @DennisSchröer. As you can see my "Result" image (iOS result), it has got a border around it. But in Android, there is no border around the entry and image.
– Krishna Shinde
Apr 27 at 12:08

Can you show a screenshot of Android result?
– Dennis Schröer
Apr 27 at 13:11

Make Entry borderless and it looks like exactly what you want. I f you need code for make borderless entry then see my answer below.
– Srusti Thakkar
Apr 27 at 13:20

Hey @DennisSchröer, I have included the Android output in my question now. Please have a look. Suggestions on how to achieve this would be appreciated. Thanks
– Krishna Shinde
Apr 28 at 2:00

5 Answers
5

You can use like this,

<Grid>
<Grid.ColumDefinition>
<ColumnDefinition width="40" />
<ColumnDefinition width="*" />
</Grid.RowDefinitions>
<AbsoluteLayout


VerticalOptions="Center">

<Image
HeightRequest="20"
HorizontalOptions="EndAndExpand"
Source="{Binding PasswordIcon}"
WidthRequest="20" />
</AbsoluteLayout>
<Entry Grid.Column=1
Grid.ColumnSpan=1
x:Name="entryPassword"
HeightRequest="50"
HorizontalOptions="FillAndExpand"
Text="{Binding Password}"
Placeholder="Password">
</Entry>


</Grid>


Thanks for posting the code, I grabbed few bits from your code.
– Krishna Shinde
May 2 at 22:55

For Android create customEntryRenderer using below code for making entry borderless.

[assembly: ExportRenderer(typeof(Entry), typeof(CustomEntryRender))]
namespace Graysons.Droid.Renderers
{
public class CustomEntryRender : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
Control?.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}


For IOS:

[assembly: ExportRenderer(typeof(Entry),typeof(CustomEntryRender))]
namespace Graysons.iOS.Renderers
{
public class CustomEntryRender : EntryRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);

Control.Layer.BorderWidth = 0;
Control.BorderStyle = UITextBorderStyle.None;
}
}
}


Thanks. I have created a custom frame renderer and it worked great for me.
– Krishna Shinde
May 2 at 22:54

OR,... you can follow this very simple tutorial from XamlGirl:

https://xamgirl.com/image-entry-in-xamarin-forms/

Unfortunately the Outline color property of the Frame does not work on Android.
But you can just add a custom renderer in your Android project to make it work.

Here is the code:

[assembly: ExportRenderer(typeof(Frame), typeof(OutlinedFrameRenderer))]
namespace haveThat.Droid.CustomDroid
{
public class OutlinedFrameRenderer : FrameRenderer
{
public OutlinedFrameRenderer(Context context) : base(context)
{
}

protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
}
public override void Draw(Canvas canvas)
{
base.Draw(canvas);

using (var paint = new Paint { AntiAlias = true })
using (var path = new Path())
using (Path.Direction direction = Path.Direction.Cw)
using (Paint.Style style = Paint.Style.Stroke)
using (var rect = new RectF(0, 0, canvas.Width, canvas.Height))
{
float px = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10
float py = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10
path.AddRoundRect(rect, px, py, direction);

//Set the Width of the Border here
paint.StrokeWidth = 1f;
paint.SetStyle(style);

//Take OutLineColor from XAML Frame element and set it natively here.
//string FrameBorderColorHex = String.Format("#{0:X2}{1:X2}{2:X2}", (int)(Element.OutlineColor.R * 255), (int)(Element.OutlineColor.G * 255), (int)(Element.OutlineColor.B * 255));

string FrameBorderColorHex = String.Format("#{3:X2}{0:X2}{1:X2}{2:X2}", (int)(Element.OutlineColor.R * 255), (int)(Element.OutlineColor.G * 255), (int)(Element.OutlineColor.B * 255), (int)(Element.OutlineColor.A * 255));
try
{
paint.Color = Android.Graphics.Color.ParseColor(FrameBorderColorHex);
}
catch
{
paint.Color = Android.Graphics.Color.White;
}
canvas.DrawPath(path, paint);
}
}
}
}


You can create Entry custom renderer to display rounded corner entry(as shown in your image) and place image like this :

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<custom:CustomEntry
x:Name="entryPassword"
HeightRequest="50"
HorizontalOptions="Fill"
ReturnKeyType="Done"
Text="{Binding Password}"
Placeholder="Password">
</custom:CustomEntry>

<AbsoluteLayout
Margin="0,5,20,0"
HorizontalOptions="End"
VerticalOptions="Center">

<Image
HeightRequest="20"
HorizontalOptions="EndAndExpand"
Source="{Binding PasswordIcon}"
WidthRequest="20" />
</AbsoluteLayout>
</Grid>


For placing image before entry didn't required customentry
– Adit Kothari
Apr 27 at 10:07

Thanks. Your code gave me idea of how can I implement this and was helpful for me to get an idea
– Krishna Shinde
May 2 at 22:56

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.