android - TextInputLayout: Different color for hint label when not focused -
what want do:
when using edittext embedded in textinputlayout want ...
- set color of label green when it's de-focused , floating above edittext because user has entered value
- set color of label red when it's de-focused , located inside edittext, because user has not yet entered value
- 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)
- 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):
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
Post a Comment