TextinputLayoutのラベルの色を変更する方法とedittext underline android


120

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


1
デザインのガイドラインに沿ったアクセントカラーにする必要がありますか?
ラグフナンダン2015

そうですが、テーマのアクセントカラーとは異なる色のeditTextがたくさんあります。
Nitesh Verma 2015


ラベルの色を変更するには、ここで私の答えを確認してください
Summved Jain

回答:


256

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

<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


ヒントの色を変更できません(ラベルでない場合)。
Nitesh Verma

私はアプリのサイズについて本当に心配しています。それを考慮して、アプリに追加することが予想される追加サイズのアイデアはありますか?
Nitesh Verma 2015

申し訳ありませんが、ご質問を承りませんでした。詳細、どのような状況でのサイズ、アプリの重さのグラフィックスサイズ(apkは20MB以上かなど)を説明してください。 、そうですか?
Pankaj Arora 2015

ベコズ、私はあなたの答えに従ってヒントの色を変えることができませんでした。それの一部は私にとってはうまくいきましたが、これは私が尋ねたものに対する完全な解決策ではありません。アプリのサイズに関して、Material EdiTTextのような外部ライブラリを追加すると、アプリのサイズが増加しませんか?
Nitesh Verma 2015

4
単純に設定します。それは、フローティングlableないとき@NiteshVermaは、ヒントの色を設定するための解決策を見つけandroid:textColorHintTextInputLayoutXMLで。
AlbAtNf 2016年

30

ヒョードルカザコフに基づくと他の回答に、デフォルトの構成を作成しました。

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>

集中:

集中

フォーカスなし:

フォーカスなし

エラーメッセージ:

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


8
「フォーカスなし」の例でもピンク色を取得するにはどうすればよいですか?
ジョンスミス

このスタイルの使い方は?
ハンザラ

23

マテリアルコンポーネントライブラリを使用できcom.google.android.material.textfield.TextInputLayout

カスタムスタイルを適用して色を変更できます。

ヒントの色を変更するには、次の属性を使用する必要があります:
hintTextColorおよびandroid:textColorHint

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</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>

一番下の線の色を変更するには、次の属性を使用する必要がありますboxStrokeColor

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

この場合も、セレクターを使用する必要があります。何かのようなもの:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

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

これらの属性をレイアウトに適用することもできます。

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

1
TextinputLayout内のEditTextの下線の色を変更するにはどうすればよいですか?焦点が合っていない状態を意味します。灰色がかっている
Evgenii Vorobei

@EvgeniiVorobei回答に記載されています。によって定義されますboxStrokeColor。例においてselector_stroke_color特定の最後の行で:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
ガブリエルMariotti

どうもありがとうございました!自分では分かりませんでした。
Evgenii Vorobei


17

このブログの投稿の様々なスタイリング側面説明EditTextAutoCompleteTextViewによってラップをTextInputLayoutます。

以下の場合EditTextAPPCOMPAT 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));
        }
    }
});

8

変更したい場合は、バー/線の色やヒントテキストの色TextInputLayout(アクセントカラーが通常である何を)、そしてちょうどこのスタイルを作成します。

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

次に、それをテーマTextInputLayoutとして適用します。

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

これは基本的に(スタイル全体ではなく)テーマを(アクティビティ全体ではなく)1つのビューに設定します。


Min SDKは21である必要があります
Azizjon Kholmatov

5
<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アイテムの内部スタイルも変更できます。


このスタイルの使い方は?すべてのアプリのスタイルを1か所でオーバーライドする方法はありますか?
ハンザラ

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に適用する


2
TextInputLayoutにスタイルを適用するための簡単なメモ:android:theme="@style/EditScreenTextInputLayoutStyle"
jackycflau

5

A TextinputLayoutはビューではありませんが、ここの彼のブログ投稿でDimitrios TsigourisLayout非常にうまく説明しているように。したがって、専用のは必要ありませんが、を使用してください。ブログ投稿に続いて、私は次の解決策に終わりました: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"
...

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