Search code examples
androidmaterial-designandroid-themeandroid-stylesmaterial3

Android TextInputLayout and TextInputEditText cursor color


I want to change the cursor (or caret) color, just like in this stack overflow question, but in Material 3.

This is my verion of the material library:

implementation 'com.google.android.material:material:1.8.0'

This is how my layout looks like:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/brands_input_layout"
    style="@style/Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu.Honk"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/size_medium"
    android:paddingEnd="44dp"
    android:theme="@style/Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu.Honk"
    app:layout_constraintEnd_toStartOf="@id/hide_show_brands_icon"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="RtlSymmetry">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/description_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:imeOptions="actionDone"
        android:inputType="textCapSentences" />

</com.google.android.material.textfield.TextInputLayout>

And this is my theme file:

<style name="Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu.Honk">
    <item name="boxStrokeColor">@color/textDropdownBoxStrokeColor</item>
    <item name="hintTextColor">@color/textDropdownBoxStrokeColor</item>
    <item name="colorControlActivated">@color/textDropdownBoxStrokeColor</item>
    <item name="endIconTint">@color/dropdown_menu_arrow</item>
</style>

Solution 1 (did not work):

<style name="ThemeOverlay.SmartHabit.TextInputEditText.FilledBox.Dense" parent="ThemeOverlay.Material3.TextInputEditText.FilledBox.Dense">
    <item name="colorControlActivated">@color/colorSecondary</item>
</style>
<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/description_input"
    style="@style/ThemeOverlay.SmartHabit.TextInputEditText.FilledBox.Dense"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:imeOptions="actionDone"
    android:inputType="textCapSentences" />

Solution 2 (did not work):

<style name="ThemeOverlay.SmartHabit.TextInputEditText.FilledBox.Dense" parent="ThemeOverlay.Material3.TextInputEditText.FilledBox.Dense">
    <item name="colorPrimary">@color/colorSecondary</item>
</style>
<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/description_input"
    style="@style/ThemeOverlay.SmartHabit.TextInputEditText.FilledBox.Dense"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:imeOptions="actionDone"
    android:inputType="textCapSentences" />

Solution 3 (did not work):

Create a custom cursor on drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorSecondary" />
    <size android:width="2dp" />
</shape>

And use it like this:

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/description_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:imeOptions="actionDone"
    android:inputType="textCapSentences"
    android:textCursorDrawable="@drawable/cursor" />

Solution 4 (did not work):

I already trying doing this, acording to the Material 3 Documentation, but that did not worked:

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/description_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:imeOptions="actionDone"
    android:inputType="textCapSentences" 
    app:cursorColor="@color/myColor" />

Solution

  • I had to use it in the theme, not style, from my TextInputLayout:

    <style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <item name="colorControlActivated">@color/colorSecondary</item>
    </style>
    
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/description_input_layout" 
        style="@style/Widget.Material3.TextInputLayout.FilledBox.Dense.SmartHabits"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/size_extra_large"
        android:hint="@string/description"
        android:theme="@style/TextInputLayoutAppearance"
        app:layout_constraintBottom_toTopOf="@id/add_habit_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/description_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:imeOptions="actionDone"
            android:inputType="textCapSentences" />
    
    </com.google.android.material.textfield.TextInputLayout>