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

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

Wenn ich benutze, ImageButtonhabe ich nicht einmal die Möglichkeit, Text hinzuzufügen. Wenn ich verwende, Buttonkann ich Text hinzufügen, aber nur ein Bild mit android:drawableBottomund ähnlichen XML-Attributen definieren, wie hier definiert .

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

Irgendwelche Vorschläge dazu? Eine Idee wäre, die Methode entweder zu erweitern Buttonoder zu ImageButtonüberschreiben draw(). 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 einige Hinweise, um zu beginnen?

Sie können rufen setBackground()auf ein Buttonden Hintergrund der Taste.

Jeder Text wird über dem Hintergrund angezeigt.

Wenn Sie nach etwas Ähnlichem in XML suchen, gibt es: android:backgroundAttribut, das auf die gleiche Weise funktioniert.

Für Benutzer, die nur Hintergrund, Symbol -Bild und TextButton aus verschiedenen Dateien in eine Datei Buttoneinfügen möchten : Auf Hintergrund setzen, DrawableTop / Bottom / Rigth / Left- und Padding- 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 anspruchsvollere Anordnung können Sie auch RelativeLayout(oder ein anderes Layout) verwenden und es anklickbar machen.

Tutorial: Tolles Tutorial, das beide Fälle abdeckt: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

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

Nehmen Sie einfach eine normale Buttonund verwenden Sie die drawableLeftund die gravityAttribute.

<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 an der rechten Stelle des Symbols vertikal zentriert anzeigt .

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

Verwenden Sie einfach ein LinearLayout und tun Sie so, als wäre es eine ButtonEinstellung backgroundund anklickbar 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>

einfach ersetzen

android:background="@drawable/icon"

mit

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

izz ein ziemlich guter Trick ..;)

Ich habe einen anderen Ansatz gewählt als hier angegeben, und er funktioniert wirklich 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. Befolgen Sie einfach die folgenden 4 "einfachen Schritte":

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 sollten Sie 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 Zeichen- / Ordner Ihres Android-Projekts.

II. Erstellen Sie in Ihrem Projekt eine XML-Datei mit dem Namen button_selector.xml unter dem Ordner drawable /. Die Staaten 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. Gehen 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 durch Ändern von drawableLeft im ButtonNormalTextWithIcon-Stil in drawableRight, drawableTop oder drawableBottom an einer anderen Position in Bezug auf den Text platzieren können.

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, in der 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 Ihren Knopf 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 getrennt von dem Symbol, das Sie anzeigen möchten, verwalten und denselben Hintergrund verwenden, der für mehrere Schaltflächen mit unterschiedlichen Symbolen gezeichnet werden kann. Beachten Sie dabei die Richtlinien für die Android-Benutzeroberfläche mithilfe von Stilen.

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.

 <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 drawableLeftusw.) für das Bild verwenden und Text unter dem Bild festlegen, indem Sie das hinzufügengravity left|center_vertical

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

Wichtiges Update

Verwenden Sie kein normales android:drawableLeftetc ... mit Vektor-Drawables, da es sonst in niedrigeren API-Versionen abstürzt . (Ich habe es in der Live-App konfrontiert)

Für Vektor zeichnbar

Wenn Sie Vector Drawable verwenden, müssen Sie

• Haben Sie auf AndroidX migriert? Wenn nicht, müssen Sie zuerst auf AndroidX migrieren. Es ist sehr einfach zu sehen, was AndroidX ist und wie man migriert?

• Es wurde in der Version veröffentlicht 1.1.0-alpha01, daher sollte die Appcompat-Version mindestens verfügbar sein 1.1.0-alpha01. Aktuelle neueste 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'

• Verwenden Sie AppCompatTextView/ AppCompatButton/AppCompatEditText

• Verwenden Sie app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompatundapp:drawableEndCompat

Zum regelmäßigen Zeichnen

Wenn Sie keinen Vektor zum Zeichnen benötigen, können Sie dies tun

• Verwendung android:drawableLeft, android:drawableRight, android:drawableBottom,android:drawableTop
• Sie können entweder regelmäßig verwenden TextView, Button& EditTextoder AppCompatKlassen.

Sie können eine Ausgabe wie unten erzielen -

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

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

Lassen Sie uns zunächst einen Schaltflächenstil erstellen, den Sie überall verwenden können ... Ich erstelle 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 erstellen wir eine Textansicht-Schaltfläche.

    <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

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

Dieser Code funktioniert perfekt für mich

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

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

darin habe ich ein bild als backgroundeingefügt und auch text hinzugefügt ..!

<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

Oder Sie können programmgesteuert:

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />