How to remove padding for the bottom line of the TextInputEditText

Question

I'm trying to remove all padding of a TextInputLayout and a TextInputEditText, but with padding=0dp the line at the bottom of the TextInputEditText keeps it padding left and right. How I can remove this padding?

This is the xml code that I've used.

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/ti_input_otp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:hint="@string/zp_otpfragment_input_otp"
        android:padding="0dp"
        android:theme="@style/TextInputLayout"
        app:hintTextAppearance="@style/FloatingLabel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_input_otp_description">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/et_input_otp"
            android:layout_width="match_parent"
            android:layout_height="@dimen/text_input_layout_height"
            android:layout_marginTop="16dp"
            android:ems="10"
            android:gravity="start|center_vertical"
            android:imeOptions="actionNext"
            android:importantForAutofill="no"
            android:inputType="numberSigned"
            android:labelFor="@string/zp_otpfragment_input_otp"
            android:lines="1"
            android:padding="0dp"
            android:singleLine="true"
            android:textSize="@dimen/text_info_size"
            android:theme="@style/InputText" />
    </com.google.android.material.textfield.TextInputLayout>

The styles are:

<style name="FloatingLabel" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/colorPrimary</item>
    </style>

    <style name="TextInputLayout" parent="AppTheme">
        <item name="boxStrokeColor">@color/colorPrimary</item>             <!-- Line Color -->
        <item name="android:textColorHint">@color/colorGray</item>      <!-- Hint Color -->
        <item name="boxStrokeWidth">1dp</item>
        <item name="boxBackgroundColor">@color/colorCeruleanBlue</item>
    </style>

    <style name="InputText" parent="AppTheme">
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:backgroundTint">@color/colorCeruleanBlue</item>
        <item name="colorControlNormal">@color/colorCeruleanBlue</item>  <!-- cursor y línea normal-->
        <item name="colorControlActivated">@color/colorAccent</item>        <!-- cursor y línea con foco-->
        <item name="colorControlHighlight">@color/colorAccent</item>
    </style>

Thank you

Answer 1

You can use your own custom style for TextInputLayout as below:

1. Your layout:

   <com.google.android.material.textfield.TextInputLayout
           ....
           android:hint="Your hint text"       
           style="@style/My.TextInputLayout.Theme" >
   

2. Then define your custom theme as below:

    <style name="My.TextInputLayout.Theme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
        <item name="materialThemeOverlay">@style/MyThemePadding</item>
      </style>
   
      <style name="MyThemePadding">
        <item name="editTextStyle">@style/MyTextInputEditText_padding</item>
      </style>
   
      <style name="MyTextInputEditText_padding" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
        <!-- Set left and right padding here -->
        <item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
        <item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
        <item name="android:paddingLeft">2dp</item>
        <item name="android:paddingRight">2dp</item>
   
        <!-- Set top and bottom padding here -->
        <item name="android:paddingTop">28dp</item>
        <item name="android:paddingBottom">12dp</item>
      </style>