Cómo cambiar el color del trazo del borde inactivo del componente TextInputLayout de Android Material

Dec 14 2020

Estoy intentando configurar TextInputLayout color de trazo de borde desenfocado. Por lo mismo, hay demasiadas preguntas y sus respuestas y las he probado todas. Al igual que los estilos creados y utilizados como tema, el selector de color creado y aplicado eso, y también aplicado directamente app: boxStrokeColor con selector de color. Pero no suerte con ninguna de estas soluciones disponibles.

No estoy seguro, ¿dónde estoy haciendo mal o algo que todavía me falta? Envié mi código al proyecto de prueba en github para obtener una mejor visibilidad de toda mi configuración. Aquí hay un código de muestra para una revisión rápida:

activity_main.xml (TextInputLayout dentro de ConstraintLayout)

<com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Tried this as well - app:boxStrokeColor="@color/text_input_box_stroke_color" -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/emailTextInputLayout"
        android:hint="Email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:theme="@style/TextInputLayoutStyle"
        android:layout_marginHorizontal="24dp"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/emailTextInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:importantForAutofill="no"
            android:inputType="textEmailAddress" />

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

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">#FF00CC</item>
        <item name="boxStrokeWidth">2dp</item>
    </style>
</resources>

text_input_box_stroke_color.xml (selector de color)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/mtrl_textinput_focused_box_stroke_color" android:state_focused="true"/>
    <item android:color="@color/mtrl_textinput_hovered_box_stroke_color" android:state_hovered="true"/>
    <item android:color="@color/mtrl_textinput_disabled_color" android:state_enabled="false"/>
    <item android:color="@color/mtrl_textinput_default_box_stroke_color"/>
</selector>

Sería de gran ayuda si alguien pudiera darme algunas pautas y sugerencias y ayudarme a descubrir cualquier error que haya cometido.

Gracias por adelantado.

Respuestas

1 MariosP Jan 08 2021 at 23:31

He probado su código y funciona después de realizar los siguientes cambios:

1. Primero cambie su res / color / text_input_box_stroke_color.xml como se muestra a continuación para ver los colores de los diferentes estados. En el siguiente ejemplo, he establecido un color rojo para el estado enfocado y un color azul claro para el estado inactivo predeterminado:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/holo_red_dark" android:state_focused="true" />
    <item android:color="@android:color/holo_green_dark" android:state_hovered="true" />
    <item android:color="@color/mtrl_textinput_disabled_color" android:state_enabled="false" />
    <item android:color="@android:color/holo_blue_light" />
</selector>

2.Luego, cambie su res / values / styles.xml con el enlace boxStrokeColor al selector de arriba como se muestra a continuación:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@color/text_input_box_stroke_color</item>
        <item name="boxStrokeWidth">2dp</item>
    </style>
</resources>

3.Finalmente en su TextInputLayout agregue este estilo como a continuación:

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayoutStyle"
    android:id="@+id/emailTextInputLayout"

Actualmente está agregando el estilo como: android: theme = "@ style / TextInputLayoutStyle" en lugar de style = "@ style / TextInputLayoutStyle"

SlothCoding Jan 07 2021 at 05:52

La solución para esto es lo siguiente, y esto funciona porque SOLO AHORA lo probé.

Vaya a colors.xmlsu res>valuescarpeta interior .

Allí tendrá su colorPrimaryy otros colores que ya creó antes. Desplácese hasta el final y agregue esta línea:

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">@color/colorPrimary</color>

Cuando hagas eso, puedes cambiar el color allí. Definí como @color/colorPrimarypero puedes usar lo que quieras. Antes de aplicar esta línea obtuve esto: