TextInputLayout: color diferente para la etiqueta de indicación cuando no está enfocado

Lo que quiero hacer:

Cuando se utiliza un EditText incrustado en un TextInputLayout Quiero …

  1. Establezca el Color de la etiqueta en VERDE cuando está des-enfocado y flotando por encima del EditText porque el usuario ya ha ingresado algún valor
  2. Establezca el Color de la etiqueta en ROJO cuando está des-enfocado y se encuentra dentro del EditText, porque el usuario aún no ha ingresado un valor
  3. No quiero cambiar el color de texto de la pista de todos mis EditTexts a RED, pero sólo cuando están envueltos en un TextInputLayout (no necesito un enfoque general – un enfoque específico como establecer un tema / estilo para cada TextInputLayout en El XML de la disposición estaría bien)
  4. Preserve (es decir, no cambie) el color de acento (AMARILLO) usado para colorear la etiqueta flotante cuando el usuario ha enfocado el campo.

Lo que he intentado:

Establecer el siguiente como un tema / estilo en el TextInputLayout satisface 1. pero no 2.

<style name="FloatingLabel" parent="Widget.Design.TextInputLayout"> <item name="android:textColorHint">@color/red</item> </style> 

Establecer un color específico en mi EditText incrustado que cambia el texto de la pista a otro color:

  android:textColorHint="@color/text_placeholder_gray" 

En realidad provoca una superposición de textos de sugerencia cuando la etiqueta se mueve de su posición flotante de nuevo en el Editado como una pista (es decir, sin texto).

Estableciendo esto:

 <style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance"> <item name="android:textColor">@color/main_color</item> 

En el TextInputLayout:

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

Cambia el color de la etiqueta de indicación pero también lo hace para el estado enfocado, lo que significa que 4 no está satisfecho.

Y puesto que una imagen dice más que un tousand las palabras (todos los campos están en estado no enfocado):

Introduzca aquí la descripción de la imagen

¿Cómo lograr una configuración que satisface los criterios 1-4?

Tuve un problema similar: Tenía que implementar un diseño de entrada de texto en el que la etiqueta tiene diferentes colores para vacío (cuando no hay texto introducido en el texto de edición), "lleno" y estado enfocado. Mi principal problema era cómo diferenciar entre el vacío y el estado lleno ya que establecer un color diferente para el estado enfocado ya era fácil de usar selectores. Al final decidí definir un estado de "texto vacío" personalizado e implementar mi diseño de entrada de texto personalizado (que amplía el diseño de entrada de texto normal).

Aquí está un código:

En res / values ​​/ attrs.xml:

 <?xml version="1.0" encoding="utf-8"?> <resources> ... <!-- Custom state for the text input layout to determine whether the label is shown above some text or not --> <declare-styleable name="EmptyTextState"> <attr name="state_empty_text" format="boolean"/> </declare-styleable> </resources> 

El diseño de entrada de texto personalizado:

 public class EmptyStateTextInputLayout extends TextInputLayout { private boolean emptyText = true; private static final int[] EMPTY_TEXT_STATE = new int[]{R.attr.state_empty_text}; public EmptyStateTextInputLayout(Context context) { super(context); } public EmptyStateTextInputLayout(Context context, AttributeSet attrs) { super(context, attrs); } public EmptyStateTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected int[] onCreateDrawableState(int extraSpace) { int[] state = super.onCreateDrawableState(extraSpace + 1); if (emptyText) { mergeDrawableStates(state, EMPTY_TEXT_STATE); } return state; } public void setEmptyTextState(boolean emptyTextState) { this.emptyText = emptyTextState; refreshDrawableState(); } @Override public void addView(View child, int index, ViewGroup.LayoutParams params) { if (child instanceof EditText) { EditText editText = (EditText) child; if (!TextUtils.isEmpty(editText.getText())) { setEmptyTextState(false); } editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { if (!TextUtils.isEmpty(editable)) { setEmptyTextState(false); } else { setEmptyTextState(true); } } }); } super.addView(child, index, params); } } 

Selector XML para establecer el color de la etiqueta en diferentes estados (res / color / input_field_floating_label.xml):

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:color="@color/focused_text_color" android:state_focused="true" /> <item android:color="@color/placeholder_color" app:state_empty_text="true"/> <item android:color="@color/primary_text_color"/> <!-- default color --> </selector> 

Estilo para la disposición de texto de entrada (en res / values ​​/ styles.xml):

 <style name="EditTextLayout"> ... <item name="android:textColorHint">@color/input_field_floating_label</item> </style> 

Tema y estilo para el texto de edición (todavía en res / values ​​/ styles.xml):

 <style name="EditTextTheme"> ... <item name="android:textColorHint">@color/input_field_floating_label</item> </style> <style name="EditText"> <item name="android:theme">@style/EditTextTheme</item> ... </style> 

Uso:

 <com.package.path.widget.EmptyStateTextInputLayout style="@style/DarkEditTextLayout" android:layout_height="wrap_content" android:layout_width="match_parent" ... > <EditText style="@style/EditText" android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.package.path.widget.EmptyStateTextInputLayout> 

Recomiendo esta publicación de blog para tener una idea de trabajar con estados personalizados: http://code.neenbedankt.com/example-of-custom-states-in-android-components/

  • Aplicación de un tema a v7 Support Action Bar
  • Enlace de datos con atributos temáticos
  • Android Studio: Rendering Problems Faltan estilos-tema correcto elegido para este diseño, No se pudo encontrar estilo con id
  • ¿Cómo se procesan los estilos predeterminados de Android (en particular, ButtonBar y ButtonBar.Button)?
  • Cómo utilizar SearchView de tema oscuro en el tema Light Appcompat
  • Android cómo obtener AppCompat.Translucent tipo de tema con barra de acción de apoyo?
  • Android: cómo usar el color del estilo en XML de otro diseño
  • Adición de una barra de acción a Theme.Black.NoTitleBar Android
  • Cambiar el fondo popupMenu en Android
  • ¿El panel de vista previa del estudio de Android no representa ActionBar?
  • Cambiar el teclado Android L introduzca el color de la tecla
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.