Android Button with text and image

Question

After seeing many questions for this feature and attempting to follow the answers, I was left wondering if there was a clearer example to be had?

Edit: I was attempting

Answer 1

In an attempt to save others some time, I offer this:

layout/some_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/menu_ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    <!-- StateList Drawable to make it look like a button -->
    android:background="@drawable/btn_std_holo_states"
    <!-- Required so you can click on it like a button -->
    android:clickable="true"    
    <!-- Recommended min height from the guidelines -->
    android:minHeight="48dp"    
    <!-- OnClickEvent definition -->
    android:onClick="onClickOk" >   

    <!-- Compound drawable of graphic and text -->
    <TextView
        android:id="@+id/txt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <!-- Center both the graphic and text inside the button -->
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        <!-- Draw the graphic to the left of the text -->
        android:drawableLeft="@drawable/ic_ok"
        <!-- Space between the graphic and the text-->
        android:drawablePadding="16dp"
        <!-- ensures the text and graphic are both centered vertically -->
        android:gravity="center"
        <!-- Text of the button -->
        android:text="@android:string/ok"
        <!-- Change the font to match the standard button settings (optional) -->
        android:textAppearance="?android:attr/textAppearanceButton" />

</RelativeLayout>

drawable/btn_std_holo_states.xml (referenced above)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/abs__btn_cab_done_pressed_holo_dark" android:state_pressed="true"/>
    <item android:drawable="@drawable/abs__btn_cab_done_focused_holo_dark" android:state_enabled="true" android:state_focused="true"/>
    <item android:drawable="@android:color/transparent" android:state_enabled="true"/>
    <item android:drawable="@android:color/transparent"/>

</selector>

NOTE: the different @drawable and @android:color settings here can be anything and are only provided to make a complete example

Answer 2

IF you like to have Button with image + text, then why don't you use CompoundDrawable?

For example:

Also check: How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

Answer 3

Try this:

Drawable appImg = getApplicationContext().getResources().getDrawable( R.drawable.ic_launcher );
appImg.setBounds( 0, 0, appImg.getIntrinsicHeight(), appImg.getIntrinsicWidth() );

Button btn_ok = (Button) findViewById(R.id.ok);
btn_ok.setCompoundDrawables( null, null, appImg, null );

Hope it helps you.

Thanks.

Answer 4

try this custom Drawable:

class BackgroundDrawable extends StateListDrawable {
    private StateListDrawable mDrawable;
    private Bitmap mBitmap;
    private Matrix mMatrix;
    private boolean mScale;
    private int mGravity;
    private int mDx;
    private int mDy;

    public BackgroundDrawable(StateListDrawable sld, Resources res, int resId, boolean scale, int gravity, int dx, int dy) {
        mDrawable = sld;
        mBitmap = BitmapFactory.decodeResource(res, resId);
        mMatrix =  new Matrix();
        mScale = scale;
        mGravity = gravity;
        mDx = dx;
        mDy = dy;
    }

    public static void setupBackground(View v, int resId, boolean scale, int gravity, int horizontalPadding, int verticalPadding) {
        Drawable d = v.getBackground();
        if (d instanceof StateListDrawable) {
            StateListDrawable sld = (StateListDrawable) d;
            Drawable drawable = new BackgroundDrawable(sld, v.getResources(), resId, scale, gravity, horizontalPadding, verticalPadding);
            v.setBackgroundDrawable(drawable);
        }
    }

    @Override
    protected boolean onStateChange(int[] stateSet) {
        invalidateSelf();
        return super.onStateChange(stateSet);
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        mDrawable.setBounds(bounds);
        Rect b = new Rect(bounds);
        b.inset(mDx, mDy);
        RectF src = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight());
        RectF dst = new RectF(b);
        float[] values = new float[9];
        if (mScale) {
            mMatrix.setRectToRect(src, dst, ScaleToFit.START);
        }
        mMatrix.getValues(values);
        float sx = values[Matrix.MSCALE_X];
        float sy = values[Matrix.MSCALE_Y];
        Rect outRect = new Rect();
        Gravity.apply(mGravity, (int) (src.width() * sx), (int) (src.height() * sy), b, outRect);
        mMatrix.postTranslate(outRect.left, outRect.top);
    }

    @Override
    public void draw(Canvas canvas) {
        int[] stateSet = getState();
        mDrawable.setState(stateSet);
        mDrawable.draw(canvas);
        canvas.drawBitmap(mBitmap, mMatrix, null);
    }
}

and how to use it:

Button b0 = (Button) findViewById(R.id.b0);
BackgroundDrawable.setupBackground(b0, R.drawable.ic_launcher, false, Gravity.BOTTOM | Gravity.RIGHT, 10, 5);
Button b1 = (Button) findViewById(R.id.b1);
BackgroundDrawable.setupBackground(b1, R.drawable.ic_launcher, false, Gravity.TOP, 0, 0);