web-dev-qa-db-ja.com

TextinputLayoutのラベルと編集テキストの色を変更する方法

私はAndroidデザインライブラリのTextinputLayoutを使っています。しかし、EditText内のTextinputLayoutのヒント色、ラベル色、および下線色をカスタマイズすることはできませんでした。助けてください。

androidandroid-design-libraryandroid-textinputlayout
99
Nitesh Verma

一番下の色を変更するには、アプリのテーマでこれを使用できます。

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

詳細については、 THIS THREAD を確認してください。

フローティングラベルの色を変更する

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

そしてそれを次のように使います。

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

更新：
ヒントカラーをフローティングラベルではないときに変更する場合は、次のように使用します。

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

ありがとう@AlbAtNf

229
Pankaj Arora

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

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>

焦点を当てた：

Focused

焦点がない場合：

Without focus

エラーメッセージ：

enter image description here

28
Douglas Nassif Roma Junior

これ Blog Post はEditTextname__で囲まれたAutoCompleteTextViewname__とTextInputLayoutname__のさまざまなスタイルの側面を説明します。

EditTextname__および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>

そしてそれらをEditTextname__に適用します。

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

AutoCompleteTextViewname__では、TextInputLayoutname__でラッピングしてこのテーマを適用すると、浮動ラベルの動作が壊れるため、事態はもっと複雑になります。これをコードで修正する必要があります。

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));
        }
    }
});
13
Patryk Lenza

この属性をEdittextタグに追加してお楽しみください。

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

TextInputLayoutのバー/線の色とヒントのテキストの色（アクセントの色は通常）を変更する場合は、次のスタイルを作成します。

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

それからthemeとしてあなたのTextInputLayoutにそれを適用してください：

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

これは基本的に（全体のアクティビティとは対照的に）theme（スタイルではない）を1つのビューに設定します。

6
Farbod Salamat-Zadeh
<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アイテムのスタイルも変更できます。

4
Fedor Kazakov
<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に適用します

2
Komal Nikhare

Dimitrios Tsigouris in 彼のブログ記事はこちら で非常によく説明されているように、TextinputLayoutはビューではなくLayoutです。したがって、Styleは必要ありません。これはViews専用ですが、Themeを使用してください。ブログ投稿に続いて、私は次の解決策になりました。

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"
...
1
Spipau