Change the cursor color via styling

Looks like the TextInputLayout and TextInputEditTextLayout are defaulting the cursor (and cursor bubble) color to primary color. I tested it by switching the global primary color of the app and it works. However, when I try to create a theme for that specific view and override the primary color, it doesn’t work.

<style name="Widget.AppTheme.TextInputEditText.Dense" parent="Widget.MaterialComponents.TextInputEditText.FilledBox.Dense">
        <item name="colorPrimary">@color/orange</item>
</style>

        <com.google.android.material.textfield.TextInputLayout
            app:hintEnabled="false"
            app:hintAnimationEnabled="false"
            android:id="@+id/f_login_email_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/f_login_subheader">

            <com.google.android.material.textfield.TextInputEditText
                style="@style/Widget.AppTheme.TextInputEditText.Dense"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="12dp"
                android:ems="10"
                android:textSize="@dimen/text_size_text_entry"
                android:hint="@string/login_email_hint"
                android:inputType="textEmailAddress" />
        </com.google.android.material.textfield.TextInputLayout>

Could somebody help with this?

[erick-aguero22]

Hi everyone I share my way of setting the OutlinedBox style.

First of all, I am using version 1.1.0

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

Just like you mentioned @dsn5ft , I create a style by referencing the style TextInputEditText.OutlinedBox

<style name="exampleCursor" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="colorControlActivated">@color/green</item>
</style>

In my case I use a style for my TextInputLayout, I add android:theme with the created style

<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="android:background">@android:color/transparent</item>
    <item name="android:textColorHint">@color/colorAccent</item>
    <item name="android:textColor">@color/colorAccent</item>
    <item name="hintTextColor">@color/colorAccent</item>
    <item name="boxStrokeColor">@color/silver</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="errorEnabled">true</item>
    <item name="counterEnabled">false</item>
    <item name="android:theme">@style/exampleCursor</item>
</style>

and I add the style in the component

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextInputLayoutStyle"
….

and that’s it, the color change to the cursor works

regards.

[dsn5ft]

The reason why using android:theme works is because colorControlActivated is a theme attribute, as opposed to a specific component attribute (e.g., hintTextColor).

One way you could customize a global theme attribute but only have that customization apply to a specific component is to use our materialThemeOverlay functionality. E.g.:

Create a theme overlay that customizes colorControlActivated:

  <style name="ThemeOverlay.AppTheme.TextInputEditText.FilledBox.Dense" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="colorControlActivated">@color/orange</item>
  </style>

Create a TextInputLayout style that uses the theme overlay:

  <style name="Widget.AppTheme.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="materialThemeOverlay">@style/ThemeOverlay.AppTheme.TextInputEditText.FilledBox.Dense</item>
  </style>

Set the TextInputLayout style as the default in your app theme:

  <item name="textInputStyle">@style/Widget.AppTheme.TextInputLayout</item>