Jak zmienić kolor pływającej etykiety TextInputLayout

W odniesieniu do nowego TextInputLayoutwydanego przez Google, jak zmienić kolor tekstu pływającej etykiety?

Ustawianie colorControlNormal, colorControlActivated, colorControlHighLightw stylach nie pomaga.

Oto co mam teraz:

Wypróbuj poniższy kod To działa w normalnym stanie

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

W kodzie TextLabel folderu stylów

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

Ustawiony na główny motyw aplikacji, działa tylko Podświetl tylko stan

 <item name="colorAccent">@color/Color Name</item>

Aktualizacja:

UnsupportedOperationException: Nie można przekonwertować na kolor: typ = 0x2 w interfejsie API 16 lub niższym

Rozwiązanie

Aktualizacja:

Czy korzystasz z biblioteki komponentów materiałów?

Możesz dodać poniższe linie do głównego motywu

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

czy też chcesz różne kolory w stanie noraml i stanie aktywowanym oraz z dostosowaniem postępuj zgodnie z poniższym kodem

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

Dodaj poniższy wiersz do głównego motywu, albo możesz ustawić styl na textinputlayout w swoim pliku xml

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

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

Znajdź odpowiedź, użyj android.support.design:hintTextAppearanceatrybutu, aby ustawić własny wygląd pływającej etykiety.

Przykład:

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

Nie trzeba używać android:theme="@style/TextInputLayoutTheme"do zmiany pływającego koloru etykiety, ponieważ wpłynie to na cały motyw małego TextView używanego jako etykieta. Zamiast tego możesz użyć app:hintTextAppearance="@style/TextInputLayout.HintText"gdzie:

<style name="TextInputLayout.HintText">
  <item name="android:textColor">?attr/colorPrimary</item>
  <item name="android:textSize">@dimen/text_tiny_size</item>
  ...
</style>

Daj mi znać, czy rozwiązanie działa :-)

Jak zmienić kolor tekstu pływającej etykiety?

Za pomocą biblioteki Material Components można dostosować TextInputLayoutkolor tekstu podpowiedzi za pomocą (wymaga wersji 1.1.0)

• W układzie:

  • app:hintTextColor atrybut: kolor etykiety, gdy jest zwinięta, a pole tekstowe jest aktywne
  • android:textColorHint atrybut: kolor etykiety we wszystkich innych stanach pól tekstowych (takich jak spoczynkowe i wyłączone)

<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>

• rozszerzenie stylu materiału Widget.MaterialComponents.TextInputLayout.* :

<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextColor">@color/mycolor</item>
    <item name="android:textColorHint">@color/text_input_hint_selector</item>
</style>

Domyślny selektor android:textColorHintto:

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

Ok, więc uznałem tę odpowiedź za bardzo pomocną i dziękuję wszystkim ludziom, którzy się do tego przyczynili. Ale żeby coś dodać. Przyjęta odpowiedź jest rzeczywiście poprawną odpowiedzią ... ALE ... w moim przypadku chciałem zaimplementować komunikat o błędzie pod EditTextwidżetem app:errorEnabled="true"i ta pojedyncza linia utrudniła mi życie. wydaje się, że to zastępuje motyw android.support.design.widget.TextInputLayout, który wybrałem , który ma inny kolor tekstu zdefiniowany przez android:textColorPrimary.

W końcu zdecydowałem się na zastosowanie koloru tekstu bezpośrednio do EditTextwidżetu. Mój kod wygląda mniej więcej tak:

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>

I mój widget:

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

Teraz wyświetla czarny kolor tekstu zamiast textColorPrimarybiałego.

Sugeruję utworzenie motywu stylu dla TextInputLayout i zmianę tylko koloru akcentu. Ustaw element nadrzędny na podstawowy motyw aplikacji:

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

W najnowszej wersji biblioteki obsługi (23.0.0+) TextInputLayoutpobiera następujący atrybut w formacie XML w celu edycji koloru pływającej etykiety:android:textColorHint="@color/white"

Zamiast odpowiedzi Brahmam Yamani wolę używać Widget.Design.TextInputLayout jako elementu nadrzędnego. Zapewnia to obecność wszystkich wymaganych elementów, nawet jeśli nie wszystkie zostaną nadpisane. W odpowiedzi Yamanisa aplikacja ulegnie awarii z nierozwiązywalnym zasobem, jeśli zostanie wywołane setErrorEnabled (true).

Po prostu zmień styl na następujący:

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

W moim przypadku dodałem to ” app:hintTextAppearance="@color/colorPrimaryDark"w widżecie TextInputLayout.

Aby zmienić kolor podpowiedzi i edytować tekst, podkreśl kolor: colorControlActivated

Aby zmienić kolor licznika znaków: textColorSecondary

Aby zmienić kolor komunikatu o błędzie: colorControlNormal

Aby zmienić odcień przycisku widoczności hasła: colorForeground

Aby uzyskać więcej informacji na temat TextInputLayout, przeczytaj 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>

Programowo możesz użyć:

/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);

/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};

/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})

Wyjaśnienie:

Uzyskaj wartość koloru int z zasobu kolorów (sposób prezentacji kolorów rgb używanych przez Androida). Napisałem ColorEnabled, ale tak naprawdę powinno być, dla tej odpowiedzi ColorHintExpanded & ColorViewCollapsed. W każdym razie jest to kolor, który zobaczysz, gdy podpowiedź widoku „TextInputLayout” będzie w stanie rozwiniętym lub zwiniętym; ustawisz go, używając następnej tablicy w funkcji „setDefaultHintTextColor” widoku. Odwołanie: Odwołanie do TextInputLayout - wyszukaj na tej stronie metodę „setDefaultHintTextColor”, aby uzyskać więcej informacji

Patrząc na powyższe dokumenty, możesz zobaczyć, że funkcje ustawiają kolory dla rozwiniętej i zwiniętej wskazówki za pomocą ColorStateList.

Dokumenty ColorStateList

Aby utworzyć ColorStateList, najpierw utworzyłem macierz ze stanami, które chcę, w moim przypadku state_enabled & state_disabled (których w TextInputLayout jest równa podpowiedzi rozwiniętej i podpowiedzi zwiniętej [nie pamiętam, w jakiej kolejności lol, w każdym razie znalazłem ją tylko wykonuję test]). Następnie przekazuję konstruktorowi ColorStateList tablice z wartościami całkowitymi zasobów kolorów, kolory te mają zgodność z macierzą stanów (każdy element w tablicy kolorów odpowiada odpowiedniej tablicy w macierzy stanów w tej samej pozycji). Tak więc pierwszy element tablicy kolorów będzie użyty jako kolor dla każdego stanu w pierwszej tablicy macierzy stanów (w naszym przypadku tablica ma tylko 1 element: stan włączony = stan rozwinięty wskazówki dla TextInputLayut). Ostatnie stany rzeczy mają wartości dodatnie / ujemne, a ty masz tylko wartości dodatnie,

Mam nadzieję, że to jest pomocne. Pa, miłego kodowania (:

powinieneś tutaj zmienić kolor

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

Teraz po prostu używasz colorAccenti colorPrimarybędzie działać idealnie.

Rozwiązuję problem. To jest układ ：

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

To jest styl:

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

Powinieneś użyć swojego motywu w aplikacji:

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
</application>

aby zmienić kolor etykiety tekstowej, gdy się na niej skupiasz. tzn. wpisując go. musisz dodać określić

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

Tylko uwaga: musisz dodać wszystkie te implementacje do głównego tematu.

Jego działa dla mnie ..... dodaj kolor podpowiedzi w 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>

Próbowałem przy użyciu Androida: textColorHint w android.support.design.widget.TextInputLayout działa dobrze.

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

  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>    

dodaj to do stylów i ustaw TextInputLayout Theam na App2 i będzie działać;)

<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 / wartości / styles.xml

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">#545454</item>
    <item name="colorControlActivated">#2dbc99</item>
    <item name="android:textSize">11sp</item>
</style>

Można użyć, app:hintTextColorjeśli używasz com.google.android.material.textfield.TextInputLayout, spróbuj tego

 <com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/app_name" 
     app:hintTextColor="@android:color/white">                   

     <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
 </com.google.android.material.textfield.TextInputLayout>

Wypróbuj poniższy kod To działa w normalnym stanie

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

W kodzie TextLabel folderu stylów

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

Z dokumentacji:

Wskazówka powinna być ustawiona na TextInputLayout, a nie na EditText. Jeśli wskazówka zostanie podana w podrzędnym polu EditText w formacie XML, TextInputLayout może nadal działać poprawnie; TextInputLayout użyje podpowiedzi EditText jako pływającej etykiety. Jednak przyszłe wywołania w celu modyfikacji podpowiedzi nie aktualizują podpowiedzi TextInputLayout. Aby uniknąć niezamierzonego zachowania, wywołaj setHint (CharSequence) i getHint () na TextInputLayout zamiast na EditText.

Więc ustawiłem android:hinti app:hintTextColorwłączałem TextInputLayout, a nie włączałem TextInputEditTexti działało.

Bo trzeba dodać colorControlNormal, colorControlActivated, colorControlHighLightelementy do tematu głównego aplikacji:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlActivated">@color/yellow_bright</item>
        <item name="colorControlNormal">@color/yellow_black</item>

    </style>