ボタンの上下左右に画像を表示する方法

Buttonの上下左右に画像を表示するにはImageViewを使うこともできます。しかし、それよりもボタン自身に画像を付加したほうが手間がかかりません。

ボタン自身に画像を追加するには次の2つの方法があります。

1. レイアウト上でdrawable属性にリソースを渡す
2. ソース上からボタンに画像を付加する

レイアウト上でボタン画像を追加する方法

初めにレイアウト上でボタンの上下左右に画像を表示する方法を紹介します。

例えばボタンの左に画像を表示したいなら次のようなレイアウトを書きます。

    <Button
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Click!" 
        android:drawableLeft="@drawable/left_image" />

このようにdrawableLeft属性に画像リソースを渡します。

上下左右の4方向に画像は表示でき、その中から複数の方向を選びそれぞれdrawableTop、drawableLeft、drawableRight、drawableTop属性に画像リソースを渡せばボタンから見てその方向に画像が表示されるようになります。

コード中から画像表示

レイアウト上で画像表示したのと同様にコード中からでもボタンに対して上下左右の4方向に画像を指定できます。

ただしレイアウト上とは違い表示する画像の位置をあらかじめ決めておく必要があります。例えば次のようなコードです。

public class MainActivity extends Activity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Button button = (Button) findViewById(R.id.button);
        Drawable leftDrawable = getResources().getDrawable(
                R.drawable.left_image);
        leftDrawable.setBounds(0, 0, tabImage.getWidth, tabImage.getHeight());
            //画像を描くボタン上での位置を指定
        button.setCompoundDrawables(leftDrawable, null, null, null);
            //左側に画像を表示
        button.setCompoundDrawablePadding(3);
            //画像とボタンのパディングを指定
    }
}

表示するDrawableのsetBoundsメソッドを呼び出すことでボタンから見た画像の位置を指定できます。位置はボタンの一番左上を基準にしてそこから上下左右の座標を指定します。

あとはsetCompoundDrawablesメソッドに左、上、右、下の順で表示画像のDrawableインスタンスを渡します。もし何も表示しないならnullを渡しておけばOKです。