Search code examples
androidcolorsandroid-textinputlayoutmaterial-components-android

Change cursor color of a TextInputLayout.OutlinedBox of Theme.MaterialComponents


In my application I am using textfield.TextInputLayout and textfield.TextInputEditText as input text, instead of the usual EditText. This is my view:

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/inputId"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/fab_margin"
        android:layout_marginEnd="@dimen/fab_margin"
        android:focusedByDefault="false"
        android:enabled="true"
        android:hint="@string/userHint"
        android:textColor="@color/letter_medium_emphasis"
        app:boxCornerRadiusBottomEnd="@dimen/OutLinedBoxCorners"
        app:boxCornerRadiusBottomStart="@dimen/OutLinedBoxCorners"
        app:boxCornerRadiusTopEnd="@dimen/OutLinedBoxCorners"
        app:boxCornerRadiusTopStart="@dimen/OutLinedBoxCorners"
        app:boxStrokeColor="@color/letter_medium_emphasis"
        app:counterEnabled="true"
        app:counterMaxLength="20"
        app:helperText="@string/rememberId"
        app:helperTextEnabled="true"
        app:hintTextColor="@color/letter_medium_emphasis"
        app:startIconDrawable="@drawable/ic_account_circle_black_24dp"
        app:startIconTint="@color/primary_dark">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:inputType="text"
            android:fontFamily="@font/poppins_medium" />

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

Everything is correct, except one thing, the color of the cursor and the text selector. I attach an image to explain myself better.

enter image description here

I have been reading and apparently it is something that has happened to more people. The cursor is there, but always white.

enter image description here

I find solutions, but they are all applicable to the FilledBox.Dense type. I am using OutlinedBox and nothing works. The best solution I have found is THIS

The problem is that, as I was saying, it works with the FilledBox.Dense type and not with OutlinedBox.

Could someone tell me how to adapt this solution or how to change the color in some other way?

I have tried to adapt it using the OutlinedBox type, but without success.

Thanks in advance.


Solution

  • A simpler solution based on this article: https://www.itcodar.com/android/set-edittext-cursor-color.html

    This example sets the cursor color to colorAccent.

    1. Add this style to the styles.xml file:

    <style name="ThemeOverlay.AppTheme.TextInputEditText.Outlined" parent="">
        <item name="colorControlActivated">?attr/colorAccent</item>
    </style>
    

    2. Add these style and android:theme attributes to your TextInputLayout view:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/my_field_id"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:theme="@style/ThemeOverlay.AppTheme.TextInputEditText.Outlined"
        ...
        >
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </com.google.android.material.textfield.TextInputLayout>