How to disable padding on TextInputLayout?

笑着哭i 提交于 2019-12-09 02:28:00

问题


There appears to be left padding automatically added when using a TextInputLayout to wrap an EditText as you can see in the screenshot below.

There is no padding added to the EditText in the layout XML, but when the view is rendered there appears to be left padding on the EditText. You can see this when comparing the TextView below the TextInputLayout.

How do I disable this left padding from being added?

Thank you!


回答1:


TextInputLayout is a LinearLayout, so you should be able to specify a negative margin or padding, e.g.

            android:layout_marginLeft="-2dp"
            android:layout_marginStart="-2dp"

that will offset the space you're trying to eliminate.

The -2dp value is just a guess; tune the value until it lines up the way you want.




回答2:


I managed to remove that left space by making a copy of the original theme of the edittext background

res/drawable/my_edit_text_material.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
   android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
   android:insetTop="@dimen/abc_edit_text_inset_top_material"
   android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">

<selector>
    <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
    <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
    <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>

</inset>

res/drawable-v21/my_edit_text_material.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
    <item android:state_enabled="false">
        <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
            android:tint="?attr/colorControlNormal"
            android:alpha="?android:attr/disabledAlpha"/>
    </item>
    <item android:state_pressed="false" android:state_focused="false">
        <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
            android:tint="?attr/colorControlNormal"/>
    </item>
    <item>
        <nine-patch android:src="@drawable/abc_textfield_activated_mtrl_alpha"
            android:tint="?attr/colorControlActivated"/>
    </item>
</selector>
</inset>

in the two files delete:

android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material" android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"


Create a new style for your editText and add it as background

/res/values/styles.xml

<resources>

<!-- Other styles . -->

<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:background">@drawable/my_edit_text_material</item>
</style>
</resources>

Add the style to your editText

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_lastname"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:layout_marginLeft="0dp"
    android:layout_marginStart="0dp"
    android:textColorHint="@color/Cool_Gray_2_C"
    app:layout_constraintEnd_toStartOf="@+id/profile_guideline_end"
    app:layout_constraintStart_toStartOf="@+id/profile_guideline_start"
    app:layout_constraintTop_toBottomOf="@+id/input_layout_firstname" >

    <EditText
        style="@style/AppTheme.EditText"
        android:id="@+id/txfLastname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/last_name"
        android:inputType="textPersonName"
        android:textColor="@color/Cool_Gray_2_C"
        android:textColorHint="@color/Cool_Gray_2_C"
        android:textSize="17sp" />

</android.support.design.widget.TextInputLayout>

That is the way I found removing the left and right space.

I hope help, thanks




回答3:


You can just set the start and end padding on the inner EditText to 0dp.

<com.google.android.material.textfield.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingStart="0dp"
    android:paddingEnd="0dp" />

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

Here's a screenshot with Show Layout Bounds turned on so you can see that the hints go all the way to the edge of the view.




回答4:


The horizontal space on the left and right of the EditText default drawable is controlled by the abc_edit_text_inset_horizontal_material dimension. You can confirm that by looking at the abc_edit_text_material.xml drawable file, which represents AppCompat's default EditText background. To remove the space completely you can just set the dimension to 0 by specifing the dimension with exact same name inside your own project's dimens.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
    ...
</resources>

However, there is a catch. AppCompat library will only use it's own abc_edit_text_material.xml background if the host OS doesn't support material design. So If you're running your app on Android 4, you'll see that side margins disappear after you add the dimension mentioned above. If, however, you launch your app on say Android 10, you'll see that margins are still there. That is because on newer Android versions, compat library will actually prefer background drawable specified inside the OS itself.

So you need to force all of your EditTexts to use abc_edit_text_material.xml background specified inside the AppCompat library. Luckily, you can do that just by adding one line to your syles.xml file:

styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="editTextBackground">@drawable/abc_edit_text_material</item>
        ...
    </style>
    ...
</resources>

Any Theme.AppCompat.* will do as a parent theme and of course you have to use this theme as your app's theme in order to get any effect.

This solution uses private AppCompat identifiers (Android Studio will complain about this), but I still think this solution is much cleaner than using negative margins.




回答5:


With the TextInputLayout included in the Material Components Library you can use a custom style to reduce the padding.

Just use something like:

<com.google.android.material.textfield.TextInputLayout
       ....
       android:hint="Hint text"       
       style="@style/My.TextInputLayout.FilledBox.Padding" >

Then you can define a custom style for the EditText using the materialThemeOverlay attribute:

  <style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="materialThemeOverlay">@style/MyThemeOverlayFilledPadding</item>
  </style>

  <style name="MyThemeOverlayFilledPadding">
    <item name="editTextStyle">@style/MyTextInputEditText_filledBox_padding</item>
  </style>

  <style name="MyTextInputEditText_filledBox_padding" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
    <!-- left and right padding -->
    <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>

    <!-- top and bottom padding -->
    <item name="android:paddingTop">28dp</item>
    <item name="android:paddingBottom">12dp</item>
  </style>

Here the final result:

Note: it requires the version 1.1.0 of the Material Components library.



来源:https://stackoverflow.com/questions/41403193/how-to-disable-padding-on-textinputlayout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!