Material TexInputLayout change color

Question

i need to change the color but i dont know how to do it. Can you help me?

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/contraseña"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="440dp"
    android:layout_marginEnd="16dp"

    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Contraseña"
        android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>

enter image description here

I want to change the grey color to white.

what colour do you want to change ? – Blackbelt Jun 03 '20 at 13:09 — Blackbelt, Jun 03 '20 at 13:09
I want to change the border and the hint text to white – Jorge Jun 03 '20 at 13:16 — Jorge, Jun 03 '20 at 13:16

Lalit Fauzdar · Accepted Answer · 2020-06-03T13:32:16.880

For Changing the border color and hintTextColor, you can use

app:boxStrokeColor="your color"
app:hintTextColor="your color" /*This changes the color of hint when it's collapsed 
and moved to top that's when user enters a character.*/
app:textColorHint="your color" //This is the text color of uncollapsed hint that's the default state.

Furthermore, if you want to create a style then this is the complete style I use which you can modify as you need.

<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="hintTextAppearance">@style/HintText</item>
    <item name="helperTextTextAppearance">@style/HelperText</item>
    <item name="counterTextAppearance">@style/HelperText</item>

    <item name="android:textColor">@color/dark_grey</item>
    <item name="android:textColorHint">@color/dark_grey</item>
    <item name="hintTextColor">@color/colorAccent</item>
    <item name="boxStrokeColor">@color/colorAccent</item>
    <item name="startIconTint">@color/colorAccent</item>
    <item name="endIconTint">@color/colorAccent</item>
    <item name="boxBackgroundColor">@color/white</item>

    <item name="boxCornerRadiusBottomEnd">10dp</item>
    <item name="boxCornerRadiusBottomStart">10dp</item>
    <item name="boxCornerRadiusTopEnd">10dp</item>
    <item name="boxCornerRadiusTopStart">10dp</item>

    <item name="boxStrokeWidthFocused">2dp</item>


    <item name="hintEnabled">true</item>
    <!--<item name="hintAnimationEnabled">true</item>-->

</style>

These are the style elements to change HelperText or HintText apperance:

<style name="HintText" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">12sp</item>
</style>

<style name="HelperText" parent="TextAppearance.Design.HelperText">
    <item name="android:textSize">12sp</item>
</style>

And set it to TextInputlayout as style="@style/TextInputLayoutAppearanceOutLined". Whatever mentioned in the style, you can use it in XML layout tag as well.

Also, the official docs of Material TextInputLayout are very important and easy to understand unlike the developer docs of Android and you should read them once to know more about it here.

@Jorge I'm glad it helped. – Lalit Fauzdar Jun 03 '20 at 14:35 — Lalit Fauzdar, Jun 03 '20 at 14:35

Material TexInputLayout change color

1 Answers1