android - TextinputLayoutのラベルの色を変更し、テキストの下線を編集する方法

Question

Android デザイン ライブラリのTextinputLayout. EditTextしかし、内側のヒントの色、ラベルの色、下線の色はカスタマイズできませんでしたTextinputLayout。助けてください。

Answer 1

ボトムラインの色を変更:

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

詳細については、このスレッドを確認してください。

浮かんでいるときのヒントの色を変える

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

次のように使用します。

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

フローティング ラベルでない場合のヒントの色を変更します。

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

@AlbAtNfに感謝

Answer 2

Fedor Kazakovと他の回答に基づいて、デフォルトの構成を作成しました。

スタイル.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>

---

集中:

フォーカスなし:

エラーメッセージ：

Answer 3

このブログ投稿EditTextでは、とAutoCompleteTextViewによってラップされたのさまざまなスタイリングの側面について説明しTextInputLayoutます。

EditTextおよびAppCompat lib 22.1.0+ の場合、いくつかのテーマ関連の設定でテーマ属性を設定できます。

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

そしてそれらを適用しますEditText：

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

このテーマをラップして適用すると、フローティング ラベルの動作AutoCompleteTextViewが損なわれるため、事態はより複雑になります。TextInputLayoutこれをコードで修正する必要があります。

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

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

Answer 4

ATextinputLayoutはビューではありませんが、Dimitrios Tsigourisのブログ投稿でLayout非常にうまく説明されているように、 a です。したがって、専用のは必要ありませんが、を使用します。ブログ投稿に続いて、次の解決策になりました。StyleViewsTheme

styles.xmlから始めましょう

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

そして、レイアウトに追加します

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

Answer 5

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

このスタイルを TextInputLayout に適用する

Answer 6

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

レイアウト用にこのスタイルをオーバーライドできます

また、内部の EditText 項目スタイルも変更できます。

Answer 7

の属性を使用して、 のラベルの色を変更できます。TextInputLayoutapp:hintTextAppearanceTextInputLayout

<android.support.design.widget.TextInputLayout
    android:id="@+id/inputlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

    <EditText
        android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="@string/email"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:paddingStart="5dp"
        android:singleLine="true"/>

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

スタイル:

 <style name="TextAppearance.App.TextInputLayout" 
 parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textSize">20sp</item>
    </style>

下線の色を変更するedittextには、次を使用できますandroid:backgroundTint

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Underline color change"
        android:backgroundTint="@android:color/holo_red_light" />

Answer 8

TextInputLayout + TextInputEditText の線色を変更

色.xml

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

スタイル.xml

<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="boxStrokeColor">@color/lineColor</item>
    <item name="android:textColorHint">@color/hintColor</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="boxBackgroundColor">@color/backgroundColor</item>
</style>

<style name="TextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="android:textColor">@color/black</item>
</style>

レイアウト.xml

<com.google.android.material.textfield.TextInputLayout
            style="@style/TextInputLayout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">

            <com.google.android.material.textfield.TextInputEditText
                style="@style/TextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>