Androidアプリ開発でImageButton(イメージボタン)を追加する方法【初心者向け】

Androidアプリ開発でGUIコンポーネントの【ImageButton(イメージボタン)】を使いする方法を初心者向けに解説した記事です。ImageButtonを使うと、自分で用意した画像をボタンにすることができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのなかの1つである、ImageButton(イメージボタン)を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター!!Androidアプリの標準のボタンじゃなくて、自分で作った画像のボタンをおきたいんですけど、どうしたらいいんですか〜?

田島悠介

それならImageButtonを使えばできるよ。

 

ImageButtonとは

ImageButton(イメージボタン)は、画像ボタンを利用するためのGUIコンポーネントです。

自分で用意した画像を簡単にボタンとして利用することができます。

 

 

事前準備

ImageButtonを配置する前に画像を用意しておくと、スムーズに作業ができます。

プロジェクトの「resフォルダ」内に「drawableフォルダ」を用意します。その中に、ImageButtonとして利用したい画像を保存しておきましょう。

 

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

ImageButtonを配置する

ImageButtonはレイアウトエディタのパレットの「イメージ&メディア」から配置できます。

パレット内のImageButtonを、配置したい場所までドラッグしましょう。

 

ダイアログが表示されるので、drawableフォルダにコピーした画像のファイル名を選択し、[OK]ボタンをクリックします。

 

ImageButtonは配置されましたが、背景に色が付いてしまっているため格好悪いですね。

そこで、プロパティの「Background」を「#00000000」に変更すると、背景の透過が有効になります。

これで、ImageButtonの配置ができました。

 

xmlファイルを確認すると、次のようなコードが追加されています。

<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="68dp"
android:layout_marginStart="68dp"
android:layout_marginTop="56dp"
android:background="#00000000"
app:srcCompat="@drawable/button1" />

 

 

ImageButtonをカスタマイズする

ImageButtonは、画面の解像度に合わせて表示させる画像を変更することができます。

プロジェクトを作成されたときに、下記のようなdrawableで始まるフォルダが作成されます。これに対して、端末に対応したフォルダ内に画像を保存しておけば、アプリを実行したときに、そのフォルダに保存されている画像を優先して表示させることが可能です。

  • drawable-ldpi : 低解像度画像(120dpi)
  • drawable-mdpi : 中解像度画像(160dpi)
  • drawable-hdpi : 高解像度画像(240dpi)
  • drawable-xhdpi : 超高解像度画像(320dpi)
  • drawable-xxhdpi : 超超高解像度画像(480dpi)

 

例えば、「drawable-ldpi」フォルダにdrawableフォルダと同じ名前で別の画像を保存します。

 

そして、画面サイズが違う2つのエミュレーターで起動すると、このような画面が表示されます。

右側のエミュレータの画面は「drawable-mdpi」に対応していますが、「drawable-mdpi」に画像がないため「drawable」に保存された画像が表示されています。

一方の、左側のエミュレータの画面は「drawable-ldpi」に対応しています。「drawable-ldpi」に保存された画像が表示されています。

この画像の使い分けは、ImageButton以外でも使えるので覚えておくと便利です。

今回の記事は以上です。

他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でSwitchを追加する方法も合わせてご覧ください。

 

大石ゆかり

これで好きな画像のボタンが設置できますね♪

田島悠介

そうだね。標準のボタンだと堅いイメージがあるから、アプリによってはImageButtonを活用すると良いね。

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。