it-swarm.com.de

Android: Kombinieren von Text und Bild auf einem Button oder ImageButton

Ich versuche, ein Bild (als Hintergrund) auf einer Schaltfläche zu haben und abhängig davon, was zur Laufzeit passiert, dynamisch Text über/über dem Bild hinzuzufügen.

Wenn ich ImageButton verwende, habe ich nicht einmal die Möglichkeit, Text hinzuzufügen. Wenn ich Button verwende, kann ich Text hinzufügen, aber nur ein Bild mit Android:drawableBottom und ähnlichen XML-Attributen wie definiert definieren hier .

Diese Attribute kombinieren jedoch nur Text und Bild in x- und y-Dimensionen, was bedeutet, dass ich ein Bild um meinen Text herum zeichnen kann, jedoch nicht unter/unter meinem Text (wobei die Z-Achse so definiert ist, dass sie aus der Anzeige kommt).

Irgendwelche Vorschläge, wie das geht? Eine Idee wäre, entweder Button oder ImageButton zu erweitern und die draw()- Methode zu überschreiben. Aber mit meinem derzeitigen Kenntnisstand weiß ich nicht wirklich, wie das geht (2D-Rendering). Vielleicht kennt jemand mit mehr Erfahrung eine Lösung oder zumindest ein paar Hinweise zum Starten?

521
znq

Sie können setBackground() für Button aufrufen, um den Hintergrund der Schaltfläche festzulegen.

Beliebiger Text wird über dem Hintergrund angezeigt.

Wenn Sie nach etwas Ähnlichem in XML suchen, gibt es das folgende Attribut: Android:background, das auf die gleiche Weise funktioniert.

200
m_vitaly

Für Benutzer, die nur Hintergrund, Symbolbild und Text in eine Button aus verschiedenen Dateien einfügen möchten: Setzen Sie auf einen Button-Hintergrund, drawableTop/Bottom/Rigth/Left und Auffüllen Attribute.

<Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/home_btn_test"
        Android:drawableTop="@drawable/home_icon_test"
        Android:textColor="#FFFFFF"
        Android:id="@+id/ButtonTest"
        Android:paddingTop="32sp"
        Android:drawablePadding="-15sp"
        Android:text="this is text"></Button>

Für eine differenziertere Anordnung können Sie auch RelativeLayout verwenden und anklickbar machen.

Tutorial: Tolles Tutorial, das beide Fälle abdeckt: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating -Android-Button-mit-Bild-und-Text-mit-relativen-layout.aspx

593
OneWorld

Es gibt eine viel bessere Lösung für dieses Problem.

Nehmen Sie einfach ein normales Button und verwenden Sie die Attribute drawableLeft und gravity.

<Button
  Android:layout_width="fill_parent"
  Android:layout_height="wrap_content"
  Android:drawableLeft="@drawable/my_btn_icon"
  Android:gravity="left|center_vertical" />

Auf diese Weise erhalten Sie eine Schaltfläche, die ein Symbol auf der linken Seite der Schaltfläche und den Text auf der rechten Seite des Symbols anzeigt vertikal zentriert.

335
schlingel

enter image description here

     <Button
            Android:layout_width="0dp"
            Android:layout_weight="1"
            Android:background="@drawable/home_button"
            Android:drawableLeft="@Android:drawable/ic_menu_edit"
            Android:drawablePadding="6dp"
            Android:gravity="left|center"
            Android:height="60dp"
            Android:padding="6dp"
            Android:text="AndroidDhina"
            Android:textColor="#000"
            Android:textStyle="bold" />
64
Dhina k

Verwenden Sie einfach ein LinearLayout und geben Sie vor, es sei Button - Einstellung background und klickbar ist der Schlüssel:

<LinearLayout
    Android:id="@+id/button"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@Android:drawable/btn_default"
    Android:clickable="true"
    Android:orientation="horizontal" >

    <ImageView
        Android:id="@+id/img"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center_vertical"
        Android:layout_marginLeft="5dp"
        Android:src="@drawable/image" />

    <TextView
        Android:id="@+id/textView2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center_vertical"
        Android:layout_margin="5dp"
        Android:text="Do stuff" />
</LinearLayout>
55
Kieran

einfach austauschen

Android:background="@drawable/icon"

mit

Android:background="@Android:color/transparent"
Android:drawableTop="@drawable/[your background image here]"

izz ein ziemlich guter trick ..;)

43
CMA

Ich habe einen anderen Ansatz gewählt als hier angegeben, und der funktioniert sehr gut. Deshalb wollte ich ihn teilen.

Ich verwende einen Stil, um eine benutzerdefinierte Schaltfläche mit Bild links und Text in der Mitte rechts zu erstellen. Folgen Sie einfach den 4 "einfachen Schritten" unten:

I. Erstellen Sie Ihre 9 Patches mit mindestens 3 verschiedenen PNG-Dateien und dem Tool, das Sie unter /YOUR_OWN_PATH/Android-sdk-mac_x86/tools/./draw9patch haben. Danach solltest du haben:

button_normal.9.png, button_focused.9.png und button_pressed.9.png

Laden Sie dann ein 24x24 PNG-Symbol herunter oder erstellen Sie es.

ic_your_icon.png

Speichern Sie alles im Ordner drawable/in Ihrem Projekt Android.

II. Erstellen Sie eine XML-Datei mit dem Namen button_selector.xml in Ihrem Projekt unter dem Ordner drawable /. Die Zustände sollten so sein:

<item Android:state_pressed="true" Android:drawable="@drawable/button_pressed" />
<item Android:state_focused="true" Android:drawable="@drawable/button_focused" />
<item Android:drawable="@drawable/button_normal" />

III. Wechseln Sie zum Ordner "values ​​/" und öffnen oder erstellen Sie die Datei "styles.xml" und erstellen Sie den folgenden XML-Code:

<style name="ButtonNormalText" parent="@Android:style/Widget.Button">
    <item name="Android:textColor" >@color/black</item>
    <item name="Android:textSize" >12dip</item>
    <item name="Android:textStyle" >bold</item>
    <item name="Android:height" >44dip</item>
    <item name="Android:background" >@drawable/button_selector</item>
    <item name="Android:focusable" >true</item>
    <item name="Android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="Android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon ist ein "untergeordneter Stil", da es ButtonNormalText (den "übergeordneten Stil") erweitert.

Beachten Sie, dass Sie das Symbol in Bezug auf den Text an einer anderen Position platzieren können, wenn Sie drawableLeft im Stil ButtonNormalTextWithIcon in drawableRight, drawableTop oder drawableBottom ändern.

IV. Gehen Sie zu dem Layout/Ordner, in dem Sie Ihr XML für die Benutzeroberfläche haben, und gehen Sie zu der Schaltfläche, auf die Sie den Stil anwenden möchten, und lassen Sie ihn so aussehen:

<Button Android:id="@+id/buttonSubmit" 
Android:text="@string/button_submit" 
Android:layout_width="fill_parent" 
Android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

Und ... voilà! Sie haben Ihre Schaltfläche mit einem Bild auf der linken Seite.

Für mich ist das der bessere Weg! Auf diese Weise können Sie die Textgröße der Schaltfläche separat von dem Symbol verwalten, das Sie anzeigen möchten, und denselben Hintergrund verwenden, der für mehrere Schaltflächen mit unterschiedlichen Symbolen gezeichnet werden kann, wobei die Richtlinien für die Android Benutzeroberfläche mit Stilen beachtet werden.

Sie können auch ein Thema für Ihre App erstellen und den "übergeordneten Stil" hinzufügen, damit alle Schaltflächen gleich aussehen, und den "untergeordneten Stil" mit dem Symbol nur dort anwenden, wo Sie ihn benötigen.

21
Oscar S.
 <Button Android:id="@+id/imeageTextBtn" 
        Android:layout_width="240dip"
        Android:layout_height="wrap_content"
        Android:text="Side Icon With Text Button"
        Android:textSize="20sp"
        Android:drawableLeft="@drawable/left_side_icon"         
        />   

Sie können drawableTop (auch drawableLeft usw.) für das Bild verwenden und Text unter das Bild setzen, indem Sie den gravityleft|center_vertical hinzufügen.

<Button
            Android:id="@+id/btn_video"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentRight="true"
            Android:layout_centerVertical="true"
            Android:background="@null"
            Android:drawableTop="@drawable/videos"
            Android:gravity="left|center_vertical"
            Android:onClick="onClickFragment"
            Android:text="Videos"
            Android:textColor="@color/white" />
11
Kalai.G

Wahrscheinlich wird meine Lösung für viele Benutzer geeignet sein, das hoffe ich.

Ich schlage vor, dass TextView mit Ihrem Stil erstellt wird. Es funktioniert perfekt für mich und hat alle Funktionen, wie ein Knopf.

Lassen Sie uns zunächst einen Button-Stil erstellen, den Sie überall verwenden können ... Ich erstelle eine button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" >
        <shape Android:shape="rectangle"  >
            <corners Android:radius="3dip" />
            <stroke Android:width="1dip" Android:color="#8dbab3" />
            <gradient Android:angle="-90" Android:startColor="#48608F" Android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item Android:state_focused="true">
        <shape Android:shape="rectangle"  >
            <corners Android:radius="3dip" />
            <stroke Android:width="1dip" Android:color="#284682" />
            <solid Android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape Android:shape="rectangle"  >
            <corners Android:radius="3dip" />
            <stroke Android:width="1dip" Android:color="@color/ControlColors" />
            <gradient Android:angle="-90" Android:startColor="@color/ControlColors" Android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

Zweitens können Sie eine Textansicht-Schaltfläche erstellen.

    <TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginBottom="20dip"
    Android:layout_gravity="right|bottom"
    Android:gravity="center"
    Android:padding="12dip"
    Android:background="@drawable/button_with_hover"
    Android:clickable="true"
    Android:drawableLeft="@Android:drawable/btn_star_big_off"
    Android:textColor="#ffffffff"
    Android:text="Golden Gate" />

Und das ist ein Ergebnis. Gestalten Sie dann Ihre benutzerdefinierte Schaltfläche mit beliebigen Farben oder anderen Eigenschaften und Rändern. Viel Glück

enter image description here

7

Wichtiges Update

Verwenden Sie kein normales _Android:drawableLeft_ etc ... mit Vektor-Drawables, sonst wird crash in niedrigeren API-Versionen. (Ich habe es in Live-App konfrontiert)

Für vektor zeichnbar

Wenn Sie Vektorzeichen verwenden, müssen Sie

  • Haben Sie auf AndroidX migriert? Wenn nicht, müssen Sie zuerst auf AndroidX migrieren. Es ist sehr einfach, siehe Was ist Androidx und wie migriert man?
  • Es wurde in der Version 1.1.0-alpha01 veröffentlicht, daher sollte die appcompat-Version mindestens _1.1.0-alpha01_ sein. Die aktuellste Version ist _1.1.0-alpha02_, verwenden Sie die neuesten Versionen für eine bessere Zuverlässigkeit, siehe Versionshinweise - Link .

    _implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'_

  • Benutze AppCompatTextView/AppCompatButton/AppCompatEditText

  • Verwenden Sie _app:drawableLeftCompat_, _app:drawableTopCompat_, _app:drawableRightCompat_, _app:drawableBottomCompat_, _app:drawableStartCompat_ und _app:drawableEndCompat_

Für regelmäßige ziehbar

Wenn Sie keine Vektorgrafiken benötigen, können Sie dies tun

  • benutze _Android:drawableLeft_, _Android:drawableRight_, _Android:drawableBottom_, _Android:drawableTop_
  • Sie können entweder reguläre Klassen TextView, Button & EditText oder AppCompat verwenden.

Sie können erreichen Output ​​wie unten -

output

7
Khemraj
<Button
     Android:id="@+id/groups_button_bg"
     Android:layout_height="wrap_content"
     Android:layout_width="wrap_content"
     Android:text="Groups"
     Android:drawableTop="@drawable/[image]" />


Android:drawableLeft
Android:drawableRight
Android:drawableBottom
Android:drawableTop

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-Android/

6
Sam

Dieser Code funktioniert für mich perfekt

<LinearLayout
    Android:id="@+id/choosePhotosView"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    Android:gravity="center"
    Android:clickable="true"
    Android:background="@drawable/transparent_button_bg_rev_selector">

    <ImageView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/choose_photo"/>

     <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:textColor="@Android:color/white"
        Android:text="@string/choose_photos_tv"/>

</LinearLayout>
5
eyal

Sie können dies verwenden:

  <Button
                    Android:id="@+id/reset_all"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginRight="5dp"
                    Android:layout_weight="1"
                    Android:background="@drawable/btn_med"
                    Android:text="Reset all"
                    Android:textColor="#ffffff" />

                <Button
                    Android:id="@+id/undo"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginLeft="5dp"
                    Android:layout_weight="1"
                    Android:background="@drawable/btn_med"
                    Android:text="Undo"
                    Android:textColor="#ffffff" />

insofern habe ich ein bild als background eingefügt und auch text hinzugefügt ..!

0
jigar