How to change the cursor color in Xamarin.Forms TextInputLayout?

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

Download the complete sample here.

Note:

This customization is available only in Android and iOS.

Conclusion

I hope you enjoyed learning how to change the cursor color in Xamarin.Forms TextInputLayout.

You can refer to our Xamarin .Forms TextInputLayout feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to change the cursor color in Xamarin.Forms TextInputLayout?

Output

Access denied