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

SfTextInputLayout different Hint and Outline colour/thickness

Thread ID:





148404 Oct 17,2019 08:29 PM UTC Dec 15,2020 11:48 AM UTC Xamarin.Forms 5
Tags: SfTextInputLayout
Asked On October 17, 2019 08:29 PM UTC


I have a couple questions about the SfTextInputlayout with ContainerType Outline.  
  1. Is there a way to have separate colours for the Hint and Outline?  
  2. Can the Hint size and Outline thickness be configured?


Lakshmi Radha Krishnan [Syncfusion]
Replied On October 18, 2019 06:19 AM UTC

Hi Geoff,


Greetings from Syncfusion.


Query 1: Is there a way to have separate colours for the Hint and Outline?  


Yes, you can provide different color for the Hint and Outline in the SfTextInputLayout using the unique color key specified in the SyncfusionThemeDictionary. Please refer the below code snippet.


Reference Link: https://help.syncfusion.com/xamarin/themes/keys#sftextinputlayout


Code Snippet:








                <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String>

                <Color x:Key="SyncPrimaryLightColor">Green</Color>

                <Color x:Key="SyncPrimaryColor">Red</Color>

                <Color x:Key="SfTextInputLayoutHintColor">Blue</Color>

                <Color x:Key="SfTextInputLayoutLineColor">Aqua</Color>







Query 2: Can the Hint size and Outline thickness be configured?


You can change the hint size using the FontSize property in the HintLabelStyle property and the outline thickness can be changed using the FocusedStrokeWidth and UnfocusedStrokeWidth property. Please check the reference link.






Code Snippet:




<inputLayout:SfTextInputLayout Hint="Hint" ContainerType="Outlined" FocusedStrokeWidth="4" UnfocusedStrokeWidth="4">


                <inputLayout:LabelStyle FontSize="15"/>


            <Entry />




We have attached the sample, please download it from the following location.


Sample: https://www.syncfusion.com/downloads/support/forum/148404/ze/TextInputLayoutSample1790275936


Please let us know if you need further assistance on this.



Lakshmi R. 

Replied On February 6, 2020 10:58 AM UTC

Along the same lines, is it possible to change the background of the hint? It looks pretty weird when i have a white background for the main control. I still want the main hint (ideally centered but that doesn't seem possible), but when the control is focused and the hint raises to the top, i'd like more control either over colour or preventing it from raising up.

Divya Venkatesan [Syncfusion]
Replied On February 7, 2020 05:41 AM UTC

Hi Mark, 
Greetings from Syncfusion. 
Query 1: is it possible to change the background of the hint? 
Applying background color to hint label cannot be done as per our current design. Because the position of the floated hint has been divided into two-half, one half is placed inside the control and the remaining half is placed outside the control. Hence, it will not look good if we apply a background color to it. 
Query 2: preventing hint from raising up. 
You can hide the hint on focus instead of raising up by setting EnableFloating property of SfTextInputLayout as false
Code snippet [Xaml]: 
<inputLayout:SfTextInputLayout EnableFloating="False" Hint="Name"> 
    <Entry /> 
Please let us know if you need any further assistance. 
Divya Venkatesan 

Laurence Cortana
Replied On December 14, 2020 11:46 AM UTC


I am also interested in a solution for outlined entries. I would really like to have the ability to set the hint's background color (while focused) to half blue - half white, considering Mark's example. Is there a way this could be achieved? Thanks in advance. 

Ramya Soundar Rajan [Syncfusion]
Replied On December 15, 2020 11:48 AM UTC

Hi Laurence Cortana,

We have checked your reported query. We would like to inform you that from our current implementation, we can’t give the two colors for the hint background color for the SfTextInputLayout. 
Ramya S 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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
Live Chat Icon