How to change the cursor color in Xamarin.Forms text input layout
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.
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.
This customization is available only in Android and iOS.