locked
How to place icon before entry control RRS feed

  • Question

  • User335274 posted

    Hi all,

    I would like design a login form like below image Image1

    This is what I've managed to do so far

    I want to place an icon before entry control. I don't know how to achieve that design. Below is the code.

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="30">
      <custom:CustomEntry Placeholder="Username" x:Name="Entry_Username" FontSize="25" HeightRequest="40"></custom:CustomEntry>
      <custom:CustomEntry Placeholder="Password" x:Name="Entry_Password" IsPassword="True" FontSize="25" HeightRequest="40"></custom:CustomEntry>
      <Button Text="LOGIN" x:Name="Btn_Login" Clicked="SignInProcedure" TextColor="White" BackgroundColor="#006400"  WidthRequest = "400" FontAttributes="Bold" FontSize="25"></Button>
      <Button Text="ADD USER" x:Name="Btn_Add" Clicked="AddUser" TextColor="White" BackgroundColor="#006400"  WidthRequest = "400" FontAttributes="Bold" FontSize="25"></Button>
    </StackLayout>
    

    1) How to change entry border color onfocus? 2) Is it possible to apply any external theme to xamarin forms

    Thanks!!!

    Friday, July 7, 2017 1:44 PM

All replies

  • User2148 posted

    for icon, use a grid with 2 columns, in column 0 add your Entry with Span 2. In column 0 add also your icon. It should works

    for border, I think you have to use Effects / custom renderers

    for Theme, this can be an help https://developer.xamarin.com/guides/xamarin-forms/user-interface/themes/

    Friday, July 7, 2017 1:47 PM
  • User335274 posted

    Thanks for your immediate reply. I have used custom renderers.

                GradientDrawable gradientDrawable = new GradientDrawable();
                gradientDrawable.SetShape(ShapeType.Rectangle);
                gradientDrawable.SetColor(Element.BackgroundColor.ToAndroid());
                gradientDrawable.SetStroke(4,Color.FromRgb(201,201,201).ToAndroid());
                gradientDrawable.SetCornerRadius(5.0f);
    
                Control.SetHeight(50);
                Control.SetBackground(gradientDrawable);
    

    //focus and unfocus e.NewElement.Focused += (sender, evt) => { GradientDrawable gd = new GradientDrawable(); gd.SetStroke(2, Color.Green.ToAndroid()); }; e.NewElement.Unfocused += (sender, evt) => { GradientDrawable gd = new GradientDrawable(); gd.SetStroke(2, Color.FromRgb(201, 201, 201).ToAndroid()); };

    One more question:

    Is there dashboard type template available for xamarin?. If yes, How to incorporate that in my app?

    Friday, July 7, 2017 1:50 PM
  • User272135 posted

    I found a library on GitHub you might want to take a look at. The renderers are in the source code so you might find it useful.

    Friday, July 7, 2017 2:21 PM
  • User335274 posted

    @AlessandroCaliaro said: for icon, use a grid with 2 columns, in column 0 add your Entry with Span 2. In column 0 add also your icon. It should works

    Hello sir,

    I have used your idea. This is what i get

    My code:

    Any idea? thanks in advance

    Tuesday, July 11, 2017 8:08 AM
  • User2148 posted

    add another column only to divide icon from placeholder

    Tuesday, July 11, 2017 8:14 AM
  • User244003 posted

    Hi @Maya17

    Below I write code as you expected to check it once

    XAML:

    Add namespace xmlns:local="clr-namespace:YOUR PROJECT NAME;assembly=YOUR PROJECT NAME"

             <Grid Grid.Row="3" Padding="0,10,0,0">
                 <local:MyFrame BackgroundColor="Transparent" OutlineColor="White" HasShadow="false" 
               Padding="20,5,5,5">
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
            <Image Source="Username.png" HeightRequest="20" WidthRequest="20" HorizontalOptions="Start" />
    
              <local:MyEntry Placeholder="UserName / PhoneNo" x:Name="EntryUserName" 
           BackgroundColor="Transparent" PlaceholderColor="White" Grid.Column="1" HorizontalOptions="FillAndExpand" 
       TextColor="White"  FontSize="15"    HeightRequest="40" />
        </Grid>
        </local:MyFrame>
      </Grid>
    

    FrameRederer:

    PCL

    MyFrame.cs

       public class MyFrame : Frame
       {
    
       }
    

    Xamarin.Android:

    In Resources-->drawable--> blue_resct.xml

          <?xml version="1.0" encoding="UTF-8"?>
          <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <stroke android:width="2.3dp" android:color="#ffffff">
      </stroke>
      <solid android:color="#00000000" />
       <corners android:topLeftRadius="15dp" android:topRightRadius="15dp" android:bottomLeftRadius="15dp" 
         android:bottomRightRadius="15dp" />
         </shape>
    

    MyFrameRenderer.cs

           [assembly: ExportRenderer (typeof(MyFrame), typeof(MyFrameRenderer))]
           namespace FrameDemo.Droid
            {
           public class MyFrameRenderer : FrameRenderer
             {
            protected override void OnElementChanged (ElementChangedEventArgs<Frame> e)
            {
            base.OnElementChanged (e);
            #pragma warning disable CS0618 
            this.SetBackgroundDrawable (Resources.GetDrawable (Resource.Drawable.blue_rect));
            #pragma warning restore CS0618 
            }
           } 
           }
    

    Xamarin.iOS:

    MyFrameRenderer.cs

          [assembly: ExportRenderer (typeof(MyFrame), typeof(MyFrameRenderer))]
    
          namespace FrameDemo.iOS
           {
        public class MyFrameRenderer : FrameRenderer
          {
           protected override void OnElementChanged (ElementChangedEventArgs<Frame> e)
             {
            base.OnElementChanged (e);
            this.Layer.CornerRadius = 18;
            this.Layer.Bounds.Inset (1, 1);
            Layer.BorderColor = UIColor.White.CGColor;
            Layer.BorderWidth = 2;
            Layer.BackgroundColor = Color.Transparent.ToCGColor ();
          }
          }
         }
    

    EntryRenderer:

    PCL:

    MyEntry.cs

       public class MyEntry : Entry
          {
    
          }
    

    Xamarin.Android:

    MyEntryRenderer.cs

          [assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
          namespace FrameDemo.Android
          {
         public class MyEntryRenderer : EntryRenderer
            {
           protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
              {
            base.OnElementChanged (e);
    
            if (Control != null) {
                GradientDrawable gd = new GradientDrawable ();
                gd.SetColor (global::Android.Graphics.Color.Transparent);
                this.Control.SetBackgroundDrawable (gd);
                this.Control.SetRawInputType (InputTypes.TextFlagNoSuggestions);
                Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
             }
           }
          }
           }
    

    Xamarin.iOS:

    MyEntryRenderer.cs

         [assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
         namespace FrameDemo.iOS
          {
     public class MyEntryRenderer : EntryRenderer
        {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
    
            if (Control != null)
            {
    
                Control.BorderStyle = UITextBorderStyle.None;
                Control.Layer.CornerRadius = 10;
                Control.TextColor = UIColor.White;
    
            }
            }
         }
       }
    

    Output:

    If you don't want CornerRadius please remove CornerRadius in FrameRenderer in both platforms

    Tuesday, July 11, 2017 8:59 AM
  • User151333 posted

    Try this PCL:

    public class CustomEntry:Entry { }

    Android:

    [assembly: ExportRenderer(typeof( CustomEntry), typeof(CustomEntryRenderer))]
    
        namespace ABC.Droid
        {
           public class  CustomEntryRenderer : EntryRenderer
            {
               protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
               {
                   base.OnElementChanged(e);
                   if (Control != null)
                   {
                       Control.SetBackgroundResource(Resource.Drawable.TextBox);//Resource file from drawable
                       if (e.NewElement.ClassId == "1")
                       {
                           Control.SetCompoundDrawablesRelativeWithIntrinsicBounds(Resource.Drawable.Notes, 0, 0, 0);
                 //Resource file from drawable for left side.
                       }
                   }
               }
            }
        }
    

    iOS:

    [assembly: ExportRenderer(typeof( CustomEntry), typeof(CustomEntryRenderer))]

    namespace ABC.iOS
    {
       public class  CustomEntryRenderer : EntryRenderer
        {
           protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
           {
               base.OnElementChanged(e);
               if (Control != null)
                {
                     if (e.NewElement.ClassId == "1")
                    {
                        Control.LeftView.BackgroundColor = UIColor.FromPatternImage(UIImage.FromFile("notes.png"));
    
                    }
                }
           }
        }
    }
    
    Tuesday, July 11, 2017 9:29 AM
  • User335274 posted

    Thanks all for your immediate reply.

    Tuesday, July 11, 2017 10:15 AM
  • User42522 posted

    @Maya17 said:

    @AlessandroCaliaro said: for icon, use a grid with 2 columns, in column 0 add your Entry with Span 2. In column 0 add also your icon. It should works

    Hello sir,

    I have used your idea. This is what i get

    My code:

    Any idea? thanks in advance

    Just remove Grid.ColumnSpan for the Entry views in your XAML. ColumnSpan is like Merge Columns in Excel. That's why your image and the Entry view are overlapping.

    Tuesday, July 11, 2017 12:39 PM
  • User343916 posted

    HI @BalaRaju Can you Share the Xaml Code for IOS

    Monday, September 4, 2017 10:09 AM
  • User385178 posted

    My solution

                <Grid>
                <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
    
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10*"/>
                <ColumnDefinition Width="90*"/>
                </Grid.ColumnDefinitions>
                <Image Source="icon" Grid.Row="0" Grid.Column="0"/>
                <Entry Placeholder="Hi" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" VerticalOptions="Center"/>
    
                </Grid>
    

    htt p s://us.v-cdn .net/5019960/uploads/editor/4k/wse8k6tj0iil.jpg (Xamarin Forums still don't let me post urls, so, trim() this line to see the example).

    Monday, July 22, 2019 8:15 PM
  • User392923 posted

    Kindly try the solution below

            </StackLayout>
    
    
        </Frame> 
    
    Tuesday, March 2, 2021 8:12 AM