Android: Drawable inside of button

Question

I have this button that I would like to add a drawable inside:

Button without drawable:

This is what I'd like to do:

Button with drawable:

I know about android:drawableStart but this is what I get when using it:

If there's a way to write text on the edge of the button, it would be useful, since the drawable I want to put there is an unicode character (emoji).

Thanks!

Answer 1

You can make your own button:

my_button.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center"
              android:clickable="true"
              android:background="@drawable/selector_button">

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:padding="5dp"
               android:id="@+id/imageView1"/>

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/textView"/>

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:padding="5dp"
               android:id="@+id/imageView2"/>
</LinearLayout>

selector_button.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_green_dark"/>
        <stroke android:width="3dp" android:color="@android:color/white"/>
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_green_light"/>
        <stroke android:width="2dp" android:color="@android:color/white"/>
    </shape>
</item>

MyButton.java:

public class MyButton extends FrameLayout {

public MyButton(Context context) {
    this(context, null, 0);
}

public MyButton(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public MyButton(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    inflate(context, R.layout.my_button, this);
    final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyButton, 0, 0);
    final Drawable image1 = typedArray.getDrawable(R.styleable.MyButton_image1),
            image2 = typedArray.getDrawable(R.styleable.MyButton_image2);
    final String text = typedArray.getString(R.styleable.MyButton_txt);
    typedArray.recycle();

    if (image1 != null) ((ImageView) findViewById(R.id.imageView1)).setImageDrawable(image1);
    if (image2 != null) ((ImageView) findViewById(R.id.imageView2)).setImageDrawable(image2);
    if (text != null) ((TextView) findViewById(R.id.textView)).setText(text);
}

public void setText(int resId) {
    ((TextView) findViewById(R.id.textView)).setText(resId);
}}

Create file "values/attrs.xml":

<declare-styleable name="MyButton">
    <attr name="image1" format="reference"/>
    <attr name="txt" format="string"/>
    <attr name="image2" format="reference"/>
</declare-styleable>

And place code in your layout:

<MyButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:image1="@drawable/image1"
     app:image2="@drawable/image2"
     app:txt="@string/anyText"/>