Resolved: 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:

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

Your layout:

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

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>

If you have better answer, please add a comment about this, thank you!

Resolved: How to remove padding for the bottom line of the TextInputEditText

Resolved: Kivy widget hierarchy not behaving as expected

Resolved: Pandas Groupby Get Values from Previous Group

Resolved: Can’t access static methods from outside until JavaScript’s static block is over?

Leave A Reply