誕生日カードアプリに画像を追加する

この Codelab では、ImageView を使用してアプリに画像を追加する方法を学びます。

Prerequisites

  • Android Studio で新しいアプリを作成して実行する方法に習熟していること。
  • Layout Editor を使用して TextViews の属性を追加、削除、設定する方法について習熟していること。

学習内容

  • Android アプリに画像や写真を追加する方法。
  • ImageView を使用してアプリに画像を表示する方法。
  • テキストを文字列リソースに抽出し、アプリの翻訳や文字列の再利用を容易にする方法。
  • 大勢のユーザーが利用できるアプリにする方法。

作成するアプリの概要

  • Happy Birthday アプリを拡張して画像を追加します。

必要なもの

  • Android Studio がインストールされているパソコン
  • 「誕生日カードアプリを作成する」のアプリ、Codelab。
  1. 前の Codelab で作成した「誕生日カードアプリ」を Android Studio で作成します。
    アプリを実行すると、次のようになります。

プロジェクトに画像を追加する

このタスクでは、インターネットから画像をダウンロードし、Happy Birthday アプリに追加します。

  1. こちらのウェブサイトにアクセスして、誕生日カード用の画像をご確認ください。
  2. 右側の [Download] ボタンをクリックすると、画像だけが表示されます。
  3. 画像を右クリックし、パソコンに androidparty.jpg という名前を付けてファイルを保存します。保存先をメモしておきます（例: ダウンロード フォルダ）。
  4. Android Studio のメニューで、[View] > [Tool Windows] > [Resource Manager] をクリックするか、[Project] ウィンドウの左側にある [Resource Manager] タブをクリックします。
  5. [Resource Manager] の下にある [+] をクリックして、[Import Drawables] を選択します。ファイル ブラウザが開きます。
  6. ファイル ブラウザで、ダウンロードした画像ファイルを見つけて [Open] をクリックします。
  7. [次へ] をクリックします。
    Android Studio に画像のプレビューが表示されます。
  8. [インポート] をクリックします。
  9. 画像が正常に読み込まれると、Android Studio によって画像が [Drawable] リストに追加されます。このリストには、アプリのすべての画像とアイコンが入っています。これで、この画像をアプリで使用できるようになりました。
  10. メニューの [View] > [Tool Windows] > [Project] をクリックするか、左側の [Project] タブをクリックして、プロジェクト ビューに戻ります。
  11. [app > res > drawable] を展開して、画像がアプリの drawable フォルダにあることを確認します。

アプリに画像を表示するには、画像を表示する場所が必要です。TextView を使用してテキストを表示する場合と同じようにして、ImageView を使用して画像を表示できます。

このタスクでは、アプリに ImageView を追加し、その画像をダウンロードしたケーキの画像に設定します。その後、画像の位置決めを行い、サイズを全画面に合わせます。

ImageView を追加してその画像を設定する

  1. [Project] ウィンドウで activity_main.xml を開きます（[app] > [res] > [layout] > [activity_main.xml]）。
  1. Layout Editor で、[Palette] に移動してアプリに ImageView をドラッグします。それを中央付近に、テキストと重ならないようにドロップします。

[Pick a Resource] ダイアログが開きます。このダイアログには、アプリで使用できるすべての画像リソースのリストが表示されます。[Drawable] タブの下に誕生日の画像が表示されています。ドローアブル リソースは、画面に描画可能なグラフィックを示す一般的な概念です。画像、ビットマップ、アイコン、その他のさまざまなタイプの描画されるリソースが含まれます。

  1. [Pick a Resource] ダイアログの [Drawable] リストでケーキの画像を見つけます。
  2. 画像をクリックし、[OK] をクリックします。

すると画像がアプリに追加されますが、おそらく、画像は適切な場所になく、サイズも全画面になりません。これを次のステップで修正します。

ImageView の位置とサイズを設定する

  1. Layout Editor で ImageView をクリックしてドラッグします。すると、デザインビューでアプリ画面の周囲にピンク色の長方形が表示されます。ピンク色の長方形は、ImageView の位置決めを行うための画面の境界を示します。
  2. 左右の端がピンクの長方形と合うように ImageView をドロップします。端に近づくと、Android Studio により画像が「スナップ」されます（上下はあとで処理します）。

ConstraintLayout の Views には、ConstraintLayout に位置決め方法を指示する水平方向と垂直方向の制約が必要です。これを次で追加します。

  1. ImageView の枠線の上部にある円にカーソルを置くと、別の円でハイライト表示されます。
  2. 円をアプリ画面の上部にドラッグすると、ドラッグしている間、矢印で円がポインタに連結されます。画面上部にスナップするまでドラッグします。ImageView の上部から ConstraintLayout の上部までの制約を追加しました。

  3. ImageView の下部から ConstraintLayout の下部までの制約を追加します。


  1. [Attributes] ペインで、[Constraint Widget] を使用して、左側と右側に 0 の余白を追加します。これにより、その方向の制約が自動的に作成されます。


画像は中央に配置されますが、まだ画面全体を占めていません。これは以降のステップで修正します。

  1. [Constraints] セクションの [Constraint Widget] で、[layout_width] を [0dp (match constraint)] に設定します。
    0dp は、ImageView の幅に対して一致制約を使用するよう Android Studio に指示する簡略表現です。ここで一致制約とは、追加した制約によって、対象を ConstraintLayout の幅から余白を引いた幅にすることが可能です。
  2. [layout_height] を [0dp (match constraint)] に設定します。
    追加した制約により、ImageView の高さは ConstraintLayout から、余白を引いた値になります。
  3. ImageView はアプリ画面と同じ幅ですが、写真は ImageView の中央に配置され、写真の上下にたくさんの空白があります。これでは見栄えがあまり良くないので、ImageView の [scaleType] を調整します。これは画像のサイズ調整と位置合わせの仕方を指示するものです。ScaleType の詳細については、デベロッパー リファレンス ガイドをご覧ください。アプリは以下のようになります。
  4. [scaleType] 属性を見つけます。見当たらない場合は、下にスクロールするか、検索してください。[scaleType] にいろいろな値を設定して、動作を確認しましょう。
  1. 終わったら、[scaleType] を [centerCrop] に設定します。これで、画像が歪むことなく画面いっぱいに表示されます。

下のように、ケーキ画像が画面いっぱいに表示されます。

しかし、誕生日祝いのメッセージと署名は表示されていません。これを次のステップで修正します。

ImageView をテキストの背後に移動する

ImageView を全画面にすると、テキストは表示されなくなりました。これは画像がテキストを覆っているためです。UI 要素の順序が重要だということがわかります。ImageView は、最初に TextViews を追加したあとで追加したので、一番上になります。レイアウトにビューを追加すると、ビューのリストの末尾に追加され、描画はこのリスト内での順序で行われます。ImageView は ConstraintLayout 内の Views のリストの末尾に追加されているので、最後に、つまり TextViews の上に描画されます。これを修正するには、ビューの順序を変更して、ImageView を最初に描画されるようにリストの先頭に移動します。

  1. [Component Tree] で ImageView をクリックし、ConstraintLayout のすぐ下、TextViews の上にドラッグします。ImageView の移動先を示す、三角形の付いた青い線が表示されるので、ConstraintLayout のすぐ下に ImageView をドロップします。

これで、ImageView が ConstraintLayout の下のリストの先頭になり、その後が TextViews になったはずです。「ハッピー バースデー、サム！」と「エマの話」というテキストの両方が表示されるはずですが、「ハッピー バースデー、サム！」は暗い背景に暗いテキストになっているため、読みづらいかもしれません。（内容記述がないという警告は、この時点では無視してください）。

テキストの色を変更する

挨拶文と署名が画像の前に表示されるようになりました。ただし、選択したテキストの色によっては、見づらくなることがあります。この手順では、テキストの色を設定し、背後に画像が見えるようにします。

  1. [Component Tree] で最初の TextView をクリックして選択します。
  2. [Attributes] で、[textColor] 属性をクリックして「white」と入力します。
    入力していくと、それまでに入力したテキストを含む色のリストが Android Studio に表示されます。
  3. 色のリストから [@android:color/white] を選択し、Enter キーを押します。Android ではさまざまな色が定義されているため、アプリの各セクションで一貫した色を使用できます。
  4. 他の TextView についても同様に処理します。
  5. アプリを実行して、テキストが読みやすくなることを確認します。

これで、Android アプリに画像が追加され、テキストがきれいになりました。

前の Codelab で TextViews を追加したとき、Android Studio に警告の三角形が表示されました。このステップでは、この警告を解決し、さらに ImageView の警告も解決します。

翻訳

アプリを作成する際には、どこかの時点で別の言語に翻訳される可能性があることを知っておいてください。前の Codelab で学んだように、文字列とは「Happy Birthday, Sam!」のような文字の並びです。

ハードコードされた文字列は、アプリのコードに直接書き込まれます。ハードコードされた文字列は、アプリを他の言語に翻訳することが困難になり、アプリのさまざまな場所で文字列を再利用するのが難しくなります。リソース ファイルを文字列に抽出することで、これらの問題に対処できます。具体的には、文字列をコード内にハードコードする代わりに別のファイルに格納して、名前を付けます。文字列を使用するときには名前を使用するようにします。文字列を変更したり、他の言語に翻訳したりしても、名前は変わりません。

  1. 「Happy Birthday, Sam!」と書かれた最初の TextView の横にあるオレンジ色の三角形をクリックします。
    Android Studio で詳細情報と修正候補が表示されたウィンドウが開きます。[修正候補] が表示されていない場合は、下にスクロールします。
    ハードコードされた文字列 \
  2. [Fix] ボタンをクリックします。
    Android Studio で [Extract Resource] ダイアログが開きます。このダイアログでは、文字列リソースの名前と保存方法の詳細をカスタマイズできます。[Resource name] は、この文字列を呼び出す際の名前です。[Resource value] は、実際の文字列そのものです。
  3. [Extract Resource] ダイアログで、[Resource name] を「happy_birthday_text」に変更します。文字列リソースの名前には小文字を使用し、複数の単語はアンダースコアで区切るようにします。他の設定はデフォルトのままにします。
  4. [OK] ボタンをクリックします。
  5. [Attributes] ペインで、[text] 属性を確認してください。Android Studio によって自動的に @string/happy_birthday_text に設定されています。
  6. strings.xml（[app] > [res] > [values] > strings.xml）を開くと、happy_birthday_text という文字列リソースが Android Studio によって作成されているのがわかります。
<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

strings.xml ファイルには、アプリによってユーザーに表示される文字列のリストが入っています。アプリの名前も文字列リソースです。文字列をすべて 1 か所にまとめることで、アプリ内のテキストの翻訳が簡単になり、アプリの別の場所で文字列を再利用するのも簡単になります。

  1. 同じ手順で署名である TextView のテキストを抽出し、文字列リソースに「signature_text」という名前を付けます。

完成したファイルは次のようになります。

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

アプリのユーザー補助対応を確認する

ユーザー補助を考慮したコーディング慣行を取り入れることで、障がいのあるユーザーをはじめとして、誰にとってもわかりやすく操作しやすいアプリになります。

Android Studio により、アプリのユーザー補助機能を強化するためのヒントと警告が提供されます。

  1. [Component Tree] で、前の手順で追加した ImageView の横にあるオレンジ色の三角形を確認します。カーソルを合わせると、ツールチップに「&contentDescription'」属性がないという警告が表示されます。コンテンツの説明を使用すると、UI 要素の目的を定義して、アプリが TalkBack で使いやすくなります。


ただし、このアプリの画像は装飾専用です。ユーザーがタップしても何もせずに、ユーザー補助の特別な意味もありません。内容説明を設定するのではなく、ImageView のマークを付けることで、ユーザー補助にとって重要でないことをシステムが認識できるようになります。すると、スクリーン リーダーはそれをスキップできることを認識します。

  1. [Component Tree] で、ImageView を選択します。
  2. [Attributes] ウィンドウの [All Attributes] セクションで、[有効期限が切れない] を [いいえ] に設定します。

ImageView の横にあるオレンジ色の三角形が消えます。

  1. アプリをもう一度実行し、変わらず動作していることを確認します。

これで、Happy Birthday アプリに画像が追加され、ユーザー補助のガイドラインに沿うようになり、他の言語に翻訳しやすくなりました。

完成したコードを見たい方のために、Happy Birdthday アプリの解答コードを GitHub にアップロードしました。

GitHub は、デベロッパーがソフトウェア プロジェクトのコードを管理できるようにするサービスです。コードのバージョンごとに行われた変更を記録するバージョン管理システムである Git が使用されています。Google ドキュメントの変更履歴を見ると、そのドキュメントでいつ、どのような編集が行われたかを確認できます。同じように、プロジェクト内のコードのバージョン履歴を追跡できます。プロジェクトに個人として取り組んでいる場合にも、チームとして取り組んでいる場合にも大変便利なものです。

GitHub には、プロジェクトの表示や管理ができるウェブサイトもあります。次の GitHub のリンクを使用すると、Happy Birdthday プロジェクトのファイルをオンラインで閲覧したり、パソコンにダウンロードしたりできます。

この Codelab のコードを取得して Android Studio で開くには、以下の手順に沿って操作します。

コードを取得する

  1. 解答コードの URL をクリックします。プロジェクトの GitHub ページがブラウザで開きます。
  2. プロジェクトの GitHub ページで [Clone or download] をクリックすると、[Clone] ダイアログが開きます。

  1. ダイアログで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ってください。
  2. パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
  3. ZIP ファイルをダブルクリックして展開します。プロジェクト ファイルが入った新しいフォルダが作成されます。

Android Studio でプロジェクトを開く

  1. Android Studio を起動します。
  2. [Welcome to Android Studio] ウィンドウで [Open an existing Android Studio project] をクリックします。

注: Android Studio がすでに開いている場合は、メニューから [File] > [New] > [Import Project] を選択します。

  1. [Import Project] ダイアログで、展開したプロジェクト フォルダがある場所（[ダウンロード] フォルダなど）に移動します。
  2. そのプロジェクト フォルダをダブルクリックします。
  3. Android Studio でプロジェクトが開かれるまで待ちます。
  4. 実行ボタン をクリックして、アプリをビルドし、実行します。期待どおりに動作することを確認します。
  5. [Project] ツール ウィンドウでプロジェクト ファイルを表示して、アプリがどのように実装されているかを確認します。
  • Android Studio の [Resource Manager] を使用すると、画像やその他のリソースを追加して配置することができます。
  • ImageView は、アプリ内で画像を表示するための UI 要素です。
  • ImageViews には、アプリを利用しやすくする内容説明を設定するようにします。
  • 誕生日祝いのメッセージなどのようにユーザーに表示するテキストは、文字列リソースに抽出して、他の言語に翻訳しやすくするようにします。

次のことを行います。

  1. 自分のデザインで独自の誕生日カードアプリを作成します。
  2. 必要な Views の検討から始めます。
  3. どの順序で追加するのが簡単か。
  4. ドローアブル フォルダに追加する必要があるのはどんな画像か。

Android アプリで一般的に使用されるビットマップ イメージには、JPEG ファイルと PNG ファイルの 2 種類があります。PNG ファイルには、透明な（空白）領域を含めることができます。画像形式の詳細については、デベロッパー リファレンスをご覧ください。

  1. 最初に制約と余白で Views の位置を決めてからスタイルを設定するようにしてください。
  2. 一部の画像でテキストをさらに目立たせるには、ShadowColor、ShadowDx、ShadowDy、ShadowRadius をお試しください。

確認:

完成したアプリがエラーなく実行でき、設計したとおりの誕生日カードが表示されるはずです。