Androidアプリ開発でImageViewを追加する方法【初心者向け】

Androidアプリ開発のGUIコンポーネントである【ImageView(イメージビュー)】を追加する方法を初心者向けに解説した記事です。このパーツを使うと、アプリ内で画像を表示させることができます。事前準備から紹介しています。

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

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

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

 

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

 

なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター!!Androidアプリの画面上に画像を置きたいんですけど、どうやるんでしたっけ・・・?

田島悠介

ImageViewっていうGUIコンポーネントを使うんだ。

 

ImageViewとは

ImageViewとは、アプリ内で画像を表示したい場合に使われるGUIコンポーネントです。

アプリを開発する際に画像を表示するのは必須とも言えると思いますので、基礎を覚えておきましょう。

 

準備

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

画像は、プロジェクトの「resフォルダ」内に「drawableフォルダ」を用意します。その中に、ImageViewに表示したい画像をコピーしておきます。

795316b92fc766b0181f6fef074f03fa-620x553

これで事前準備は完了です。

 

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

ImageViewを配置する

準備ができたら画像を配置(移動)していきましょう。

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

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

2b530e80c7d0de90885e285c5d798063-620x562

PropertiesのSrcを選択し、表示される[…]ボタンをクリックします。

c8856789ec11ab8b1013037cef6929f9-620x455

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

3a4f695a458cb0ac0aceaa2eb13ac2dd-620x535

このようにImageViewを配置すると、xmlファイルには次のようなコードが追加されます。

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:src="@drawable/android_logo"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

android:src属性で、表示させる画像を指定します。表示させる画像を変更したい場合は、この部分を書き換えてください。

これでImageViewの配置は完了です。アプリを起動すると、画面に指定した画像が表示されます。

Screenshot_2016-08-09-16-35-59-576x1024

 

応用編:画像を透過させる

最後にちょっとした応用を紹介します。

ImageViewを使って画像を表示させると、表示させる画像を透過させることが可能です。

透過していることが分かりやすいように、背景を黄色にしてあります。

プロパティの「Alpha」に0~1までの任意の値を入力して、画像の透明度を変更できます。値が小さくなるほど透明に近くなるので覚えておきましょう。

94ed160662be198949535a112047e9b4-620x329

 

今回の記事は以上です。

さらにAndroidアプリのGUIコンポーネントを使いこなしたい場合は、Androidアプリ開発でTextViewを追加する方法も合わせてご覧ください。

 

大石ゆかり

画像を置くことができました!

田島悠介

アプリ開発で画像を置く場面ってたくさんあるから、覚えておくと良いね♪

大石ゆかり

はい♪

 

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