web-dev-qa-db-fra.com

Changer la couleur du sélecteur de mot de passe du masque

enter image description here

Comme vous pouvez le voir sur l'image, j'ai une application Android avec un fond noir et un texte blanc. Cependant, il y a en fait une icône "Afficher le texte" qui ressemble à un "œil" et c'est noir aussi :(. Est-il possible de changer la couleur de cela?

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:fitsSystemWindows="true"
    Android:background="@color/black">

    <LinearLayout
        Android:orientation="vertical"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:paddingTop="56dp"
        Android:paddingLeft="24dp"
        Android:paddingRight="24dp">

        <ImageView Android:src="@drawable/logo"
            Android:layout_width="wrap_content"
            Android:layout_height="72dp"
            Android:layout_marginBottom="24dp"
            Android:layout_gravity="center_horizontal" />

        <!-- Email Label -->
        <Android.support.design.widget.TextInputLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="8dp"
            Android:layout_marginBottom="8dp"
            Android:textColorHint="#ffffff">
            <EditText Android:id="@+id/input_email"
                Android:theme="@style/MyEditTextTheme"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:inputType="textEmailAddress"
                Android:hint="E-Mail Address"/>
        </Android.support.design.widget.TextInputLayout>

        <!-- Password Label -->
        <Android.support.design.widget.TextInputLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="8dp"
            Android:layout_marginBottom="8dp"
            Android:textColor="#ffffff"
            Android:textColorHint="#ffffff">
            <EditText Android:id="@+id/input_password"
                Android:theme="@style/MyEditTextTheme"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:inputType="textPassword"
                Android:hint="Password"/>
        </Android.support.design.widget.TextInputLayout>

        <Android.support.v7.widget.AppCompatButton
            Android:id="@+id/btn_login"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="24dp"
            Android:layout_marginBottom="24dp"
            Android:padding="12dp"
            Android:text="Login"/>

        <TextView Android:id="@+id/link_signup"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="24dp"
            Android:text="No account yet? Create one"
            Android:textColor="#ffffff"
            Android:gravity="center"
            Android:textSize="16dip"/>

    </LinearLayout>
</ScrollView>

strings.xml

<resources>
    <color name="bg_color">#ffffff</color>
    <color name="black">#222222</color>
    <style name="MyEditTextTheme">
        <item name="colorControlNormal">#ffffff</item>
        <item name="colorControlActivated">#ffffff</item>
        <item name="colorControlHighlight">#ffffff</item>
        <item name="colorAccent">@Android:color/white</item>
        <item name="Android:textColor">#ffffff</item>
        <item name="Android:textColorHint">#ffffff</item>
    </style>
</resources>
androidandroid-textinputlayoutandroid-color
15
rapid3642

Ok les gars, j'ai trouvé la bonne réponse, il y a IS un moyen de personnaliser la couleur de celui-ci. https://developer.Android.com/reference/Android/support/design/ widget/TextInputLayout.html # attr_Android.support.design: passwordToggleTint

setPasswordVisibilityToggleTintList(ColorStateList)

Mise à jour: vous pouvez ajouter directement l'attribut suivant dans TextInputLayout:

app:passwordToggleTint="#FFF"
28
rapid3642

La réponse de rapid3642 pointait dans la bonne direction mais j'avais encore besoin de savoir ce qui fonctionnerait exactement.

Suivez ces étapes pour changer la couleur de votre bascule à dessin:

  1. Créer selector_password_visibility_toggle dans ~/res/color/:

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <!-- When password is shown as text, the drawable will be off_white coloured -->
    <item Android:color="@color/off_white" Android:state_checked="true"/>
    <item Android:color="@Android:color/white"/>

</selector>

  2. Ajoutez passwordToggleTintMode et passwordToggleTint à votre TextInputLayout, comme ci-dessous:

    <Android.support.design.widget.TextInputLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:passwordToggleTintMode="src_atop"
    app:passwordToggleTint="@color/selector_password_visibility_toggle"
    app:passwordToggleEnabled="true">

Maintenant, votre TextInputLayout verra sa couleur de dessin changer.

8
Sufian

Ajoutez l'application xmlns: suivante dans votre mise en page.

xmlns:app="http://schemas.Android.com/apk/res-auto"

Maintenant, définissez passwordToggleEnabled & passwordToggleTint dans EditText en conséquence

app:passwordToggleEnabled = "true"
app:passwordToggleTint="#FFFFFF"

6
Mohan Karthik Sanagapalli

Voici une bonne façon de le faire par programme:

setPasswordVisibilityToggleTintList(AppCompatResources.getColorStateList(context, R.color.white));

Appelez cette méthode sur l'objet TextInputLayout.

4
Bart Burg

Si vous utilisez l'arrière-plan pour edittext ou texteditlayout, la bascule de visibilité du mot de passe est masquée sous l'arrière-plan. Supprimez donc l'arrière-plan ou créez un style personnalisé et créez-le comme thème pour edittext dans une mise en page XML.

 <style name="EditText_theme" parent="">
        <item name="passwordToggleTintMode">src_over</item>
    </style>

Si vous rencontrez toujours un problème ou si vous n'avez conservé aucun arrière-plan, changez le thème de l'application elle-même car les couleurs principales y sont déterminées.

Voici une autre solution de contournement qui n'a pas fonctionné pour moi. Je l'ai obtenu de Google Android docs lui-même,

 <style name="EditText_theme" parent="">
        <item name="passwordToggleTint">@color/white</item>
    </style>
1
Nihal
Create a custom Style.

<style name="PasswordText" parent="TextAppearance.AppCompat">
    <item name="Android:textColor">@color/dt_login_text</item>
    <item name="Android:textColorPrimary">@color/dt_login_text</item>
</style>

XML Code. // This will change the password mask color.

<Android.support.v7.widget.AppCompatEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:padding="@dimen/padding_6"
            Android:theme="@style/PasswordText"
            Android:layout_margin="@dimen/margin_3"
            Android:gravity="center"
            Android:inputType="textPassword"
            Android:text="Q"/>
1
Manoj DB

Ajouter un fichier dessinable selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@color/dim_orange_btn_pressed" />
    <item Android:state_focused="true" Android:drawable="@color/dim_orange_btn_pressed" />
    <item Android:drawable="@Android:color/white" />
</selector>

ajoutez votre EditText cette ligne Android:background="@drawable/selector"

    <LinearLayout
    Android:orientation="vertical"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">
           <EditText Android:id="@+id/txt_pass"
            Android:theme="@style/MyEditTextTheme"
            Android:layout_width="match_parent"
            Android:background="@drawable/selector"
            Android:layout_height="wrap_content"
           Android:inputType="textPassword"
            Android:hint="E-Mail Address"/>

        <ImageButton
        Android:id="@+id/btn_eye"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:src="@drawable/eye"
        />
   </LinearLayout>

Dans votre code:

buttonEye.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN) {

            txt_pass.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

        } else if (event.getAction() == MotionEvent.ACTION_UP) {

             txt_pass.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
        }
    }
};
0
Ahmad Aghazadeh