Créer un arrière-plan personnalisé drawable pour un EditText

Je suis en train de personnaliser la drawable à un EditText comme prévu ci-dessous:

Créer un arrière-plan personnalisé drawable pour un EditText

J'ai donc écrit cette coutume drawable:

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

        android:paddingBottom="12dp"
        android:paddingLeft="36dp"
        android:paddingRight="12dp"
        android:paddingTop="12dp">
<item>
    <shape>
        <corners android:radius="6dp"/>
        <solid android:color="@android:color/white"/>
        <stroke
            android:width="1dp"
            android:color="#BBBBBB"/>
    </shape>
</item>
<item
    android:width="32dp"
    android:gravity="left">
    <shape android:shape="rectangle">
        <size android:width="32dp"/>
        <corners
            android:bottomLeftRadius="6dp"
            android:topLeftRadius="6dp"/>
        <solid android:color="#AAAAAA"/>
    </shape>
</item>
<item android:left="8dp">
    <bitmap
        android:gravity="left"
        android:src="@drawable/ic_email"
        android:tileMode="disabled"/>
</item>
</layer-list>

Le résultat dans l'aperçu est en assez bon état (sauf autre coin de la taille, ce n'est pas manipulé par Android Studio)

Créer un arrière-plan personnalisé drawable pour un EditText

Mais dans l'appareil, il est totalement pas de travaux...
Le deuxième élément est tendu et ne respecte pas l'attribut width.

Créer un arrière-plan personnalisé drawable pour un EditText

Je sais, je peux le faire avec un 9-patch, mais je veux savoir si c'est possible, avec un drawable?

OriginalL'auteur sagix | 2015-09-15

  1. 26

    Réussi à le faire avec un simple arrière-plan dessiné et un composé drawable sur l'EditText.

    bg_edittext_icon.xml

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

    <item>
        <shape>
            <corners android:radius="6dp" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#AAAAAA" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item
        android:left="34dp">
        <!-- left is icon size + 2x side padding around icon-->
        <!-- 18 + 8 + 8 -->
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="6dp"
                android:topRightRadius="6dp"
                android:topLeftRadius="0dp"
                android:bottomRightRadius="6dp"
                android:bottomLeftRadius="0dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#BBBBBB" />
        </shape>
    </item>
</layer-list>

    Dans votre mise en page, l'utiliser comme ça: 

    <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_edittext_icon"
    android:inputType="textEmailAddress"
    android:drawableLeft="@drawable/ic_email_white_18dp"
    android:drawablePadding="20dp"
    android:paddingLeft="8dp"
    android:paddingRight="12dp"
    android:paddingTop="12dp"
    android:paddingBottom="12dp"
    android:hint="Email"
    />

    Avec paddingLeft l'icône de rembourrage à l'intérieur de la zone grise et drawablePadding le rembourrage à l'intérieur de la boîte grise + rembourrage de la zone d'édition.

    Ici est le résultat de Genymotion (aka, périphérique réel):

    Créer un arrière-plan personnalisé drawable pour un EditText

    Espérons qu'il vous plaira !

    Merci @pdegand59 il fonctionne comme un charme 😉

    OriginalL'auteur pdegand59