Erstellen Sie einen benutzerdefinierten Hintergrund ziehbar für eine EditText

Question

Ich versuche, eine benutzerdefinierte ziehbar zu einem EditText zu setzen, wie erwartet unter:

Also schrieb ich diese Gewohnheit ziehbar:

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

Das Ergebnis in der Vorschau ist ziemlich gut (mit Ausnahme der anderen Eckengröße, die nicht von Android Studio verarbeitet wird)

Aber im Gerät funktioniert es überhaupt nicht ... Das zweite Element ist gestreckt und respektiert nicht das Breitenattribut.

Ich weiß, ich habe es mit einem 9-Patch tun, aber ich möchte wissen, ob es mit Drawables möglich ist?

Answer 1

Verwaltet, um es mit einem einzigen Hintergrund zeichnest und eine Compound-Drawable auf dem EditText zu tun.

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> 

In Ihrem Layout, es so verwenden:

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

Mit paddingLeft das Symbol Polsterung im Inneren des grauen Kasten und drawablePadding die Polsterung in der grauen Box + Polsterung des Bearbeitungs Zone.

Hier ist das Ergebnis von Genymotion (aka, real-Gerät):

Hoffnung mögen Sie es!