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 change the cursor color in Xamarin.Forms text input layout

Platform: Xamarin.Forms |
Control: SfTextInputLayout |
Published Date: June 9, 2020 |
Last Revised Date: June 10, 2020

This article explains how to customize the cursor color in Xamarin.Forms TextInputLayout based on different platforms as shown in the following steps:

 

Step 1: Create a custom entry control, since we do not have a direct support to achieve this requirement.

 

[C#]

public class CustomEntry: Entry
{
 
}

 

Step 2: Add the custom entry control as InputView in the TextInputLayout.

 

[XAML]

<StackLayout Margin="10,30,10,0">
        <inputLayout:SfTextInputLayout ContainerType="Outlined" OutlineCornerRadius="8" Hint="Name">
            <local:CustomEntry />
        </inputLayout:SfTextInputLayout>
 </StackLayout>

 

Step 3: Create a custom renderer and set the desired color using the platform specific property.

 

iOS: CustomEntryRendereriOS.cs

 

You can change the cursor color using the TintColor property.

 

[C#]

public class CustomEntryRendereriOS : EntryRenderer
{
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
 
            if (Control != null)
            {
                Control.TintColor = UIColor.Green;
            }
        }
}

 

Android: CustomEntryRendererAndroid.cs [C#]

 

Create a xml in Resources.Drawable folder as shown in the following image.

Cursor style update in Android

 

Then, define a shape in it.

 

my_cursor.xml

 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <solid android:color="@color/cursorcolor"></solid>
  <size android:width="2dp" />
</shape>

 

The color for the cursor is defined in values.colors.xml.

 

values.colors.xml

<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="cursorcolor">#008000 </color>
</resources>

 

Then, create a custom renderer in Android and add the following code to change the cursor color.

 

public class CustomEntryRendererAndroid : EntryRenderer
{
        public CustomEntryRendererAndroid(Context context) : base(context)
        {
        }
 
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
 
            IntPtr IntPtrtextViewClass = JNIEnv.FindClass(typeof(TextView));
            IntPtr mCursorDrawableResProperty = JNIEnv.GetFieldID(IntPtrtextViewClass, "mCursorDrawableRes", "I");
 
            // my_cursor is the xml file name which we defined above
            JNIEnv.SetField(Control.Handle, mCursorDrawableResProperty, Resource.Drawable.my_cursor);
        }
}

Output

Cursor_Android

Cursor_iOS

Android

iOS

                           

Download the complete sample here.

 

Note:

This customization is available only in Android and iOS.

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

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