We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the properties of (outline border colors, hint name, helper text, error text, and char count) of TextInputLayout in Xamarin.Forms

The Syncfusion SfTextInputLayout control in Xamarin.Forms provides support for color customization in outline Border and assistive labels.

Refer to this Getting Started documentation to create a simple TextInputLayout sample.


Color Customization for Outline Border:

Text Input Layout with border color customization.


Color customization of outline border can be achieved by setting respective color for FocusedColor (focussed state) and UnfocusedColor (unfocussed state) properties of SfTextInputLayout as shown in below code snippet.

XAML:

<StackLayout VerticalOptions="Center" HorizontalOptions="StartAndExpand">
<inputLayout:SfTextInputLayout Hint="Email" ContainerType="Outlined" HelperText="Enter your email" FocusedColor=" DarkCyan" UnfocusedColor="Gray"><Entry/>
</inputLayout:SfTextInputLayout>
</StackLayout>


Color Customization for Assistive Labels:

Text Input Layout with Assistive label customization in Default state.
Text Input Layout with Assistive label customization in focused state.

By merging the below mentioned keys in application resources, it is possible to customize the appearance of the SfTextInputLayout without merging common theme resource and control style resource dictionaries as shown in below code snippet.

Assistive Label

Keys

Hint

SyncPrimaryLightColor

Helper Text

SfTextInputLayoutHelperTextColor

Counter Text

SfTextInputLayoutCounterLabelColor

Error Text

SfTextInputLayoutErrorTextColor

 

 

XAML:

<Application.Resources>
        <syncTheme:SyncfusionThemeDictionary>
            <syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String>
                    <!--Hint Color for focused state-->
                    <Color x:Key="SyncPrimaryLightColor"> Black </Color>
                    <!--Hint Color for default state-->
                    <Color x:Key="SfTextInputLayoutHintColor">Gray</Color>
                    <!--Border Color for focused state-->
                    <Color x:Key="SyncPrimaryColor"> DarkCyan </Color>
                    <!--Border Color for default state-->
                    <Color x:Key="SfTextInputLayoutLineColor">Gray</Color>
                    <!--Helper text Color for default state-->
                    <Color x:Key="SfTextInputLayoutHelperTextColor"> BlueViolet</Color>
                    <!--Character count text Color for default state-->
                    <Color x:Key="SfTextInputLayoutCounterLabelColor"> DarkGoldenrod</Color>
                    <!--Error text Color for default state-->
                    <Color x:Key="SfTextInputLayoutErrorTextColor">Red</Color>
                </ResourceDictionary>
            </syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
        </syncTheme:SyncfusionThemeDictionary>
    </Application.Resources>

To know more information about customization using keys in theme dictionary, refer the documentation: keys 

View the sample in GitHub

See also:

How to create a rounded corner textinputlayout

How to change the cursor color in textinputlayout

How to apply linebreakmode for labels in textinputlayout

Also refer our feature tour page to know more about the features available in TextInputLayout cotrol.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Codework
Aug 18, 2020

Hi Syncfusion,

I have tried the following code but it is showing the following error, which means to add the key: "resources in ResourceDictionary require a x:Key attribte".

  1. Is it required to add the key?

  2. And how to make these style get applied to some specific fields and not all SfTextInputLayout.

 Reply
Hemalatha Marikumar [Syncfusion]
Sep 01, 2020

Is it required to add the key? Yes. It is required, based on that only color has been applied.

How to make these styles get applied to some specific fields and not all SfTextInputLayout.

It has been achieved by adding the Resource with Syncfusion theme only for the desired SfTextInputLayout as per in below code snippet

[XAML]

 
	&lt;inputLayout:SfTextInputLayout.Resources&gt;             
	  &lt;syncTheme:SyncfusionThemeDictionary&gt;                 
		&lt;syncTheme:SyncfusionThemeDictionary.MergedDictionaries&gt;                     
			&lt;ResourceDictionary&gt;                         
				&lt;x:String x:Key=&quot;SfTextInputLayoutTheme&quot;&gt;CustomTheme&lt;/x:String&gt;                         
				&lt;!--Hint Color for focused state--&gt;                         
				&lt;Color x:Key=&quot;SyncPrimaryLightColor&quot;&gt;Black&lt;/Color&gt;                         
				&lt;!--Hint Color for default state--&gt;                         
				&lt;Color x:Key=&quot;SfTextInputLayoutHintColor&quot;&gt;Gray&lt;/Color&gt;                         
				&lt;!--Border Color for focused state--&gt;                         
				&lt;Color x:Key=&quot;SyncPrimaryColor"&gt;DarkCyan&lt;/Color&gt;                         
				&lt;!--Border Color for default state--&gt;                         
				&lt;Color x:Key=&quot;SfTextInputLayoutLineColor&quot;&gt;Gray&lt;/Color&gt;                         
				&lt;!--Helper text Color for default state--&gt;                         
				&lt;Color x:Key=&quot;SfTextInputLayoutHelperTextColor&quot;&gt;BlueViolet&lt;/Color&gt;                         
				&lt;!--Character count text Color for default state--&gt;                         
				&lt;Color x:Key=&quot;SfTextInputLayoutCounterLabelColor&quot;&gt;DarkGoldenrod&lt;/Color&gt;                         
				&lt;!--Error text Color for default state--&gt;                         
				&lt;Color x:Key=&quot;SfTextInputLayoutErrorTextColor&quot;&gt;Red&lt;/Color&gt;                     
			&lt;/ResourceDictionary&gt;                 
		&lt;/syncTheme:SyncfusionThemeDictionary.MergedDictionaries&gt;             
	  &lt;/syncTheme:SyncfusionThemeDictionary&gt;         
	&lt;/inputLayout:SfTextInputLayout.Resources&gt;

Reference sample

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile