web-dev-qa-db-ja.com

TextInputLayoutのアウトラインカラーを変更する

マテリアルスタイルでTextInputLayoutをカスタマイズしようとしています。フォーカス状態を必要な色に設定できました。

enter image description here

を使用して

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

スタイルは次のとおりです。

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

しかし、textinputがフォーカスされていない場合、次のような外観になります。

enter image description here

黒い線の色を白に変更するにはどうすればよいですか。ありがとう

androidmaterial-designandroid-stylesandroid-textinputlayout
30
Addev

このスタイルを使用して、次のように境界線の色と境界線の幅を適用します。

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

これからスタイリングに関する追加の詳細を取得します link

TextInputLayoutのデフォルトの色を上書きするcolors.xmlファイルに以下の行を追加します

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

バージョン 1.1.0-alpha02 のAndroidのマテリアルコンポーネントでは、これらのアイテムに対して ColorStateList を作成するだけで機能します。手順は次のとおりです。

res/color/text_input_box_stroke.xmlに次のようなものを入れます。

<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>

次に、styles.xmlに以下を配置します。

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

最後に、実際のTextInputLayoutのスタイルを示します。

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

マテリアルコンポーネントアルファ7以降では、次のようにカラーセレクタファイルを作成するだけです：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>

これがどのように設定されているかについての詳細なコンテキスト。関連するソースコードは次のとおりです。

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);
}

このリストから、すべての状態が定義されたカラーセレクターを使用しているか、デフォルトで別の色に戻るかを確認できます。

3
Adrian Le Roy Devezin

デフォルトの設定を作成しました。

 <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>

カラーディレクトリを作成し、その中にリソースファイルを作成し、上記のコードをカラーディレクトリxmlファイルに貼り付け、テキスト入力レイアウトスタイルで次の行を貼り付けます

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