How to style the EditText widget in a TextInputLayout

Question

Have just begun styling and theming an app.

I have many EditTexts in TextInputLayouts in an AppCompatActivity.

My questions are:

Not sure what the line (the blue line above) in the EditText widget is called, just referring it as 'ruler'. How can the rulers (invisible above), be made visible, and in any custom color. Presently, the ruler shows only on tapping the EditText.
The EditText cursor does not show, how can it be made visible?
How can the button 'Add' above be customized regarding its background color and text color?
How can the focus be set to the first EditText initially?
How can the TextInputLayout's hint color be changed after it shrinks and flies to the top? (Presently, blue.)
Is the default Android font Roboto? How can I change the font to anything that's available out there, 'real quick'?

Greatly appreciate any help or pointers.

Corresponding code fragments:

Layout file

            <TextView
            android:id="@+id/pocLabel"
            style="@style/DialogLabelColor"
            android:text="Business Owner"/>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tilPOCFName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/pocLabel">

            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/POCFName"
                style="@style/InputDialogText"
                android:hint="First name (REQUIRED)"
                android:inputType="textCapWords"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tilPOCLName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tilPOCFName"
            android:textColor="#000000">

            <EditText
                android:id="@+id/POCLName"
                style="@style/InputDialogText"
                android:hint="Last name"
                android:inputType="textCapWords"/>
        </android.support.design.widget.TextInputLayout>

styles.xml

<!--
    Base application theme, dependent on API level. This theme is replaced
    by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
    <!--
        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>

<style name="activated" parent="AppBaseTheme"></style>
<!-- Application theme -->
<style name="MyThemeNavy" parent="Theme.AppCompat.NoActionBar">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="windowActionBar">false</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:colorPrimary">@color/primaryColor</item>
    <item name="android:colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:colorAccent">@color/accentColor</item>
    <item name="android:textColor">@color/main_list_text_color</item>
    <item name="android:textColorHint">@color/main_list_text_color</item>
    <item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item>

</style>

<style name="Base.Widget.AppCompat.DrawerArrowToggle." parent="Base.Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">#FFF</item>
</style>

<style name="InfoDlgTextLHS" parent="AppBaseTheme">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textAppearance">?android:attr/textAppearanceSmall</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@color/main_list_text_color</item>
</style>
<style name="InputDialogText" parent="MyThemeNavy">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@color/main_list_text_color</item>
</style>
<style name="InfoDlgTextRHS" parent="AppBaseTheme">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textAppearance">?android:attr/textAppearanceSmall</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/main_list_text_color</item>
</style>
<style name="DialogLabelColor" parent="MyThemeNavy">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">4dp</item>
    <item name="android:padding">10dp</item>
    <item name="android:background">@drawable/dialog_label_background</item>
    <item name="android:textColor">@color/main_list_text_color_inverse</item>
    <item name="android:textStyle">bold</item>
</style>
<style name="MyThemeNavy.Dialogs" parent="MyThemeNavy">
    <item name="android:textColor">@color/main_list_text_color</item>
    <item name="android:textColorHint">@color/main_list_text_color</item>
</style>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primaryColor">#006989</color>
<color name="primaryColorDark">#FFFFFF</color>
<color name="accentColor">#FFFFFF</color>
<color name="colorBackground">#B1C1C0</color>
<!-- Drawer -->
<color name="mainDrawerBackground">#564639</color>

<!-- Main (non-drawer) lists -->
<color name="commonMainListsBackground">#FFFFFF</color>
<color name="main_list_text_color">#000000</color>
<color name="list_item_pressed_color">#CADAFF</color>
<color name="list_item_color">#FFFFFF</color>
<color name="drawer_list_item_pressed_color">#E4FDE1</color>
<color name="drawer_list_item_color">@color/mainDrawerBackground</color>
<color name="divider_color">#DFF8EB</color>

<!-- Counters -->
<color name="distance_counter_color">#FE5F55</color>
<color name="deals_counter_color">#388659</color>

<!-- Information dialog -->
<color name="info_content_color">#FFFFFF</color>
<color name="primary_material_dark">#9e9e9e</color>
<color name="primary_dark_material_dark">#cad7ff</color>
<color name="accent_material_dark">#3469ff</color>
<color name="background_material_dark">#344055</color>
<color name="foreground_material_dark">#ffffff</color>
<color name="colorPrimaryDark">#044389</color>

<!-- Input dialogs -->
<color name="input_dialog_backgroud">#6DAEDB</color>
<color name="main_list_text_color_inverse">#FFFFFF</color>

AndroidManifest.xml

        <activity
        android:name=".xxx.xxxCRUActivity"
        android:label="@string/title_activity_add"
        android:theme="@style/MyThemeNavy.Dialogs">
        <intent-filter>
            <action android:name="android.intent.action.VIEW"/>

            <category android:name="android.intent.category.DEFAULT"/>
        </intent-filter>
    </activity>

Thank you!

IF you want to change Hiint color of text input layout change color of colorAccent in color.xml file. — Chirag Savsani, Dec 24 '15 at 12:10
Post your your complete style.xml, color.xml and layoutfile here. — Chirag Savsani, Dec 24 '15 at 12:35
Thanks @ChiragSavsani. Posted the complete `colors` and `styles` XML. My layout file is way too big for this post. — Narayana J, Dec 24 '15 at 13:20

score 9 · Accepted Answer · answered Dec 24 '15 at 12:19

9

Regarding your TextInputLayout, create a style for it

<style name="InputLayout" parent="TextAppearance.AppCompat">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorHint">@color/grey</item>
        <item name="colorAccent">@color/grey</item>
        <item name="colorControlNormal">@color/grey</item>
        <item name="colorControlActivated">@color/green</item>
    </style>

This gives you some flexibility for styling the AppCompatEditText. Don't forget to add the style to the TextInputLayout.

 <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/InputLayout">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint" />

    </android.support.design.widget.TextInputLayout>

answered Dec 24 '15 at 12:19

Niels Masdorp

2,534
2
18
31

Thanks, @Niels Masdorp. Getting an exception though, upon using your suggestion: `Caused by: java.lang.UnsupportedOperationException: Can't convert to color: type=0x2 at android.content.res.TypedArray.getColor(TypedArray.java:327)` Not sure why. My activity, in the Manifest, is using a custom theme (code above). Is this error because of that? – Narayana J Dec 24 '15 at 14:00
My mistake, the above exception. The widget was `EditText` instead of `AppCompatEditText`. – Narayana J Dec 24 '15 at 14:09
+1 for your suggestion, @Niels Masdorp: the hint color styling works. Not sure what the `colorControl` attributes are doing, though. Are they for the ruler? – Narayana J Dec 24 '15 at 14:18
From [Set EditText cursor color](http://stackoverflow.com/questions/7238450/set-edittext-cursor-color) : `@null` Works! – Narayana J Dec 24 '15 at 14:34
I'm sure there are more attributes, these are only the ones I've worked with. Glad to have helped! Maybe split up your questions to get better response to the rest of them? I might take a look later though. – Niels Masdorp Dec 24 '15 at 15:00
What if i just want to change only color of "(REQUIRED)" is it possible ? Actually, i want to put start in Red color. .! how can i achieve with TextInputLayout ? – Mohit Kacha May 22 '17 at 11:32

How to style the EditText widget in a TextInputLayout

1 Answers1