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

user_1391483 0
Viewed 2067

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.

android-textinputlayout material-components-android colors android
3 Answers

Yeah, this is definitely another bug in the google code, sigh. But here's the work-around that I am using.

Define your style (usually in styles.xml):

    <style name="Widget.MaterialComponents.TextInputLayout.OutlinedBox.MyStyle">
        <item name="shapeAppearance">@style/ShapeAppearance.MaterialComponents.Onboarding</item>
        <item name="boxStrokeColor">@color/onboarding_statelists</item>
        <item name="hintTextColor">@color/colorOnPrimary</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

Then (and this is really important) in your widget declaration in your layout file you must reference that style as a theme and a style!

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/name_et"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="type your name"

            android:theme="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.MyStyle"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.MyStyle"

            app:layout_constraintEnd_toEndOf="@id/end"
            app:layout_constraintStart_toStartOf="@id/start"
            app:layout_constraintTop_toBottomOf="@id/bottomLabel">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                />
        </com.google.android.material.textfield.TextInputLayout>

You really shouldn't be defining it as a theme here. And in my tests you had to do BOTH! There's definitely something buggy going on, but this worked for me. Good luck!

user_6248140

Add this style on the theme.xml file

<style name="TextInputLayoutAppearance" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">@color/white</item>
</style>

Then add the theme on the TextInputLayout

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/outlinedTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextInputLayoutAppearance"
    android:hint="Title"
    android:textColorHint="@color/white"
    app:placeholderTextColor="@color/white"
    app:boxStrokeColor="@color/secondary_blue"
    app:hintTextColor="@color/white"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textColorHighlight="@color/secondary_blue"/>

</com.google.android.material.textfield.TextInputLayout>
user_118533690 
<style name="CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="materialThemeOverlay">@style/ThemeOverlay.OutlinedBox.Dense</item>
    </style>

<style name="ThemeOverlay.OutlinedBox.Dense" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>
user_22110100
Related