How to place an icon before entry in Xamarin Forms

Question

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

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 '18 at 08: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 '18 at 12:08
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 '18 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 '18 at 02:00

score 3 · Answer 1 · answered May 02 '18 at 18:06

3

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

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

answered May 02 '18 at 18:06

Alan Jones Rios

146
6

MShah · Answer 2 · 2018-06-29T06:36:54.530

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>

Thanks. Your code gave me idea of how can I implement this and was helpful for me to get an idea — Krishna Shinde, May 02 '18 at 22:56

score 0 · Answer 3 · edited Mar 29 '22 at 20:53

You can use like this,

<Grid>
    <Grid.ColumDefinition>
        <ColumnDefinition width="40" />
        <ColumnDefinition width="*" />
    </Grid.ColumnDefinitions>
    <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 02 '18 at 22:55

score 0 · Answer 4 · answered Apr 27 '18 at 13:23

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 02 '18 at 22:54

score 0 · Answer 5 · answered May 03 '18 at 05:20

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);
            }
        }
    }
}

How to place an icon before entry in Xamarin Forms

5 Answers5