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


209

TextInputLayoutGoogle が新しくリリースしたものを参考にして、フローティングラベルのテキストの色を変更するにはどうすればよいですか。

スタイルcolorControlNormalcolorControlActivatedcolorControlHighLightを設定しても効果はありません。

これは私が今持っているものです:

これは私が今持っているものです


8
どのように線の色を赤に変更しますか?
Vlad

6
@ Vlad161 colorAccent
カイルホーク

@ Vlad161はどこに設定するcolorAccentか説明できますか?私はカスタムスタイルcolorAccentを黒に変更しましたが、ラインはcolorControlNormalメインスタイルにあるものを反映しています。
ElliotM 2015年


次のリンクを確認してください。それはヒントと下線の色に異なる色を設定しました:https
//stackoverflow.com/a/45349177/3392323

回答:


357

通常の状態で機能する以下のコードを試してください

 <android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/TextLabel">

     <android.support.v7.widget.AppCompatEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="Hiiiii"
         android:id="@+id/edit_id"/>

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

スタイルフォルダーのTextLabelコード

 <style name="TextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

アプリのメインテーマに設定し、機能するのは状態のみを強調表示する

 <item name="colorAccent">@color/Color Name</item>

更新:

UnsupportedOperationException:色に変換できません:API 16以下ではtype = 0x2

解決


6
うわー、私は今約1週間これに取り組んでいます-私はこの質問に何度か戻ってきました、あなたは私が今まで持っていたすべての質問に答えただけです。
ElliotM 2015年

40
あなたがTextInputLayoutまたはアンダーレイのEditTextビューにエラーメッセージを設定したときにアプリケーションがchrashed:android.view.InflateException: Error inflating class TextView
Arvis

18
このandroid:themeスタイルを慎重に設定すると、ASUS Zenphone(およびその他のデバイス)TextInputLayoutInflateExceptionクラッシュが発生します。
friederbluemle 2016

13
NJこんにちは、申し訳ありませんが、それが起こっている理由については、私は知らないが、私はそれがtextinputlayoutに設定されたエラーを使用する場合でも、作業の罰金ですThemeOverlay.AppCompat.LightにTextAppearance.AppCompatを変更
Brahmamヤマニ

11
ThemeOverlay.AppCompat.Light私のASUS Zenphone(@friederbluemle)でのクラッシュの解決を支援するように親を設定する
Lukasz Wiktor

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

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@color/gray"  //support 23.0.0
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint" />
</android.support.design.widget.TextInputLayout>

16
これは、AppCompatEditTextを使用する必要があるという誤解を招く影響を除いて、受け入れられた回答と同じです。AppCompatActivityはEditTextインスタンスに対して自動的にAppCompatEditTextを使用します。これを特に使用する必要はありません。
Niall

4
上記の "<style name"の直後のコードの最初の行にスペルミスがあります。「... TextAppearence ...」は「... TextAppearance ...」でなければならない
AJW

android:textColorHint="@color/gray" //support 23.0.0ヒントテキストの色を表示しました(設定したヒントテキストの色に関係なく、ヒントテキストの色はデフォルトで黒でした。背景が黒の場合、テキストは完全に非表示になりました
Rajaraman

69

答えを見つけ、android.support.design:hintTextAppearance属性を使用して独自のフローティングラベルの外観を設定します。

例:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:hintTextAppearance="@style/TextAppearance.AppCompat">

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_password"/>
</android.support.design.widget.TextInputLayout>

スムーズなアニメーション。ありがとう
Joaquin Iurchuk

わかりますNamespace 'android.support.design' not bound。助言がありますか?
Sunkas

@Sunkasがcompile 'com.android.support:design:23.1.1'アプリのgradle ファイルに追加
Ahmed Mostafa

23

android:theme="@style/TextInputLayoutTheme"フローティングラベルの色を変更するためにを使用する必要はありません。ラベルとして使用される小さなTextViewのテーマ全体に影響するためです。代わりに、次のapp:hintTextAppearance="@style/TextInputLayout.HintText"場所を使用できます。

<style name="TextInputLayout.HintText">
  <item name="android:textColor">?attr/colorPrimary</item>
  <item name="android:textSize">@dimen/text_tiny_size</item>
  ...
</style>

解決策が機能するかどうか教えてください:-)


22

フローティングラベルのテキストの色を変更するにはどうすればよいですか?

マテリアルコンポーネントライブラリをカスタマイズできTextInputLayout(それはバージョン1.1.0が必要です)を使用して、ヒントテキストの色を

  • レイアウトでは:

    • app:hintTextColor 属性:折りたたまれ、テキストフィールドがアクティブなときのラベルの色
    • android:textColorHint 属性:他のすべてのテキストフィールドの状態(休憩や無効など)でのラベルの色
<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>
<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextColor">@color/mycolor</item>
    <item name="android:textColorHint">@color/text_input_hint_selector</item>
</style>

ここに画像の説明を入力してくださいここに画像の説明を入力してください

のデフォルトのセレクタandroid:textColorHintは次のとおりです。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>


4

わかりましたので、私はこの答えがとても役に立ち、貢献してくれたすべての人に感謝します。ただし、何かを追加するだけです。受け入れられた答えは確かに正しい答えです...しかし...私の場合、私はEditTextウィジェットの下にエラーメッセージを実装しようとしていました、app:errorEnabled="true"そしてこの単一の行は私の人生を難しくしました。android.support.design.widget.TextInputLayoutこれは、で定義したテキストの色が異なるテーマを上書きしたようですandroid:textColorPrimary

最後に、テキストの色をEditTextウィジェットに直接適用することにしました。私のコードは次のようになります:

styles.xml

<item name="colorPrimary">@color/my_yellow</item>
<item name="colorPrimaryDark">@color/my_yellow_dark</item>
<item name="colorAccent">@color/my_yellow_dark</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@color/dark_gray</item>
<item name="android:windowBackground">@color/light_gray</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">@color/dark_gray</item>
<item name="android:colorControlNormal">@android:color/black</item>
<item name="android:colorControlActivated">@android:color/white</item>

そして私のウィジェット:

<android.support.design.widget.TextInputLayout
        android:id="@+id/log_in_layout_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/log_in_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@android:color/black"
            android:ems="10"
            android:hint="@string/log_in_name"
            android:inputType="textPersonName" />
</android.support.design.widget.TextInputLayout>

これで、textColorPrimary白ではなく黒のテキストカラーが表示されます。


3

TextInputLayoutのスタイルテーマを作成し、アクセントカラーのみを変更することをお勧めします。親をアプリの基本テーマに設定します。

 <style name="MyTextInputLayout" parent="MyAppThemeBase">
     <item name="colorAccent">@color/colorPrimary</item>
 </style>

 <android.support.design.widget.TextInputLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:theme="@style/MyTextInputLayout">

2

サポートライブラリの最新バージョン(23.0.0以降)ではTextInputLayout、フローティングラベルの色を編集するためにXMLで次の属性を使用します。android:textColorHint="@color/white"


2

Brahmam Yamaniの回答の代わりに、親としてWidget.Design.TextInputLayoutを使用することを好みます。これにより、すべてのアイテムが上書きされなくても、必要なすべてのアイテムが確実に存在します。Yamanisの回答では、setErrorEnabled(true)が呼び出された場合、アプリは解決できないリソースでクラッシュします。

スタイルを次のように変更するだけです。

<style name="TextLabel" parent="Widget.Design.TextInputLayout">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

1
Android 4.3および7で正常に機能し、EditText.setError()を使用してもエラーは発生しません
Saul_programa 2018

2

私の場合、これをapp:hintTextAppearance="@color/colorPrimaryDark"TextInputLayoutウィジェットに追加しました。


これは動作しません。error: '#FFFFFF' is incompatible with attribute hintTextAppearance
Taslim Oseni

1

ヒントの色を変更し、テキストの下線の色を編集するには:colorControlActivated

キャラクターカウンターの色を変更するには:textColorSecondary

エラーメッセージの色を変更するには:colorControlNormal

パスワードの表示ボタンの色合いを変更するには:colorForeground

TextInputLayoutの詳細については、http: //www.zoftino.com/android-textinputlayout-tutorialをご覧ください。

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">#e91e63</item>
    <item name="android:colorForeground">#33691e</item>
    <item name="colorControlNormal">#f57f17</item>
    <item name="android:textColorSecondary">#673ab7</item>
</style>

1

プログラムで使用できるもの:

/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);

/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};

/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})

説明:

カラーリソースからintカラー値を取得します(Androidで使用されるRGBカラーを提示する方法)。ColorEnabledを作成しましたが、実際には、この回答ではColorHintExpandedおよびColorViewCollapsedである必要があります。とにかく、これはビュー「TextInputLayout」のヒントがExpandedまたはCollapsed状態のときに表示される色です。ビューの関数 "setDefaultHintTextColor"の次の配列を使用して設定します。リファレンス: TextInputLayoutのリファレンス-このページでメソッド "setDefaultHintTextColor"を検索して詳細を確認してください

上記のドキュメントを見ると、関数がColorStateListを使用してExpanded&Collapsedヒントの色を設定していることがわかります。

ColorStateListドキュメント

ColorStateListを作成するには、最初に、必要な状態(私の場合、state_enabled&state_disabled(TextInputLayoutでは、Hint ExpandedおよびHint Collapsedに等しい)を含むマトリックスを作成しましたテストを行うだけです])。次に、ColorStateListのコンストラクターに、カラーリソースのint値の配列を渡します。これらの色は、状態行列と対応しています(colors配列のすべての要素は、同じ位置の状態行列のそれぞれの配列に対応しています)。したがって、colors配列の最初の要素は、状態行列の最初の配列のすべての状態の色として使用されます(この場合、配列には1つの要素しかありません:有効な状態= TextInputLayutの拡張状態のヒント)。最後の状態には正/負の値があり、正の値しかありません、

これがお役に立てば幸いです。さようなら、素敵なコーディング(:


説明?これらは2つの方法にすぎません。
Z3R0

テキストがたくさんある4行だけ-その背後にある概念を簡単に説明してください。誰もが賛成票を残すのに十分な理由があります:)
Nico Haase

1
完了;)それが正しく、役立つことを願っています。良いコーディングをする:D
Z3R0

0

ここで色を変えて

<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

0

今、単に使用colorAccentしてcolorPrimary完全に動作します。


4
これは質問に対する答えを提供しません。批評したり、著者に説明を求めるには、投稿の下にコメントを残してください。
Swati 2015年

2
@Swatiこれが質問への回答です。私は彼にcolorAccentとcolorPrimaryを使うように言っています。
Kyle Horkley、2015年

6
まあ、それはもっとコメントです。サンプルコードを追加するとポイントがあるかもしれません。
スーフィアン2015年

実際、TextInputLayoutはcolorPrimary、ヒントと最終行のフォーカスされた色を設定するためにテーマを正確に取り入れました。この答えでそれを紹介するためにいくつかの説明/コードが実際にあったはずです
Kirill Starostin

0

私は問題を解決します。これはレイアウトです:

 <android.support.design.widget.TextInputLayout
           android:id="@+id/til_username"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="@string/username"
           >

           <android.support.v7.widget.AppCompatEditText android:id="@+id/et_username"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:singleLine="true"
               />
       </android.support.design.widget.TextInputLayout>

これはスタイルです:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
<!-- Application theme. -->


 <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="colorAccent">@color/pink</item>
        <item name="colorControlNormal">@color/purple</item>
        <item name="colorControlActivated">@color/yellow</item>
    </style>

アプリケーションでテーマを使用する必要があります:

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
</application>

0

フォーカスしているときにテキストラベルの色を変更します。つまり、それを入力します。指定を追加する必要があります

<item name="android:textColorPrimary">@color/yourcolorhere</item>

注:これらすべての実装をメインテーマに追加する必要があります。


0

その動作私のために..... TextInputLayoutにヒント色を追加

    <android.support.design.widget.TextInputLayout
        android:textColorHint="#ffffff"
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edtTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>

0

android.support.design.widget.TextInputLayoutでandroid:textColorHintを使用してみましたが、正常に機能します。

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColorHint="@color/colorAccent">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hello"
                android:imeActionLabel="Hello"
                android:imeOptions="actionUnspecified"
                android:maxLines="1"
                android:singleLine="true"/>

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

0
  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>    

これをスタイルに追加し、TextInputLayout TheamをApp2に設定すると動作します;)


0
<com.google.android.material.textfield.TextInputLayout
    android:hint="Hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:maxLines="1"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        android:textColor="#000000"
        android:textColorHint="#959aa6" />

</com.google.android.material.textfield.TextInputLayout>

res / values / styles.xml

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">#545454</item>
    <item name="colorControlActivated">#2dbc99</item>
    <item name="android:textSize">11sp</item>
</style>

0

を使えapp:hintTextColorば使えますcom.google.android.material.textfield.TextInputLayout、これを試してみてください

 <com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/app_name" 
     app:hintTextColor="@android:color/white">                   

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

0

通常の状態で機能する以下のコードを試してください

<android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/TextLabel">

 <android.support.v7.widget.AppCompatEditText
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="Hiiiii"
     android:id="@+id/edit_id"/>


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

スタイルフォルダーのTextLabelコード

 <style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">@color/Color Name</item> 
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">@color/Color Name</item>
<item name="colorControlNormal">@color/Color Name</item>
<item name="colorControlActivated">@color/Color Name</item>
 </style>

0

ドキュメントから:

ヒントはEditTextではなく、TextInputLayoutに設定する必要があります。ヒントがXMLの子EditTextで指定されている場合でも、TextInputLayoutは正しく機能する可能性があります。TextInputLayoutはEditTextのヒントをフローティングラベルとして使用します。ただし、今後ヒントを変更する呼び出しを行っても、TextInputLayoutのヒントは更新されません。意図しない動作を回避するには、EditTextではなくTextInputLayoutでsetHint(CharSequence)およびgetHint()を呼び出します。

だから私はオンではなくオンに設定android:hintapp:hintTextColorましたがTextInputLayout、うまくいきTextInputEditTextました。


0

あなたが追加する必要がありますのでcolorControlNormalcolorControlActivatedcolorControlHighLightメインアプリケーションのテーマにアイテム:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlActivated">@color/yellow_bright</item>
        <item name="colorControlNormal">@color/yellow_black</item>

    </style>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.