android - TextInputLayout: Different color for hint label when not focused -


what want do:

when using edittext embedded in textinputlayout want ...

  1. set color of label green when it's de-focused , floating above edittext because user has entered value
  2. set color of label red when it's de-focused , located inside edittext, because user has not yet entered value
  3. i not want change hint text color of edittexts red, when they're wrapped in textinputlayout (i don't need general approach - specific approach setting theme/style each textinputlayout in layout xml fine)
  4. preserve (i.e. don't change) accent color (yellow) used color floating label when user has focused field.

what have tried:

setting below theme/style on textinputlayout satisfy 1. not 2.

<style name="floatinglabel" parent="widget.design.textinputlayout">     <item name="android:textcolorhint">@color/red</item> </style> 

setting specific color on embedded edittext changes hint text color:

 android:textcolorhint="@color/text_placeholder_gray" 

actually causes overlap of hint texts when label moved it's floating position edittext hint (i.e. no text).

setting this:

<style name="textappearence.app.textinputlayout" parent="@android:style/textappearance"> <item name="android:textcolor">@color/main_color</item> 

on textinputlayout:

 <android.support.design.widget.textinputlayout   ...    app:hinttextappearance="@style/textappearence.app.textinputlayout" > 

changes hint label color focused state - means 4 not satisfied.

and since picture says more tousand words (all fields in non-focused state):

enter image description here

how achieve setup satisfies criteria 1-4 ?

i had similar problem: needed implement text input layout in label has different colours empty (when there no text entered in edit text), "filled" , focused state. main problem how differentiate between empty , filled state setting different colour focused state easy using selectors. in end decided define custom "empty text" state , implement custom text input layout (which extends normal text input layout).

here code:

in res/values/attrs.xml:

<?xml version="1.0" encoding="utf-8"?> <resources>  ...      <!-- custom state text input layout determine whether label shown above text or not -->     <declare-styleable name="emptytextstate">         <attr name="state_empty_text" format="boolean"/>     </declare-styleable>  </resources> 

the custom text input layout:

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);     } } 

xml selector set colour of label in different states (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> 

style input text layout (in res/values/styles.xml):

<style name="edittextlayout">     ...     <item name="android:textcolorhint">@color/input_field_floating_label</item> </style> 

theme , style edit text (still in 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> 

usage:

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

i recommend blog post idea of working custom states: http://code.neenbedankt.com/example-of-custom-states-in-android-components/


Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

android - CoordinatorLayout, FAB and container layout conflict -