Combining an Image with Text inside a Button

Question

Hi guys im new to coding and currently learning xml and java for android. Im trying to make a Button which says GOAL but instead of the "O" it will have an image of a ball,i tried just making an image in a designer program thats says goal with the icon of the ball inside it and than use it as an image background for the button but it than misses the gray (which im planning to change to green) background and its not really what im going for. Is there a way to just add an image inside a button that has text? Or should i just design the button in a different software and than add it as a background for the button?

like "Te~ImageHere~xt"

Answer 1

You can use ImageSpan to add a drawable in between text. Below is an example .

  TextView textView=(TextView)findViewById(R.id.b1);
    Spannable span = new SpannableString("G OL");
    Drawable android = getResources().getDrawable(R.mipmap.ic_launcher);
    android.setBounds(0, 0, 50,50);
    ImageSpan image = new ImageSpan(android, ImageSpan.ALIGN_BASELINE);
    span.setSpan(image, 1, 2, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    textView.setText(span);

Below is the output . You can modify the bounds.

Answer 2

Try this use android:drawableLeft="@mipmap/ic_launcher_round" to add image in Button

<Button
    android:text="Prem"
    android:drawableLeft="@mipmap/ic_launcher_round"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

You can also use drawableTop , drawableBottom , drawableRight and drawableEnd like below code

android:drawableTop="@mipmap/ic_launcher_round"
android:drawableBottom="@mipmap/ic_launcher_round"
android:drawableRight="@mipmap/ic_launcher_round"
android:drawableLeft="@mipmap/ic_launcher_round"
android:drawableEnd="@mipmap/ic_launcher_round"