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

Question

Ich versuche, ein Bild (als Hintergrund) auf einer Schaltfläche zu haben und fügen Sie dynamisch, je nachdem, was während der Laufzeit geschieht, etwas Text über/über das Bild.

Wenn ich die ImageButton Ich habe nicht einmal die Möglichkeit, Text hinzuzufügen. Wenn ich Button Ich kann Text hinzufügen, aber nur ein Bild definieren mit android:drawableBottom und ähnliche XML-Attribute wie definiert ici .

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

Haben Sie einen Vorschlag, wie man das machen kann? Eine Idee wäre, entweder die Button ou ImageButton und überschreiben Sie die draw() -Methode. Aber mit meinem derzeitigen Wissensstand weiß ich nicht wirklich, wie man das macht (2D-Rendering). Vielleicht weiß jemand mit mehr Erfahrung eine Lösung oder zumindest einige Hinweise zu beginnen?

Answer 1

MaterialButton unterstützt das Setzen eines Symbols und dessen Ausrichtung am Text:

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My button"
        app:icon="@drawable/your_icon"
        app:iconGravity="textStart"
        />

app:iconGravity kann auch sein start / end wenn Sie das Symbol anstelle des Textes an der Schaltfläche ausrichten möchten.

---

Seit Version 1.5.0-beta01, app:iconGravity kann auch sein top / textTop ( übergeben. )

Answer 2

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

Was ich vorschlage, ist es machen TextView mit Ihrem Stil. Es funktioniert für mich perfekt, und hat alle Funktionen, wie eine Schaltfläche.

Als Erstes erstellen wir einen Button-Stil, 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 Textview-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 dies ist ein Ergebnis. Dann gestalten Sie Ihre eigene Schaltfläche mit beliebigen Farben oder anderen Eigenschaften und Rändern. Viel Glück

Answer 3

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

Answer 4

Dieser Code funktioniert bei mir 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>

Answer 5

Zum Kombinieren Button y drawableTop und trotzdem die Klickreaktion erhalten, können Sie den Schaltflächenstil @style/Widget.AppCompat.Button.Borderless um sie transparent zu machen.

<Button
    android:id="@+id/settings"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/ic_baseline_settings_24"
    android:drawableTint="?attr/colorPrimary"
    android:text="@string/settings"
    android:textColor="?attr/colorPrimary" />