2012-12-09 1 views
8

Ich frage mich, ob es möglich ist, beide mit einem Bild auf einer Schaltfläche und mit einer Zeichenquelle kombinieren und mit Text darüber?kombinieren beide Hintergrundbild, Hintergrund Zeichenform auf eine Schaltfläche

Ich verwende diese derzeit als meine Schaltfläche Stil in ziehbar/red_btn.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true" > 
     <shape> 
      <solid 
       android:color="#ef4444" /> 
      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 
      <corners 
       android:radius="3dp" /> 
      <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <gradient 
       android:startColor="#ef4444" 
       android:endColor="#992f2f" 
       android:angle="270" /> 
      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 
      <corners 
       android:radius="3dp" /> 
      <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
     </shape> 
    </item> 
</selector> 

Und dann Taste mein

  <Button 
       android:id="@+id/testButton" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:text="Income" 
       android:textSize="15dip" 
       android:background="@drawable/red_btn" 
    android:textColor="#fff" 
    android:textStyle="bold" /> 

die wie folgt

enter image description here

sieht

Jetzt möchte ich ein weiteres .png Bild (arrow.png) über diesem b hinzufügen utton nach rechts wie diese

enter image description here

Ist dies möglich, und wenn ja, wie kann ich es tun?

Vielen Dank im Voraus. __________________________________________________________________________________________________________________________________________

bearbeiten

Nach folgenden Luksprog der Beratung unten Ich habe jetzt "red_btn_normal.xml" in ziehbar

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true" > 
     <shape> 
      <solid 
       android:color="#ef4444" /> 
      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 
      <corners 
       android:radius="3dp" /> 
      <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <gradient 
       android:startColor="#ef4444" 
       android:endColor="#992f2f" 
       android:angle="270" /> 
      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 
      <corners 
       android:radius="3dp" /> 
      <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
     </shape> 
    </item> 

</selector> 

und red_ btn_pressed.xml

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

    <item android:state_pressed="true"> 
     <shape> 
      <solid android:color="#ef4444" /> 

      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 

      <corners android:radius="3dp" /> 

      <padding 
       android:bottom="10dp" 
       android:left="10dp" 
       android:right="10dp" 
       android:top="10dp" /> 
     </shape> 
    </item> 
    <item> 
     <bitmap 
      android:gravity="right" 
      android:src="@drawable/arrow" /> 
    </item> 


</layer-list> 

Und dann erstelle ich meine Taste wie dieses "red_btn.xml"

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

    <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item> 
    <item android:drawable="@drawable/red_btn_normal"></item> 

</selector> 

Und meine Taste schließlich

<Button 
       android:id="@+id/testButton" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:text="Income" 
       android:textSize="15dip" 
       android:background="@drawable/red_btn" 

    android:textColor="#fff" 
    android:textStyle="bold" /> 

Problem ist, dass es nur das weiße zeigt Pfeile, wenn ich klicken Sie auf die Schaltfläche und es wird nicht angezeigt, wenn es nicht gedrückt. Was ist falsch an dem Code? =)

+0

Taste eine Textview hat und man konnte setCompoundDrawables für die Textview. Sie könnten also DrawableLeft/Right/Bottom/Top auf die Textansicht setzen. –

Antwort

12

Im fragen, ob ihre möglich, sowohl auf einem , um ein Bild zu kombinieren und mit einer ziehbar Quelle und darüber, dass der Text mit?

Ja, es ist möglich. Ihr Selektor werden:

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

    <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item> 
    <item android:drawable="@drawable/red_btn_normal"></item> 

</selector> 

, wo die beiden Drawables sind zwei layer-list Drawables mit dem ersten Element, um die Elemente aus Ihrem ursprünglichen Selektor ist und die zweite die .png Bild als Bitmap drawbale gewickelt.Zum Beispiel für red_btn_pressed.xml musst du:

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

    <item> 
     <shape> 
      <solid android:color="#ef4444" /> 

      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 

      <corners android:radius="3dp" /> 

      <padding 
       android:bottom="10dp" 
       android:left="10dp" 
       android:right="10dp" 
       android:top="10dp" /> 
     </shape> 
    </item> 
    <item> 
     <bitmap 
      android:gravity="right" 
      android:src="@drawable/arrow" /> 
    </item> 


</layer-list> 

und die red_btn_normal.xml wird:

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

    <item> 
     <shape> 
      <gradient 
       android:angle="270" 
       android:endColor="#992f2f" 
       android:startColor="#ef4444" /> 

      <stroke 
       android:width="1dp" 
       android:color="#992f2f" /> 

      <corners android:radius="3dp" /> 

      <padding 
       android:bottom="10dp" 
       android:left="10dp" 
       android:right="10dp" 
       android:top="10dp" /> 
     </shape> 
    </item> 
    <item> 
     <bitmap android:src="@drawable/allowed" android:gravity="right"/> 
    </item> 

</layer-list> 

Beachten Sie, dass der Pfeil Bild auf der rechten Seite des Textes nur, wenn die Größe sein der Button ermöglicht es (als Teil des Button Hintergrunds). Wenn Sie versuchen, eine Art von Positionierungsrelation zwischen dem Text des Button und dem Pfeilbild festzulegen, dann müssen Sie die Klasse Button erweitern und es selbst tun.

+0

Danke für die Hilfe sofar. Hat zwar nicht ganz funktioniert, der Pfeil zeigt aber nur, wenn ich den Knopf drücke, obwohl ich den Code genau so habe wie oben, muss ich etwas falsch machen? =) – anders

+0

@anders Vielleicht war meine Antwort nicht so klar, die Idee war, die Bitmap in beide Ebenenlisten zu setzen. Überprüfen Sie meine bearbeitete Antwort. – Luksprog

+0

+1 für nette Antwort vielen Dank –

3

Ich ging mit dem einfachen

<Button 
       android:id="@+id/testButton" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:text="Income" 
       android:textSize="15dip" 
       android:background="@drawable/red_btn" 
android:drawableRight="@drawable/arrow" 
    android:textColor="#fff" 
    android:textStyle="bold" /> 
Verwandte Themen