Comment masquer la barre inférieure dans EditText

Comment puis-je masquer la barre inférieure EditText (la ligne d'invite avec de petits empattements aux extrémités)?

Il pourrait y avoir une meilleure façon de faire ce que je veux: j'ai une mise en page avec un EditText. Normalement, cela s'affiche bien où l'utilisateur peut appuyer dessus et commencer à saisir ou à modifier du texte.

Parfois, cependant, j'aimerais utiliser la même disposition (simplifie une autre logique) pour afficher les mêmes données en lecture seule. Je veux que la présentation soit similaire - elle devrait avoir la même hauteur et la même police, mais pas la barre inférieure.

En tant que mesure provisoire, je vais implémenter cela en supprimant le EditText et en substituant un TextView. Je pense que cela donnera les résultats souhaités, mais il semble qu'un rond-point soit un moyen coûteux de faire quelque chose qui devrait être facile à faire en changeant les attributs.

Vous pouvez définir le EditTextpour avoir un dessin transparent transparent personnalisé ou simplement utiliser

android:background="@android:color/transparent"

ou

android:background="@null"

ou par programme

editText.setBackgroundResource(android.R.color.transparent);

Définissez l'arrière-plan sur null.

android:background="@null"

Vous pouvez définir EditTextla backgroundTintvaleur de une couleur spécifique. Si vous définissez une couleur transparente, la barre inférieure devrait disparaître.

android:backgroundTint="@color/Transparent"

<color name="Transparent">#00000000</color>

Mais vous pouvez l'utiliser dans Api v21(Lollipop)ou plus

Veuillez définir votre arrière-plan edittext comme

android:background="#00000000"

Ça va marcher.

Vous pouvez le faire par programme en utilisant setBackgroundResource:

editText.setBackgroundResource(android.R.color.transparent);

Ce que j'ai fait était de créer une forme dessinable et de la définir comme arrière-plan:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <padding
        android:top="8dp"
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp" />

    <solid android:color="#fff" />

</shape>

Remarque: J'ai en fait utilisé @dimenet des @colorvaleurs pour les firelds, mais j'ai simplifié le fichier de forme ici pour plus de clarté.

En utilisant l'une ou l'autre propriété:

android:background="@null"

OU

android:background="@android:color/transparent"

travaillé pour moi pour cacher le soulignement du EditText.

Cependant, notez qu'il provoque ensuite un problème d'espacement avec le TextInputLayout que j'ai entouré le EditText

Voici un moyen de le masquer, sans ruiner le remplissage par défaut:

fun View.setViewBackgroundWithoutResettingPadding(background: Drawable?) {
    val paddingBottom = this.paddingBottom
    val paddingStart = ViewCompat.getPaddingStart(this)
    val paddingEnd = ViewCompat.getPaddingEnd(this)
    val paddingTop = this.paddingTop
    ViewCompat.setBackground(this, background)
    ViewCompat.setPaddingRelative(this, paddingStart, paddingTop, paddingEnd, paddingBottom)
}

usage:

editText.setViewBackgroundWithoutResettingPadding(null)

Mise à jour:

Si vous vous retrouvez toujours à passer null, vous pouvez codifier cela dans la méthode (et vous pourriez aussi bien surcharger EditText lui-même)

fun EditText.removeUnderline() {
    val paddingBottom = this.paddingBottom
    val paddingStart = ViewCompat.getPaddingStart(this)
    val paddingEnd = ViewCompat.getPaddingEnd(this)
    val paddingTop = this.paddingTop
    ViewCompat.setBackground(this, null)
    ViewCompat.setPaddingRelative(this, paddingStart, paddingTop, paddingEnd, paddingBottom)
}

// usage:
editText.removeUnderline()

Vous devez également définir un minWidth, sinon le curseur disparaîtra si le texte est vide.

        <EditText
            android:id="@+id/et_card_view_list_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="30dp"
            android:layout_weight="1"
            android:inputType="text"
            android:text="Name"
            android:background="@android:color/transparent"
            />

Dans mon cas, j'utilisais un arrière-plan personnalisé pour modifier le texte, donc définir l'arrière-plan sur @null ou définir la teinte sur transparent n'était pas la solution pour moi, donc j'ai joué un petit truc qui a très bien fonctionné pour moi, je viens de définir

android:inputType="textVisiblePassword"

et il fait le travail assez bien .. ce n'est pas la solution optimale mais ça marche

J'ai quelque chose comme ça qui est très très utile:

generalEditText.getBackground().mutate().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);

où generalEditText est mon EditText et la couleur blanche est:

<color name="white">#ffffff</color>

Cela ne supprimera pas le remplissage et votre EditText restera tel quel. Seule la ligne en bas sera supprimée. Parfois, il est plus utile de le faire comme ça.

Si vous utilisez android:background="@null"autant de suggestions, vous perdez le remplissage et EditText devient plus petit. Du moins, c'était mon cas.

Une petite remarque est que si vous définissez background sur null et essayez le code java que j'ai fourni ci-dessus, votre application se bloquera juste après son exécution. (car il obtient l'arrière-plan mais il est nul.) Cela peut être évident, mais je pense que le souligner est important.

J'ai découvert la chose la plus curieuse! Si vous le définissez à l' nullaide de la liaison de données: android:background="@{null}"

Ensuite, non seulement l'arrière-plan est supprimé, mais la vue a toujours le remplissage calculé à partir de l'arrière-plan par défaut. Donc, pour une raison quelconque, le paramètre nul différé n'efface pas le remplissage du bg précédent.? Le rembourrage sur la vue est gauche / haut / droit 4dp, bas 13dp (à partir du niveau d'émulateur 21).

Peut ne pas avoir le même résultat final à tous les niveaux de l'API, alors méfiez-vous! Quelqu'un me dit si vous testez cela et que vous le trouvez fiable. (Notez également que le remplissage inférieur ressort à cause de ce soulignement qui était dans l'original. Donc, vous voudrez probablement le changer dans le XML, ou le réinitialiser dans le code après qu'il soit chargé à égalité en haut ...

si votre texte d'édition a déjà un arrière-plan, vous pouvez utiliser ce qui suit.

android:textCursorDrawable="@null"

Si vous souhaitez que cela affecte toutes les instances de EditText et toute classe qui en hérite, vous devez définir dans votre thème la valeur de l'attribut, editTextBackground.

  <item name="android:editTextBackground">@drawable/bg_no_underline</item>

Un exemple du dessinable que j'utilise est:

<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:drawable="@android:color/transparent"/>
    </selector>
</inset>

Il s'agit d'une version légèrement modifiée de l'implémentation par défaut de la conception matérielle.

Une fois appliqué, tout votre EditText supprimera le soulignement dans l'application, et vous n'avez pas à appliquer le style à chacun manuellement.

Utilisez simplement ceci

 editText.setBackgroundColor(Color.TRANSPARENT);

Vous pouvez également définir un STYLE pour votre editText afin de pouvoir regrouper toutes les propriétés en commun. Il est très puissant si vous devez éditer plusieurs textes qui doivent avoir le comportement

Mettez le code dans res / values ​​/ styles.xml

<style name="MyEditTextStyle" parent="@android:style/TextAppearance.Widget.EditText">
    <item name="android:background">@color/transparence</item> //NO UNDERBAR
    <item name="android:maxLines">1</item>
    <item name="android:height">28dp</item> //COMMON HEIGHT
</style>

Après cela, il vous suffit de l'appeler dans votre editText

<EditText
    android:id="@+id/edit1"
    style="@style/MyEditTextStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<EditText
    android:id="@+id/edit2"
    style="@style/MyEditTextStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Utiliser par programme: editText.setBackground(null)

De l' xmlutilisation:android:background="@null"

android:background="@android:color/transparent"

Ou

android:background="@null"

android: inputType = "textVisiblePassword | textMultiLine" android: background = "@ android: color / transparent"

... ce n'est pas la solution optimale mais ça marche.

Définir l'arrière-plan sur null

android:background="@null" in your xml 

Dans mon cas, editText.setBackgroundResource(R.color.transparent);c'est mieux.

Il ne supprime pas le rembourrage par défaut, juste sous la barre.

R.color.transparent = #00000000

si vous utilisez l'arrière-plan, vous devez utiliser cette balise

android:testCursorDrawable="@null" 

Pour conserver les marges et la couleur d'arrière-plan, utilisez:

background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <padding
        android:bottom="10dp"
        android:left="4dp"
        android:right="8dp"
        android:top="10dp" />

    <solid android:color="@android:color/transparent" />

</shape>

Éditer le texte:

<androidx.appcompat.widget.AppCompatEditText
    android:id="@+id/none_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background"
    android:inputType="text"
    android:text="First Name And Last Name"
    android:textSize="18sp" />