web-dev-qa-db-ja.com

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

Googleがリリースした新しいTextInputLayoutを参照して、フローティングラベルのテキストの色を変更する方法

colorControlNormal、colorControlActivated、colorControlHighLightをスタイルに設定しても役に立ちません。

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

This is what I have now

androidandroid-edittextandroid-design-library
187
johanson

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

 <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

解決策

334
Brahmam Yamani
<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>
93
Fang

答えを見つけたら、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>
68
johanson

フローティングラベルの色を変更するのに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>

解決策がうまくいくかどうか私に知らせてください:-)

19
cesards

さて、それで、私はこの答えがとても役に立ち、そして貢献してくれたすべての人々に感謝します。ただし、何かを追加するだけです。受け入れられた答えは確かに正しい答えです...しかし...私の場合、私は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ホワイトの代わりに黒いテキストカラーを表示するようになりました。

4
ZooS

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">
3
Arvis

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

2
KoralReef

サポートライブラリの最新バージョン（23.0.0+）では、TextInputLayoutは、浮動ラベルの色を編集するためにXMLで次の属性を取ります。Android:textColorHint="@color/white"

2
spierce7

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

ヒントの色を変更してテキストの下線の色を編集するには、次のようにします。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
Arnav Rao

私は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
Vicky

さて、単にcolorAccentとcolorPrimaryを使うことは完璧に動作します。

0
Kyle Horkley

あなたはここであなたの色を変えるべきです

<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
luttu android
  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>

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

0
Ahmed mohamed hussien

あなたがそれに集中しているとき、テキストラベルの色を変えるため。すなわちそれをタイプインする。追加する必要があります

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

ちょっと注意してください：あなたはあなたのメインテーマにこれらすべての実装を追加する必要があります。

0
Yash Ojha

その作業は私のために..... 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
kamal verma

私はその問題を解決しました。これはレイアウトです：

 <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
Daniel Chen
<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
Ketan Ramani