Articles in this section
Category / Section

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

Cursor_Android

Cursor_iOS

Android

iOS

                           

Download the complete sample here.

 

Note:

This customization is available only in Android and iOS.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment