16
votes

Supprimer le soulignement de TextInputEditText

J'ai un écran Android qui prend les e-mails de l'utilisateur. Ci-dessous se trouve l'extrait de code, je souhaite supprimer le soulignement qui apparaît sous le texte.

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:hint="@string/email"
    android:textColorHint="@color/blueBackground"
    app:boxBackgroundColor="@color/input_background"
    app:boxCornerRadiusBottomEnd="20dp"
    app:boxCornerRadiusBottomStart="20dp"
    app:boxCornerRadiusTopEnd="20dp"
    app:boxCornerRadiusTopStart="20dp"
    app:endIconMode="clear_text"
    app:endIconTint="@color/blueBackground"
    app:hintTextColor="@color/blueBackground">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/blueBackground"
        android:textSize="18sp"
        android:layout_margin="8dp" />

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

J'ai essayé android:background="@null" et

<item name="colorControlNormal">@android:color/transparent</item> <item name="colorControlActivated">@android:color/transparent</item>

Mais ça ne fonctionne pas.

android android-textinputlayout android-textinputedittext

0 commentaires

12 Réponses :

0
votes

Essayez de définir l'arrière-plan sur @null ou @android:color/transparent

1 commentaires

Comme mentionné dans la question, je l'ai essayé mais cela n'a pas fonctionné

16
votes

Il semble que la bibliothèque de composants matériels dessine son propre soulignement à l'aide de app:boxStrokeColor . Cet attribut est un ColorStateList , vous devez donc créer une ressource de liste d'états de couleurs dans laquelle les couleurs de tous les états sont définies sur transparent. Donc, fondamentalement, vous voulez créer un nouveau fichier res/color/filename.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="@android:color/transparent"
        android:state_pressed="true"
        android:state_focused="true"
        android:state_selected="true"
        android:state_checkable="true"
        android:state_checked="true"
        android:state_enabled="true"
        android:state_window_focused="true" />
</selector>

et définissez l'attribut app:boxStrokeColor sur @color/filename .

Cependant, cela m'a laissé avec un soulignement noir qui ne répond toujours pas à android:background=@null ou <item name="colorControl*">@android:color/transparent</item> .

TL; DR

Quickfix: si vous définissez le TextInputLayout décrit en utilisant style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" , la boîte a presque la même apparence, mais le soulignement a disparu. Pour supprimer le trait, définissez simplement l'attribut app:boxStrokeColor sur @null .

0 commentaires

4
votes

Définir l'arrière-plan de TextInputLayout sur un dessinable et celui de TextInputEditText sur transparent supprime le soulignement:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="@android:color/holo_blue_bright"/></shape>

blue_drawable.xml

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="@string/email"
        android:background="@drawable/blue_drawable"
        app:endIconMode="clear_text"
        app:endIconTint="@color/black"
        app:hintTextColor="@color/black">

    <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:background="@android:color/transparent"
            android:textSize="18sp"
            android:layout_margin="8dp" />

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

2 commentaires

La définition de android:background="@android:color/transparent" sur TextInputEditText supprime l'arrière-plan bleu de TextInputLayout et ne résout donc pas mon problème

J'ai corrigé cela en ajoutant un dessinable en arrière-plan du TextInputLayout

1
votes

Créer un sélecteur à res / drawable

 <com.google.android.material.textfield.TextInputLayout
...
    style="@style/vm_textFilledBox"

fond ici - n'importe quelle couleur proche de votre arrière-plan.

Way 1 Ensuite, réglez-le sur votre TextInputLayout :

<style name="vm_textFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
        <item name="boxStrokeColor">@drawable/text_input_selector</item>
</style>

Voie 2 , styles creux:

styles.xml :

<com.google.android.material.textfield.TextInputLayout
...
  app:boxStrokeColor="@drawable/text_input_selector"
...

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.01" android:color="?attr/background" android:state_focused="true"/>
    <item android:alpha="0.01" android:color="?attr/background" android:state_hovered="true"/>
    <item android:alpha="0.01" android:color="?attr/background" android:state_enabled="false"/>
    <item android:alpha="0.01" android:color="?attr/background"/>
</selector>

0 commentaires

0
votes

Créez votre TextInputLayout personnalisé comme ceci

package com.google.android.material.textfield

import android.content.Context
import android.util.AttributeSet
class TextInputLayoutWithoutUnderline @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextInputLayout(context, attrs, defStyleAttr) {

    override fun updateEditTextBackground() {
        // XXX don't call super on purpose
    }

}

0 commentaires

14
votes

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="textInputStyle">@style/Widget.MyApp.TextInputLayout</item>
</style>

<style name="Widget.MyApp.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
</style>

0 commentaires

0
votes

Moyen facile;

app:boxBackgroundMode="filled"
app:boxStrokeWidth="0dp"

0 commentaires

7
votes

app:boxBackgroundMode="none" dans TextInputLayout parent

0 commentaires

2
votes

L'ajout de cette ligne sur TextInputLayout fonctionne pour moi:

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/border"
                app:boxStrokeColor="@color/et_box_color"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/llBank">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/etAmount"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="1dp"
                    android:background="#00FFFFFF"
                    android:gravity="center"
                    android:hint="Amount"
                    android:imeOptions="actionDone"
                    android:inputType="numberDecimal" />

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

MISE À JOUR

Dans le répertoire color res, ajoutez le fichier et_box_color.xml et ajoutez les lignes ci-dessous à l'intérieur:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:color="@color/transparent"
        android:state_pressed="true"
        android:state_focused="true"
        android:state_selected="true"
        android:state_checkable="true"
        android:state_checked="true"
        android:state_enabled="true"
        android:state_window_focused="true"/>
</selector>

Maintenant, ajoutez votre texte d'édition de matériel comme ci-dessous:

app:boxStrokeWidth="0dp"

J'ai ajouté un arrière-plan pour créer une bordure de TextInputLayout, supprimez l'arrière-plan de TextInputLayout si vous n'en avez pas besoin. L'arrière-plan de TextInputEditText sera nécessaire pour rendre l'arrière-plan transparent.

0 commentaires

2
votes

Si vous voulez app: boxBackgroundMode avec rempli et sans soulignement, cela fonctionnera
<item name="boxStrokeWidthFocused">0dp</item>
<item name="boxStrokeWidth">0dp</item>

0 commentaires

21
votes

Si vous souhaitez utiliser la case remplie, le code ci-dessous fonctionne parfaitement pour moi.

app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"

ajoutez les lignes ci-dessus dans la mise en page d'entrée.

0 commentaires

-2
votes

Veuillez définir boxBackgroundMode dans TextInputLayout. C'est le moyen simple et approprié de supprimer le soulignement dans TextInputLayout

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

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/inputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

0 commentaires