jak zmienić kolor etykiety TextinputLayout, a edittext podkreśla android


121

Używam biblioteki projektów Androida TextinputLayout. Ale nie można było dostosować koloru podpowiedzi, koloru etykiety i koloru podkreślenia EditTextwnętrza TextinputLayout. Proszę pomóż.


1
Powinien mieć akcent kolorystyczny zgodnie z wytycznymi projektowymi, prawda?
Raghunandan

tak, ale będę miał wiele editTextów z kolorami innymi niż kolor akcentu motywu.
Nitesh Verma

możliwy duplikat podkreślenia
EditText

Sprawdź moją odpowiedź tutaj, aby zmienić kolor etykiety
Summved Jain

Mogłem niezawodnie zmienić podkreślenie zarówno w stanie skupionym, jak i nieokreślonym, używając niestandardowego elementu do rysowania w tle, określonego na stackoverflow.com/a/36543554/2413303
EpicPandaForce

Odpowiedzi:


257

Zmień kolor dolnej linii:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Więcej informacji znajdziesz w tym wątku .

Zmień kolor podpowiedzi, gdy się unosi

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

i użyj go w ten sposób:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

Zmień kolor podpowiedzi, gdy nie jest to pływająca etykieta:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

Dzięki @AlbAtNf


Nie jestem w stanie zmienić koloru podpowiedzi (gdy nie ma etykiety). Czy mógłbyś pomóc?
Nitesh Verma

Jestem naprawdę zaniepokojony rozmiarem mojej aplikacji, biorąc pod uwagę, że masz jakieś pojęcie o tym, jaki rozmiar dodatku ma umieścić w mojej aplikacji?
Nitesh Verma

przepraszam, nie dostałem twojego pytania, proszę wyjaśnij więcej, rozmiar w jakim kontekście, rozmiar grafiki wagi aplikacji (jak apk ma ponad 20mb lub coś), a wcześniej akceptujesz moją odpowiedź i ponownie usuwasz akceptację, czy mogę zapytać , tak?
Pankaj Arora

ponieważ po twojej odpowiedzi nie mogłem zmienić koloru podpowiedzi. Część z tego działała dla mnie, ale nie jest to kompletne rozwiązanie tego, o co prosiłem. Jeśli chodzi o rozmiar aplikacji, czy dodanie zewnętrznej biblioteki, takiej jak Material EdiTText, nie zwiększa rozmiaru aplikacji?
Nitesh Verma

4
@NiteshVerma znalazł rozwiązanie do ustawienia koloru podpowiedzi, gdy nie jest to pływająca etykieta: po prostu ustaw android:textColorHintTextInputLayoutw XML.
AlbAtNf

30

Na podstawie odpowiedzi Fedora Kazakova i innych stworzyłem domyślną konfigurację.

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

Skoncentrowany:

Skoncentrowany

Bez skupienia:

Bez skupienia

Komunikat o błędzie:

wprowadź opis obrazu tutaj


9
Co powinienem zrobić, aby uzyskać różowy kolor również dla przykładu „Bez fokusu”?
John Smith

jak używać tego stylu?
Hanzala

24

Z Biblioteką komponentów materiałów można używać com.google.android.material.textfield.TextInputLayout.

Możesz zastosować własny styl, aby zmienić kolory.

Aby zmienić kolor podpowiedzi , musisz użyć następujących atrybutów:
hintTextColori 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>

Powinieneś użyć selektora dla android:textColorHint. Coś jak:

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

Aby zmienić kolor linii dolną trzeba użyć atrybutu: boxStrokeColor.

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

Również w tym przypadku powinieneś użyć selektora. Coś jak:

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

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj

Możesz również zastosować te atrybuty w swoim układzie:

<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
Jak zmienić kolor podkreślenia EditText w TextinputLayout? Mam na myśli stan nieostry. Jest szaro
Evgenii Vorobei

@EvgeniiVorobei Jest to opisane w odpowiedzi. Jest zdefiniowany przez boxStrokeColor. W przykładzie selector_stroke_colorw szczególności ostatnia linia:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
Gabriele Mariotti

Dziękuję bardzo! Sam nie mogłem tego rozgryźć.
Evgenii Vorobei

mój problem polega na tym, że chcę, aby kolor podpowiedzi był szary, a po wypełnieniu edycji chcę, aby był pomarańczowy, bez względu na to, czy jest skupiony, czy nie. jestem w stanie to zrobić, gdy jest skupiony. ale nie jest w stanie tego zrobić, kiedy tak nie jest. Więc możesz mi z tym pomóc @GabrieleMariotti
Anmol317

19

Dodaj ten atrybut w tagu Edittext i ciesz się:

 android:backgroundTint="@color/colorWhite"

5
efekt: zmienia kolor linii na urządzeniach z poziomem API 21 i wyższym
Someone Somewhere

17

W tym poście na blogu opisano różne aspekty stylizacji EditTexti AutoCompleteTextViewopakowane przez TextInputLayout.

Dla EditTexti AppCompat lib 22.1.0+ możesz ustawić atrybut motywu z niektórymi ustawieniami związanymi z motywem:

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

i zastosuj je na EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

Na AutoCompleteTextViewrzeczy są bardziej skomplikowane, ponieważ otoczenie go TextInputLayouti stosując ten TEMATYCZNE pływających zachowanie etykiety. Musisz to naprawić w kodzie:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

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

Jeśli chcesz zmienić bar / kolor linii i kolor tekstu podpowiedź z następujących TextInputLayout(co zwykle jest akcent koloru), a następnie po prostu stworzyć ten styl:

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

Następnie zastosuj go TextInputLayoutjako motyw :

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

To zasadniczo ustawia temat (nie styl) do jednego widoku (w przeciwieństwie do całej czynności).


Twój Min SDK powinien wynosić 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>

Możesz zastąpić ten styl dla układu

Możesz także zmienić wewnętrzny styl elementu EditText.


jak używać tego stylu? czy jest jakiś sposób na zastąpienie wszystkich stylów aplikacji w jednym miejscu?
Hanzala

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>

zastosuj ten styl do TextInputLayout


2
tylko android:theme="@style/EditScreenTextInputLayoutStyle"
krótka

5

A TextinputLayoutnie jest widokiem, ale Layout, jak bardzo ładnie opisał Dimitrios Tsigouris na swoim blogu tutaj . Dlatego nie potrzebujesz pliku Style, który jest Viewstylko do, ale użyj Theme. Po wpisie na blogu otrzymałem następujące rozwiązanie:

Zacznij styles.xmlod

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

A w swoim układzie dodaj

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

1
Użyj Widget.MaterialComponents.TextInputLayout.OutlinedBox w rodzicu
Sudip Sadhukhan
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.