web-dev-qa-db-fra.com

Comment changer la couleur du libellé TextinputLayout et le soulignement Edittext android

J'utilise Android TextinputLayout de la bibliothèque de conception. Mais nous ne pouvions pas personnaliser la couleur de conseil, la couleur de l'étiquette et la couleur de soulignement de EditText à l'intérieur de TextinputLayout. S'il vous plaît aider.

androidandroid-design-libraryandroid-textinputlayout
105
Nitesh Verma

Pour changer la couleur de la ligne de fond, vous pouvez l’utiliser dans le thème de votre application:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Pour plus d'informations, vérifiez THIS THREAD .

Pour changer la couleur de l'étiquette flottante

<style name="TextAppearance.App.TextInputLayout" parent="@Android:style/TextAppearance">
<item name="Android:textColor">@color/main_color</item>

et l'utiliser comme:

 <Android.support.design.widget.TextInputLayout
  ...
   app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout" >

Mise à jour:
Et utilisez-le comme ci-dessous, si vous voulez changer la couleur de conseil, quand ce n’est pas une étiquette flottante:

<Android.support.design.widget.TextInputLayout
  ...
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout"
    Android:textColorHint="#c1c2c4">

Merci à @AlbAtNf

234
Pankaj Arora

Basé sur Fedor Kazakov et d'autres réponses, j'ai créé une configuration par défaut.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="Android:textColor">@color/colorAccent</item>
        <item name="Android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="Android:textColor">#ff0000</item>
        <item name="Android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

<Android.support.design.widget.TextInputLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.v7.widget.AppCompatEditText
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:hint="Text hint here"
        Android:text="5,2" />

</Android.support.design.widget.TextInputLayout>

Ciblé:

Focused

Sans focus:

Without focus

Message d'erreur:

enter image description here

28
Douglas Nassif Roma Junior

Ajoutez cet attribut dans la balise Edittext et profitez de:

 Android:backgroundTint="@color/colorWhite"
14
pm dubey

Ce article de blog décrit les différents aspects stylistiques de EditText et AutoCompleteTextView enveloppés par TextInputLayout.

Pour EditText et AppCompat lib 22.1.0 + , vous pouvez définir un attribut de thème avec certains paramètres liés au thème:

<style name="StyledTilEditTextTheme">
   <item name="Android:imeOptions">actionNext</item>
   <item name="Android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="Android:textColorPrimary">@color/blue</item>
   <item name="Android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="Android:theme">@style/StyledTilEditTextTheme</item>
    <item name="Android:paddingTop">4dp</item>
</style>

et les appliquer sur EditText:

<EditText
    Android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

Pour AutoCompleteTextView les choses sont plus compliquées, car le placer dans TextInputLayout et appliquer ce thème annule le comportement des étiquettes flottantes. Vous devez corriger ceci dans le code:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

et dans Activity.onCreate:

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});
14
Patryk Lenza

Si vous voulez changer le couleur de la barre/du trait et la couleur du texte d'indication du TextInputLayout (quelle est normalement la couleur d'accent), créez simplement ce style:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

Puis appliquez-le à votre TextInputLayout sous forme de thème :

<Android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

Cela définit essentiellement un thème (pas de style) sur une vue (par opposition à toute l'activité).

6
Farbod Salamat-Zadeh
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="Android:textColorHint">@color/actionBar_background</item>
</style>

appliquer ce style à TextInputLayout

4
Komal Nikhare
<style name="Widget.Design.TextInputLayout" parent="Android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

Vous pouvez remplacer ce style pour la mise en page

Et vous pouvez aussi changer le style de l'élément EditText-interne.

4
Fedor Kazakov

Une TextinputLayout n'est pas une vue, mais une Layout, très bien décrite par Dimitrios Tsigouris dans son billet de blog ici . Par conséquent, vous n'avez pas besoin de Style, qui est réservé à Views, mais utilisez un Theme. Après la publication du blog, je me suis retrouvé avec la solution suivante:

Commencez dans votre styles.xml avec 

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="Android:textColor">@color/your_colour_here</item>
        <item name="Android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

Et dans votre mise en page, ajoutez 

<com.google.Android.material.textfield.TextInputLayout
                Android:theme="@style/TextInputLayoutAppearance"
...
2
Spipau