Customizing the appearance of the TextInputLayout
suggest changeYou can customize the appearance of the TextInputLayout
and its embedded EditText
by defining custom styles in your styles.xml
. The defined styles can either be added as styles or themes to your TextInputLayout
.
Example for customizing the hint appearance:
styles.xml
:
<!--Floating label text style--> <style name="MyHintStyle" parent="TextAppearance.AppCompat.Small"> <item name="android:textColor">@color/black</item> </style> <!--Input field style--> <style name="MyEditText" parent="Theme.AppCompat.Light"> <item name="colorControlNormal">@color/indigo</item> <item name="colorControlActivated">@color/pink</item> </style>
To Apply Style update your TextInputLayout And EditText as follows
<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:hintTextAppearance="@style/MyHintStyle"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/Title" android:theme="@style/MyEditText" /> </android.support.design.widget.TextInputLayout>
Example to customize the accent color of the TextInputLayout
. The accent color affects the color of the baseline of the EditText
and the text color for the floating hint text:
styles.xml
:
<style name="TextInputLayoutWithPrimaryColor" parent="Widget.Design.TextInputLayout"> <item name="colorAccent">@color/primary</item> </style>
layout file:
<android.support.design.widget.TextInputLayout android:id="@+id/textInputLayout_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/TextInputLayoutWithPrimaryColor"> <android.support.design.widget.TextInputEditText android:id="@+id/textInputEditText_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_hint_password" android:inputType="textPassword" /> </android.support.design.widget.TextInputLayout>
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents