1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to place an Icon and label inside a Xamarin.Forms Entry

How to place an Icon and label inside a Xamarin.Forms Entry

I need to place an icon and a label inside a text box to meet a layout requirement. Reading the documentation, I found that it is possible to place the label inside and an Icon on the outside...

Tried to go further through the chapters for more advanced scenarios, but I'm only able to see the "Overview" and "Getting Started". Whenever I click on a subsequent chapter under SfTextInputLayout, an "Access is Denied" message pops out (tried different machines and browsers... Same behavior).

Is it possible to place the icon inside the text box along with its label? Can you provide some sample code since the access to the documentation is limited (Access Denied)?

11 Replies
MP Michael Prabhu M Syncfusion Team October 2, 2018 07:39 AM UTC

Hi Rafael, 
 
Greetings from Syncfusion, there is a technical glitch in the documentation and it will be rectified on or before 5th October 2018, we appreciate your patience until then. Regarding your requirement to add custom icon to the label can be achieved by following ways. 
 
Any custom icons can be added to the leading edge or the trailing edge of input view in the text input layout control. The events and commands related to the custom icons should be handled at the application level. 
 
Unicode or font icons for the labels can be displayed as icons. 
 
Refer to the following links to learn more about font icons: 
 
Code Snippet Xaml 
 
<Sync:SfTextInputLayout Grid.Row="0" Hint="Birthday" LeadingViewPosition="Inside"> 
 
             
            <Sync:SfTextInputLayout.LeadingView> 
                <Label Text="&#x1F5D3;"></Label> 
            </Sync:SfTextInputLayout.LeadingView> 
            <Entry /> 
        </Sync:SfTextInputLayout> 
 
        <Sync:SfTextInputLayout Grid.Row="1" Hint="Birthday" TrailingViewPosition="Outside"> 
 
            <Entry /> 
            <Sync:SfTextInputLayout.TrailingView> 
                <Label Text="&#x1F5D3;"></Label> 
            </Sync:SfTextInputLayout.TrailingView> 
        </Sync:SfTextInputLayout> 
        <Sync:SfTextInputLayout Grid.Row="2" Hint="Coffee" TrailingViewPosition="Inside"> 
 
            <Entry /> 
            <Sync:SfTextInputLayout.TrailingView> 
                <Image x:Name="myImage"></Image> 
            </Sync:SfTextInputLayout.TrailingView> 
        </Sync:SfTextInputLayout> 
 
 
We have prepared a simple sample and it can be downloaded from the link below 
 
Sample: 140157 
 
Hope this helps. 
 
Thanks, 
Michael 


LT Le Tho October 10, 2018 06:34 AM UTC

Dear Michael, 
Currently, i want to set a text for the TrailingView, but the text always cut off some character because of the trailingview width is very small.
My question is that: are there any ways for me to set the TrailingView width instead of the small width default?

Best regards


VM Vijayakumar Mariappan Syncfusion Team October 10, 2018 01:05 PM UTC

Hi Le Tho, 

We have restricted the size of leading and trailing view to 24 pixels and overall margin is 12 as per the specification of material design. This is the reason why your texts are not rendering completely. However, you can increase the width and height of the trailing view by setting the WidthRequest and HeightRequest. Please refer the following code snippet to set the HeightRequest and WidthRequest properties to trailing view. 

InputLayout.TrailingView = new Label { Text = "InputLayout" }; 
InputLayout.TrailingView.HeightRequest = 48; 
InputLayout.TrailingView.WidthRequest = 48; 

Note: Height and width should not be more than 48. Incase still label text get cuts off, you must reduce the font size of your label. 
 
Regards, 
Vijay 


LT Le Tho October 11, 2018 03:12 AM UTC

Thanks for your support,

It is really helpful for me.

MP Michael Prabhu M Syncfusion Team October 11, 2018 04:02 AM UTC

Hi Le Tho,  
Glad! we could help. Feel free to contact us anytime if you need any other assistance from us. We are happy to help you.   
Thanks,  
Michael  


LT Le Tho October 12, 2018 08:04 AM UTC

Dear support team, 

Currently, for the label and the text. I saw that there were a padding left may be 5 unit or more. 
If i want to remove that padding or control the padding size. How can i do that. Are there any config for that. 

Best regards

MP Michael Prabhu M Syncfusion Team October 12, 2018 12:48 PM UTC

Hi Le Tho, 
 
We are finding it difficult to understand your query can you please provide a screenshot representing the padding for the label and text? This will help us to provide you a better solution at the earliest. 
 
Thanks, 
Michael 


ED Eduardo April 23, 2020 03:32 AM UTC

Hi, in your code you have:

<Label Text="&#x1F5D3;">

Can you tell me where is the list of icons?, i need to select another icon.
Thanks!

AS Anandraj Selvam Syncfusion Team April 24, 2020 08:34 AM UTC

Hi Eduardo,  
  
We would like to let you know that we have Syncfusion Metro Studio to create unique icons. To know more about creating icons and how to set font family in labels, please go through the below links:  
   
   
   
   
Regards,  
Anand Raj S. 


HS Harsh Shah September 18, 2020 05:08 AM UTC

Hi, you can do this using custom control take one frame and bind image and label. Refer this article may it will help you.
https://xamgirl.com/image-entry-in-xamarin-forms/

RS Ramya Soundar Rajan Syncfusion Team September 21, 2020 12:32 PM UTC

Hi Harsh Shah, 
 
Thanks for your update.  
 
We would suggest that provided solution involves renderer usage. Similar requirement has achieved directly by using SfTextInputLayout. It provides the customization about its border and position for provided icon, not only the Entry but also other specified custom view also supported here. 
 
For more reference 
Regards, 
Ramya S 


Loader.
Up arrow icon