How to change the cursor color in Xamarin.Forms text input layout

1 min read

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


Android	iOS