วิธีการเปลี่ยนสีของป้ายกำกับ TextinputLayout และแก้ไขข้อความขีดเส้นใต้ Android

TextinputLayoutฉันใช้หุ่นยนต์ห้องสมุดการออกแบบ แต่ปรับแต่งสีคำใบ้สีป้ายและสีขีดเส้นใต้ของEditTextด้านในTextinputLayoutไม่ได้ กรุณาช่วย.

เปลี่ยนสีของบรรทัดล่าง:

<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

จากคำตอบของ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>

มุ่งเน้นไปที่:

ไม่มีโฟกัส:

ข้อความผิดพลาด:

ด้วยไลบรารีส่วนประกอบวัสดุคุณสามารถใช้ไฟล์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"
    ...>

เพิ่มแอตทริบิวต์นี้ในแท็ก Edittext และเพลิดเพลินกับ:

 android:backgroundTint="@color/colorWhite"

นี้โพสต์บล็อกอธิบายแง่มุมต่าง ๆ ของการจัดแต่งทรงEditTextและห่อโดยAutoCompleteTextViewTextInputLayout

สำหรับEditTextและ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>

และนำไปใช้กับ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));
        }
    }
});

หากคุณต้องการเปลี่ยนสีของแถบ / เส้นและสีข้อความคำใบ้ของTextInputLayout(สีที่เน้นโดยปกติคืออะไร) ให้สร้างสไตล์นี้:

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

จากนั้นนำไปใช้TextInputLayoutเป็นธีมของคุณ:

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

โดยพื้นฐานแล้วสิ่งนี้จะกำหนดธีม (ไม่ใช่สไตล์) เป็นมุมมองเดียว (ซึ่งตรงข้ามกับกิจกรรมทั้งหมด)

<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-item ภายในได้อีกด้วย

<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

TextinputLayoutไม่ได้เป็นมุมมอง แต่Layoutเป็นตามที่อธิบายไว้อย่างชัดเจนโดยดิมิท Tsigourisในบล็อกโพสต์ของเขาที่นี่ ดังนั้นคุณไม่จำเป็นต้องมี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"
...