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

Question

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

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

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

Answer 1

以下のコードを試してみてください。正常な状態で動作します

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

Styles フォルダー内 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: Can't convert to color: type=0x2 in api 16 or below

解決

アップデート：

材料コンポーネント ライブラリを使用していますか

以下の行をメインテーマに追加できます

 <item name="colorPrimary">@color/your_color</item> // Activated State
 <item name="colorOnSurface">@color/your_color</item> // Normal State

または、通常の状態とアクティブ化された状態で異なる色が必要で、カスタマイズを使用して以下のコードに従いますか

<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item> //Changes the Shape Apperance
    <!--<item name="hintTextColor">?attr/colorOnSurface</item>-->   //When you added this line it will applies only one color in normal and activate state i.e colorOnSurface color
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorPrimary">@color/colorPrimaryDark</item>  //Activated color
    <item name="colorOnSurface">@color/colorPrimary</item>    //Normal color
    <item name="colorError">@color/colorPrimary</item>        //Error color

    //Text Appearance styles
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
    <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>

    <!--Note: When setting a materialThemeOverlay on a custom TextInputLayout style, don’t forget to set editTextStyle to either a @style/Widget.MaterialComponents.TextInputEditText.* style or to a custom one that inherits from that.
    The TextInputLayout styles set materialThemeOverlay that overrides editTextStyle with the specific TextInputEditText style needed. Therefore, you don’t need to specify a style tag on the edit text.-->
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>

<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>

以下の行をメインテーマに追加するか、xml でスタイルを textinputlayout に設定できます

<item name="textInputStyle">@style/Widget.App.TextInputLayout</item>

Answer 2

答えが見つかりました。attribute を使用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>

Answer 3

わかりましたので、この回答は非常に役に立ちました。貢献してくれたすべての人に感謝します。ただし、何かを追加するだけです。受け入れられた答えは確かに正しい答えです...しかし...私の場合、EditTextウィジェットの下にエラーメッセージを実装しようとしていましたがapp:errorEnabled="true"、この1行で私の人生は困難になりました。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白ではなく黒で表示されるようになりました。

Answer 4

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

Answer 5

ヒントの色を変更し、テキストの下線の色を編集するには: 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>

Answer 6

ここで色を変更する必要があります

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

Answer 7

colorAccentこれで、 andを使用するだけcolorPrimaryで完全に機能します。

Answer 8

ドキュメントから：

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

だから私はonではなく onを設定android:hintし、それはうまくいきました。app:hintTextColorTextInputLayoutTextInputEditText

Answer 9

問題を解決します。これはレイアウトです：</p>

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