Android: combining text and images on a Button or ImageButton

I'm trying to create an image (as background) on the button and add it dynamically, depending on what happens at run time, some text above / above the image.

I can't even add text if I use ImageButton. If I use Button, I can add text, but only define an image with Android: drawablebutton and here XML like attributes defined for.

However, these attributes only combine text and images in the x and y dimensions, which means I can draw images around the text, but not below / below the text (the z axis is defined as coming out of the display).

Any suggestions on how to do this? One idea is to extend the Button or ImageButton and override the draw() - method. But with my current level of knowledge, I really don't know how to do it (2D rendering). Perhaps experienced people know the solution or at least some pointers to start with?

#1 building

You can call setBackground() on the Button to set the background of the Button.

Any text will appear above the background.

If you look for something similar in xml, the: android:background property works the same way.

#2 building

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

#3 building

You can use this:

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

Because I took the image as the background and added the text!

#4 building

You can use drawableTop (also drawableLeft, etc.) to add gravity left | center | vertical to the image

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

#5 building

This code is very suitable for me

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

Tags: Android xml

Posted on Mon, 13 Jan 2020 00:04:59 -0500 by adredz