Customizing Entry borders

Hello guys ! I am making an app using Xamarin.Forms and I am trying to make an entry with invisible borders. I set the background color of the entry to be the same as the background color of the parentView but the borders are still visible. Is it possible to make them invisible ? Thanks in advance ! :)

Posts

  • TorbenKruseTorbenKruse DEMember ✭✭✭

    You can use this: https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ExtendedEntry

    Or write your own custom renderer. In iOS you would do something like this:

    Control.BorderStyle = UITextBorderStyle.None;

  • Stefan_StefanovStefan_Stefanov NLMember ✭✭

    I have made already custom renderers for EntryCells and SwitchCells but I don't know what method I should override in my custom renderer for the Entry .. Can you tell me how the renderer should look like?

    P.S. I can't see the source codes form the link you posted ..

  • TorbenKruseTorbenKruse DEMember ✭✭✭
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Entry> e)
            {
                base.OnElementChanged(e);
    
                if (this.Control == null) return;
    
                this.Control.BorderStyle = UITextBorderStyle.None;
            }
    
  • Stefan_StefanovStefan_Stefanov NLMember ✭✭
    edited February 2015

    Thanks @TorbenKruse ! This worked ! Do you, by any chance, know how to change the color and the radius of the border also ? :)

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    There seems to be no way of turning of the border in Android though if your doing multi platform.

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @TorbenKruse

    Thanks, much appreciated. I'll try that out.

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @TikiMotel

    Thanks for the code sample, coming from a C#/WPF background I've found so many code nugets on the forums (documentation is sparse).

  • Stefan_StefanovStefan_Stefanov NLMember ✭✭

    @TorbenKruse - I tried your code and now I am able to change the radius but I still can't change the color .. I tried with different colors and it seems like this.Control.Layer.BorderColor = Color.Red.ToCGColor(); is not doing anything .. :(

  • Stefan_StefanovStefan_Stefanov NLMember ✭✭

    @TorbenKruse It worked ! I just needed to change the BorderWidth ! Thanks man ! :)

  • DemiVisionDemiVision USMember ✭✭

    @TorbenKruse thanks for pointing out the color utility methods, I had never come across those before. I love finding those hidden little gems! :smile:

  • hi,
    I am using Editor in my application. Does anyone know how to set border for the Editor control in xamarin forms ?

  • tanygaertanygaer GBMember

    @TorbenKruse very useful, thank you

  • AndroidVickyAndroidVicky USMember

    After adding images in the local root folder(Resource) in the Visual Studio, there is no image in the file(Resource) in Visual Studio in Project and it hangs up. Can anyone give me any ideas on how to add the images in the resource folder or the reason why am i getting this issue problem.

  • ONGWEIKEINONGWEIKEIN MYMember ✭✭

    Hi, working on custom render.
    Any idea on how to show current control (Entry) are focused ?

    Before custom render, if control focused. It will have a highlighted line below.
    Any idea how to enable it back ?

  • ThibaultDThibaultD SEMember ✭✭✭

    Very handy indeed, thanks @TikiMotel.

    You can even use it to customize text-alignment:

        textField.TextAlignment = UITextAlignment.Right
    
  • BernardJMartinBernardJMartin USMember
    edited November 2015

    I have been months trying to deal with fonts. Near to quit and comeback to objetive c and java.

  • BalakrishnanSBalakrishnanS USMember ✭✭

    hi,
    I am using Editor in my application. Does anyone know how to set border for the Editor control in xamarin forms ?

  • BhaurajBiradarBhaurajBiradar USUniversity ✭✭

    Nothing is working for Android, There seems to be no way of turning of the border in Android though if your doing multi platform.

    I received error after using all above solution for android

    this.Control.Background = this.Resources.GetDrawable(Resource.Drawable.noBorderEditText);
    for above code error is : noBorderEditText

    this.Control.Layer.CornerRadius = 3f;
    this.Control.Layer.BorderColor = Color.Red.ToAndroid();
    for above code error is : No Layer found

    Please can anybody advise for android

  • NMackayNMackay GBInsider, University ✭✭✭✭✭
  • BhaurajBiradarBhaurajBiradar USUniversity ✭✭

    @NMackay - Thank you, This worked for me :)

  • parth7676parth7676 USMember ✭✭

    image

    @TorbenKruse @NMackay How can i write a custom renderer to change the entry bottom border to white color in Xamarin Form Android

  • MittchelvanVlietMittchelvanVliet USUniversity ✭✭

    @parth7676 You don't need a renderer for this:

    <EditText android:background="@android:color/transparent"/>

  • parth7676parth7676 USMember ✭✭

    @MittchelvanVliet I think you misunderstand what i have asked for. I have to change the Placeholder Black border to white.

  • MichaelKayMichaelKay GBMember
    edited August 2016

    @parth7676 not sure if you still need this, but i needed to achieve the same thing and it was difficult to find a concise explanation. This is how i achieved the same thing:

    1) In your droid project, create an xml file under Resources - drawable. I called mine EntryBorderBottom.xml
    2) Paste the following xml code:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:bottom="1dp" android:left="-3dp" android:right="-3dp" android:top="-3dp"> <shape android:shape="rectangle"> <stroke android:width="2dp" android:color="#99a3a4" /> <solid android:color="#00ffffff" /> </shape> </item> </layer-list>

    Under the stroke element, i set the width to "2dp" because your bottom border looks thick. If you want you can set this to "1dp" like the default. Or if you want to change the colour of the bottom stroke just change: android:color="#99a3a4"

    3) Create a new class (in your portable project). I called mine CustomEntry.cs. and then inherit from the control entry as shown below:

    public class CustomEntry : Entry { }

    4) Now create your custom renderer class (of course in your droid project). Called mine CustomEntryRenderer.cs. And the code for that is below:

    public class CustomEntryRenderer : EntryRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) { base.OnElementChanged(e); if (Control != null) { Control.Background = Resources.GetDrawable(Resource.Drawable.EntryBorderBottom); Control.SetTextColor (global::Android.Graphics.Color.Black); } } }

    Remember to add the dependency call on top of the namespace, and adding namespaces where applicable:

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

    PS: Resource.Drawable.EntryBorderBottom in visual studio will start complaining initially but once you build your project, it will pick up the xml you added in step one.

    5) To call this in your page, i did mine with something like this:

    `public class LoginPage : ContentPage
    {
    CustomEntry username, password;

    public LoginPage()
    {
    username = new CustomEntry { Placeholder = "Username", PlaceholderColor = Color.Gray, Keyboard = Keyboard.Text, Margin = new Thickness(10, 10, 10, 0) };
    password = new CustomEntry { Placeholder = "Password", PlaceholderColor = Color.Gray, IsPassword = true, Keyboard = Keyboard.Text, Margin = new Thickness(10, 10, 10, 0) };

    Content = new StackLayout
    {
    Padding = new Thickness(10, 40, 10, 10),
    Children = {
    username,
    password
    }
    }

    }
    }`

    Hope this helps you or anyone else who may need it.

    Thanks to this link where i got my Android snippet code from:
    https://quora.com/How-do-I-design-edit-text-view-with-bottom-border-alone-in-Android-and-edit-text-view-with-some-special-symbol-like-below-image

  • anveanve DEMember ✭✭

    @MichaelKay:

    Resources.GetDrawable is deprecated. Use ResourcesCompat.GetDrawable instead.

    • Why are you using layer-list?
    • For what is the solid for?
    • Are there other options than setting the Background?
  • MabroukMabrouk USMember ✭✭✭
    edited September 2016

    @Stefan_Stefanov , that works well :
    <Frame Padding="10, 10, 10, 10" OutlineColor="Transparant" BackgroundColor="Transparant" HorizontalOptions="FillAndExpand"> <Entry x:Name="YOUR_ENTY_NAME" Placeholder="Recherche..." /> </Frame>

  • MichaelKayMichaelKay GBMember

    @anve thanks for updated info on ResourcesCompat.GetDrawable.

    I cannot claim i am an Android expert. The layer-list is an xml attributes that define the drawable to achieve this specific needs. There may well be alternative options, not sure.

    solid is used for setting the border colour

    In regards to other options, absolutely. This is the main reason for implementing platform specific, going beyond what Xamarin Forms Entry control can offer. In this case you get the whole platform specific options for the EntryRenderer, exposing properties for Android EditText, iOS UITextField, and Windows PhoneTextBox.

  • MichaelShelestovMichaelShelestov USMember ✭✭
    edited October 2016

    PCL XAML code, Entry with border (just use outer StackLayout for border):

      <StackLayout Padding="1,1,1,1" BackgroundColor="{StaticResource entry_border}">
        <Entry x:Name="txtUsername" Placeholder="Username" Style="{StaticResource MyEntry}"></Entry>
      </StackLayout>
    

    Styles:

      <Color x:Key="entry_background">#FAFAFA</Color>
      <Color x:Key="entry_border">#C8C8CD</Color>
      <Color x:Key="entry_placeholder_text">#808080</Color>
    
      <Style x:Key="MyEntry" TargetType="Entry">
        <Setter Property="BackgroundColor" Value="{StaticResource entry_background}" />
        <Setter Property="PlaceholderColor" Value="{StaticResource entry_placeholder_text}" />
        <Setter Property="TextColor" Value="Black" />
      </Style>
    

    image

    PS.. It seems custom renderer required for Android...

  • HarrishHarrish INMember

    TorbenKruse . Its working awesome

  • DanielGPDanielGP COMember ✭✭

    @TorbenKruse said:
    You can use this: https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ExtendedEntry

    Or write your own custom renderer. In iOS you would do something like this:

    Control.BorderStyle = UITextBorderStyle.None;

    Thank you!

  • DavidClarkeDavidClarke NZBeta, University ✭✭

    In case someone else finds their way here, an excellent approach to this is documented in a different post:

    @NickMathews said:
    I ran into this trying to remove the border from entries and pickers and ended up using an Effect by following this page.

    The iOS code for the Effect:

    using System;
    using MyProject.iOS.Effects;
    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    
    [assembly:ResolutionGroupName ("MyProject")]
    [assembly:ExportEffect (typeof(BorderlessEntryEffect), "BorderlessEntryEffect")]
    namespace MyProject.iOS.Effects
    {
      public class BorderlessEntryEffect : PlatformEffect
      {
          protected override void OnAttached()
          {
              var entry = Control as UITextField;
              if (entry != null)
              {
                  entry.BorderStyle = UITextBorderStyle.None;
              }
          }
    
          protected override void OnDetached()
          {
    
          }
      }
    }
    

    I had to make a RoutingEffect in my PCL, which looked like this:

    using System;
    using Xamarin.Forms;
    
    namespace MyProject.UI.Effects
    {
      public class BorderlessEntryEffect : RoutingEffect
      {
          public BorderlessEntryEffect() : base("MyProject.BorderlessEntryEffect")
          {
          }
      }
    }
    
    

    To use this effect in XAML, I declared the namespace like so:

    xmlns:effects="clr-namespace:MyProject.UI.Effects"
    

    and just attached it to the Entry I wanted to make borderless:

    <Entry Text="Test">
      <Entry.Effects>
          <effects:BorderlessEntryEffect />
      </Entry.Effects>
    </Entry>
    
Sign In or Register to comment.