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!

Answer 1

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>