CODEWITHSUNDEEP
androidandroid-edittextstylesmaterial-designandroid-textinputlayout
Stephan Henningsen
Stephan Henningsen

Reputation: 3783

How to apply global custom style to android.support.design.widget.TextInputEditText?

I have my AppTheme defined in style.xml where I apply a custom style globally for all my app's TextView, EditText, Button etc.

Now I'd like to do the same for android.support.design.widget.TextInputEditText but how?

It does not extend EditText so that style is ignored.

Here's what I've got:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>

    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary</item>
        <item name="colorAccent">@color/accent</item>

        <!-- Globally override default widget styles with custom -->
        <item name="android:textViewStyle">@style/App.TextView</item>
        <item name="android:editTextStyle">@style/App.EditText</item>
        <item name="android:buttonStyle">@style/App.Button.Primary</item>
    </style>

    <style name="App.TextView" parent="@android:style/Widget.TextView">
        <item name="android:textColor">@color/text</item>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textSize">@dimen/textsize_normal</item>
    </style>

    <style name="App.EditText" parent="@android:style/Widget.EditText">
        <item name="android:textColor">#f00</item>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textSize">@dimen/textsize_xxxlarge</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColorHint">@color/text_hint</item>
    </style>

    <style name="App.Button" parent="@android:style/Widget.Button">
        <item name="android:textSize">@dimen/button_text_size</item>
        <item name="android:fontFamily">sans-serif-medium</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="App.Button.Primary">
        <item name="android:background">@drawable/button_primary_background</item>
        <item name="android:height">@dimen/button_primary_height</item>
        <item name="android:width">@dimen/button_primary_width</item>
        <item name="android:paddingLeft">@dimen/padding_normal</item>
        <item name="android:paddingRight">@dimen/padding_normal</item>
        <item name="android:textColor">@color/button_primary_text</item>
    </style>

    ...

Upvotes: 14

Views: 2410

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363687

With the Material theme you can use the textInputStyle to style the com.google.android.material.textfield.TextInputLayout component.

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
   ....
   <item name="textInputStyle">@style/MyTextInputLayoutStyle</item>
</style>

<style name=MyTextInputLayoutStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
     ....
</style>

If you would like to customize the TextInputEditText just add:

<style name=MyTextInputLayoutStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
     ....
    <item name="materialThemeOverlay">
      @style/MyThemeOverlayTextInputEditTextFilledBox</item>
</style>

<style name="MyThemeOverlayTextInputEditTextFilledBox">
   <item name="editTextStyle">@style/MyTextInputEditText</item>
</style>

For example:

  <style name="MyTextInputEditText" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:textAppearance">myTextAppearance</item>
    ...
  </style>

Upvotes: 6

Daniel Wilson
Daniel Wilson

Reputation: 19824

The new MDC components allow a lot of flexibility here but it is still quite strange. I wanted a custom font for all TextInputEditTexts, and the filled (default) style. The only way it would work for me is by specifying the font on the TextInputEditText using the global style attribute:

<!-- Base application theme. -->
<style name="MyAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="textInputStyle">@style/MyTextField.Outlined</item>
    <item name="editTextStyle">@style/MyEditTextFont</item>
</style>

<style name="MyEditTextFont" parent="Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:fontFamily">@font/my_font</item>
</style>
<style name="MyTextField" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"/>
<style name="MyTextField.Outlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox"/>

If for example you don't specify the editTextStyle, then the textInputStyle does work but has crazy missing padding. Anyway I recommend using both of these fields and styling them both as necessary.

Upvotes: 0

Related Questions