web-dev-qa-db-fra.com

Comment désactiver le remplissage sur TextInputLayout?

Il semble y avoir un remplissage ajouté automatiquement lors de l'utilisation d'un TextInputLayout pour envelopper un EditText comme vous pouvez le voir dans la capture d'écran ci-dessous.

enter image description here

Aucun remplissage n'est ajouté au EditText dans le XML de mise en page, mais lorsque la vue est rendue, il semble qu'il reste du remplissage sur le EditText. Vous pouvez le voir en comparant le TextView sous le TextInputLayout.

Comment désactiver l'ajout de ce remplissage gauche?

Je vous remercie!

androidandroid-layoutmaterial-designandroid-textinputlayout
23
dazza5000

TextInputLayout est un LinearLayout, vous devriez donc être en mesure de spécifier une marge négative ou un remplissage, par exemple.

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

qui compensera l'espace que vous essayez d'éliminer.

Le -2dp la valeur n'est qu'une supposition; ajustez la valeur jusqu'à ce qu'elle s'aligne comme vous le souhaitez.

14
kris larson

Vous pouvez simplement définir le remplissage de début et de fin du EditText interne sur 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>

Voici une capture d'écran avec Afficher les limites de mise en page activé pour que vous puissiez voir que les astuces vont jusqu'au bord de la vue.

EditTextNoPadding

5
Andrew Orobator

J'ai réussi à supprimer cet espace laissé en faisant une copie du thème original de l'arrière-plan edittext

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>

dans les deux fichiers supprimer:

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

Créez un nouveau style pour votre editText et ajoutez-le en arrière-plan

/ 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>

Ajoutez le style à votre 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>

C'est ainsi que j'ai trouvé la suppression des espaces gauche et droit.

J'espère de l'aide, merci

2
Carlos

Avec le TextInputLayout inclus dans la Material Components Library vous pouvez utiliser un style personnalisé pour réduire le rembourrage.

Utilisez simplement quelque chose comme:

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

Vous pouvez ensuite définir un style personnalisé pour le EditText en utilisant l'attribut materialThemeOverlay:

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

Voici le résultat final:

enter image description hereenter image description here

Remarque: il nécessite la version 1.1.0 de la bibliothèque des composants de matériaux.

2
Gabriele Mariotti

L'espace horizontal à gauche et à droite du dessin par défaut EditText est contrôlé par le abc_edit_text_inset_horizontal_material dimension. Vous pouvez le confirmer en consultant le abc_edit_text_material.xml fichier dessinable, qui représente l'arrière-plan EditText par défaut d'AppCompat. Pour supprimer complètement l'espace, vous pouvez simplement définir la dimension à 0 en spécifiant la dimension avec exactement le même nom à l'intérieur de votre propre projet dimens.xml fichier:

<?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>

Cependant, il y a un hic. La bibliothèque AppCompat n'utilisera que sa propre abc_edit_text_material.xml arrière-plan si le système d'exploitation hôte ne prend pas en charge la conception matérielle. Donc, si vous exécutez votre application sur Android 4, vous verrez que les marges latérales disparaissent après avoir ajouté la dimension mentionnée ci-dessus. Si, cependant, vous lancez votre application sur say Android 10, vous verrez que les marges sont toujours là. En effet, sur les versions plus récentes Android, la bibliothèque compat préférera en fait le fond dessinable spécifié dans le système d'exploitation lui-même).

Vous devez donc forcer tous vos EditTexts à utiliser abc_edit_text_material.xml arrière-plan spécifié dans la bibliothèque AppCompat. Heureusement, vous pouvez le faire simplement en ajoutant une ligne à votre syles.xml fichier:

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>

Tout Theme.AppCompat.* fera office de thème parent et, bien sûr, vous devez utiliser ce thème comme thème de votre application pour obtenir un effet.

Cette solution utilise des identifiants AppCompat privés (Android Studio s'en plaindra), mais je pense toujours que cette solution est beaucoup plus propre que l'utilisation de marges négatives.

0
Alexey

Faites le remplissage 0dp comme ceci

<com.google.Android.material.textfield.TextInputLayout
    style="@style/UserTextLayout"
    Android:layout_height="50dp"
    app:boxBackgroundMode="none">

    <com.google.Android.material.textfield.TextInputEditText
        Android:id="@+id/emailEditText1"
        style="@style/UserEditText"
        Android:layout_width="match_parent"
        Android:hint="MATRIC NUMBER"
        Android:inputType="number"
        Android:maxLines="1"
        Android:padding="0dp"
        Android:text="20181766" />
</com.google.Android.material.textfield.TextInputLayout>

Voici le résultat

0dp EditText padding image

0
Seyi