Change Version Of Material 1.1.0 to 1.3.0

Question

And my Second Question : I use a TextInputLayout :

<com.google.android.material.textfield.TextInputLayout              
  style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColorHint="@color/LightBlue"              
 android:theme="@style/ThemeOverlay.AppTheme.TextInputEditText.Outlined"
                app:boxStrokeColor="@color/selector"
                app:boxStrokeWidth="3dp"
                app:startIconTint="@color/white">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/numberOfPlayer_txt"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:inputType="numberDecimal"
                    android:textColor="@color/gold" />

            </com.google.android.material.textfield.TextInputLayout>

The Styles file

 <style name="AppTheme" 
  parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:windowBackground">@color/Thistle</item>
                   <!-- use in get player information -->
       <item name="CustomTextStyle">@style/Widget.App. TextInputLayout. 
       OutlinedBox</item>
  </style>


    <style name="ThemeOverlay.AppTheme.TextInputEditText.Outlined" 
     parent="">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="boxCornerRadiusBottomEnd">20dp</item>
        <item name="boxCornerRadiusBottomStart">20dp</item>
        <item name="boxCornerRadiusTopEnd">20dp</item>
        <item name="boxCornerRadiusTopStart">20dp</item>
        <item name="android:hint">Number of player</item>
        <item name="hintTextColor">@color/card1</item>
        <item name="startIconDrawable">@drawable/ic_people</item>
    </style>

    <style name="Widget.App.TextInputLayout.OutlinedBox" 
    parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/player_information</item>
        <item name="boxCornerRadiusBottomEnd">15dp</item>
        <item name="boxCornerRadiusBottomStart">15dp</item>
        <item name="boxCornerRadiusTopEnd">15dp</item>
        <item name="boxCornerRadiusTopStart">15dp</item>
        <item name="android:textColorHint">@color/white</item>
        <item name="startIconDrawable">@drawable/player</item>
        <item name="startIconTint">@color/gold</item>
        <item name="elevation">5dp</item>
        <item name="boxStrokeWidth">2dp</item>
        <itemname="materialThemeOverlay">@style/ThemeOverlay.App. 
         TextInputEditText.OutlinedBox</item>
        <item name="hintTextColor">@color/AntiqueWhite</item>
        <!-- .... -->
    </style>

    <style name="ThemeOverlay.App.TextInputEditText.OutlinedBox"  
    
   parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
        <!-- to change the cursor color -->
        <item name="colorControlActivated">@color/white</item>
    </style>

That is my selector file

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/DarkSeaGreen" 
    android:state_focused="true"/>
    <item android:color="@color/white"/>
    </selector>

and Attrs

 <resources>
   <attr name="customTextInputStyle" format="reference" />
   <attr name="CustomTextStyle" formet ="reference"/>
   </resources>

When I change the version of the material 1.1.0 to 1.3.0 ,The shape of The text input layout1 I created before is distorted. It became wider than it was before. I could not find the reason for this change.As you can see in the picture, the text inputlayout is very wide and the hinttext still looks black on the back.

Answer 1

The main issue is in the ThemeOverlay. You have to add the parent ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.

<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="colorPrimary">@color/...</item>
</style>

It is needed because the default style Widget.MaterialComponents.TextInputLayout.OutlinedBox which you are extending has defined a own materialThemeOverlay and without the parent dependency you are losing the default behaviour.

Also in your xml layout remove android:theme="@style/ThemeOverlay.AppTheme.TextInputEditText.Outlined". You don't need it because you are already using materialThemeOverlay in the style and the theme defined in the xml layout overrides it and this theme overlay is wrong.

Also:

• use a min width because you are using a big corner radius 15dp

        <com.google.android.material.textfield.TextInputLayout
            android:minWidth="150dp"
            android:layout_width="wrap_content"

• Finally the color used by the hint:

        <item name="android:textColorHint">@color/red600Dark</item>
        <item name="hintTextColor">@color/teal_700</item>

Final layout:

   <com.google.android.material.textfield.TextInputLayout              
      style="@style/Widget.App.TextInputLayout.OutlinedBox"
            android:minWidth="150dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:startIconTint="@color/white">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/numberOfPlayer_txt"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:inputType="numberDecimal"
                    android:textColor="@color/gold" />

   </com.google.android.material.textfield.TextInputLayout>

with:

<style name="Widget.App.TextInputLayout.OutlinedBox"
    parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_stroke_selector</item>
    <item name="boxCornerRadiusBottomEnd">15dp</item>
    <item name="boxCornerRadiusBottomStart">15dp</item>
    <item name="boxCornerRadiusTopEnd">15dp</item>
    <item name="boxCornerRadiusTopStart">15dp</item>
    <item name="startIconDrawable">@drawable/ic_...</item>
    <item name="startIconTint">@color/...</item>
    <item name="elevation">5dp</item>
    <item name="boxStrokeWidth">2dp</item>
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputEditText.OutlinedBox</item>
    <item name="android:textColorHint">@color/....</item>
    <item name="hintTextColor">@color/....</item>
</style>

<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="colorPrimary">@color/....</item>
</style>