Creare un disegnabile sfondo personalizzato per un'EditText

Question

Sto cercando di impostare un drawable personalizzato a un EditText come previsto di seguito:

Così ho scritto questa usanza 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> 

Il risultato in anteprima è abbastanza buono (tranne la diversa dimensione dell'angolo, non gestita da Android Studio)

Ma nel dispositivo, non funziona completamente ... Il secondo elemento è allungato e non rispetta l'attributo width.

so, posso farlo con un 9-patch, ma voglio sapere se è possibile con drawable?

Answer 1

Gestito per farlo con un singolo background drawable e un composto drawable su 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> 

nel layout, utilizzarlo così:

<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 l'icona imbottitura all'interno della scatola grigia e drawablePadding l'imbottitura all'interno della scatola grigia + padding della modifica zona.

Ecco il risultato da Genymotion (aka, vero e proprio dispositivo):

spero vi piaccia!