web-dev-qa-db-fra.com

Changer la couleur de contour de TextInputLayout

J'essaie de personnaliser un TextInputLayout avec un style de matériau. J'ai réussi à définir l'état ciblé sur les couleurs souhaitées:

enter image description here

En utilisant

<com.google.Android.material.textfield.TextInputLayout
     style="@style/LoginTextInputLayoutStyle"
     Android:theme="@style/LoginTextInputLayoutStyle"
     Android:textColorHint="#fff"
     app:boxStrokeColor="#fff"
     .....>
          <EditText ...

où le style est:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="colorAccent">#fff</item>
</style>

Mais quand le texte n'est pas concentré, j'obtiens ce regard:

enter image description here

Comment puis-je changer la couleur de la ligne noire pour être blanc aussi. Merci

androidmaterial-designandroid-stylesandroid-textinputlayout
30
Addev

Utilisez ce style pour appliquer la couleur et la largeur de la bordure comme suit:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">#fff</item>
    <item name="boxStrokeWidth">2dp</item>
</style>

obtenir des détails supplémentaires sur le style de cette lien

Ajoutez la ligne ci-dessous dans votre fichier colors.xml qui remplace la couleur par défaut pour TextInputLayout

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>
68
Rutvik Bhatt

À partir de la version 1.1.0-alpha02 des composants matériels pour Android, il suffit de créer un ColorStateList pour ces éléments. La procédure est la suivante:

Dans res/color/text_input_box_stroke.xml mettez quelque chose comme ceci:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="#fcc" Android:state_focused="true"/>
    <item Android:color="#cfc" Android:state_hovered="true"/>
    <item Android:color="#ccf"/>
</selector>

Ensuite, dans votre styles.xml, vous mettriez:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>

Enfin, indiquez votre style pour le TextInputLayout actuel:

<com.google.Android.material.textfield.TextInputLayout
    Android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    ...
17
kroot

À partir de Material Components Alpha 7, vous créez simplement un fichier de sélecteur de couleur ainsi: colors/text_input_outline_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="true" Android:color="@color/buttonDark"/>
    <item Android:state_hovered="true" Android:color="@color/buttonDark"/>
    <item Android:state_focused="true" Android:color="@color/buttonDark"/>
    <item Android:color="@color/buttonDark"/>
</selector>

Pour plus de contexte dans la façon dont cela est défini. Voici le code source pertinent:

ColorStateList boxStrokeColorStateList =
    MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);
if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {
  defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();
  disabledColor =
      boxStrokeColorStateList.getColorForState(new int[] {-Android.R.attr.state_enabled}, -1);
  hoveredStrokeColor =
      boxStrokeColorStateList.getColorForState(new int[] {Android.R.attr.state_hovered}, -1);
  focusedStrokeColor =
      boxStrokeColorStateList.getColorForState(new int[] {Android.R.attr.state_focused}, -1);
} else {
  // If attribute boxStrokeColor is not a color state list but only a single value, its value
  // will be applied to the box's focus state.
  focusedStrokeColor =
      a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);
  defaultStrokeColor =
      ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);
  disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);
  hoveredStrokeColor =
      ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);
}

Dans cette liste, vous pouvez voir que vous voulez vous assurer que vous utilisez un sélecteur de couleur avec tous les états définis ou qu'il reviendra par défaut à une autre couleur.

3
Adrian Le Roy Devezin

J'ai créé une configuration par défaut.

 <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>
2
Monali
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_focused="true" Android:color="#FFFFFF"/>

<item Android:state_focused="false" Android:color="#FFFFFF"/></selector>

créez le répertoire de couleurs et, à l'intérieur, créez un fichier de ressources, collez le code ci-dessus dans le fichier répertoire de couleurs et le style de mise en page d'entrée de texte collez la ligne ci-dessous

<item name="boxStrokeColor">@color/focus_tint_list</item>
0
Uday Sai Kumar