Estoy tratando de establecer una costumbre dibujable a un EditText como se esperaba a continuación:

Crear un fondo personalizado dibujable para un EditText

Así que escribí esta costumbre dibujable:

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

El resultado en la vista previa es bastante buena (excepto esquina diferente tamaño, que no controla Android Studio)

Crear un fondo personalizado dibujable para un EditText

Pero en el dispositivo, es totalmente no funciona…
El segundo elemento se estira y no respeta el atributo width.

Crear un fondo personalizado dibujable para un EditText

Sé, lo puedo hacer con un 9-patch, pero quiero saber si es posible con dibujables?

OriginalEl autor sagix | 2015-09-15

1 Comentario

  1. 28

    Logrado hacerlo con un único fondo de la imagen y de un compuesto dibujable en el 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>

    En su diseño, lo utilizan como que:

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

    Con paddingLeft el icono de relleno en el interior de la caja gris y drawablePadding el relleno en el interior de la caja gris + relleno de la zona de edición.

    Aquí es el resultado de Genymotion (aka, dispositivo real):

    Crear un fondo personalizado dibujable para un EditText

    Espero que te guste !

    Gracias @pdegand59 funciona como un encanto 😉

    OriginalEl autor pdegand59

Dejar respuesta

Please enter your comment!
Please enter your name here