Android アプリに画像を追加する

1. はじめに

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

前提条件

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

学習内容

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

作成するアプリの概要

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

必要なもの

• Android Studio がインストールされているパソコン
• 「誕生日カードアプリを作成する」の Codelab のアプリ

2. アプリを準備する

1. Android Studio で前の Codelab のプロジェクトを開きます。解答コードまたは作成したコードを使用できます。アプリを実行すると、次のようになります。

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

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

1. こちらをクリックすると、GitHub にある誕生日カード用の画像にアクセスできます。
2. 右側の [Download] ボタンをクリックすると、画像だけが表示されます。

3. 画像を右クリックし、パソコンに androidparty.png というファイル名でファイルを保存します。保存先をメモしておきます（例: ダウンロード フォルダ）。
4. Android Studio のメニューで、[View] > [Tool Windows] > [Resource Manager] をクリックするか、[Project] ウィンドウの左側にある [Resource Manager] タブをクリックします。
5. [Resource Manager] の下にある [+] をクリックして、[Import Drawables] を選択します。すると、ファイル ブラウザが開きます。

6. ファイル ブラウザで、ダウンロードした画像ファイルを見つけて [OK] をクリックします。
7. [Next] をクリックします。Android Studio に画像のプレビューが表示されます。
8. [Import] をクリックします。
9. 画像が正常に読み込まれると、Android Studio によって画像が [Drawable] リストに追加されます。このリストには、アプリのすべての画像とアイコンが入っています。これで、この画像をアプリで使用できるようになりました。

10. メニューの [View] > [Tool Windows] > [Project] をクリックするか、左側の [Project] タブをクリックして、プロジェクト ビューに戻ります。
11. [app] > [res] > [drawable] と展開して、画像がアプリの drawable フォルダにあることを確認します。

3. ImageView を追加する

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

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

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

1. [Project] ウィンドウで activity_main.xml を開きます（[app] > [res] > [layout] > activity_main.xml）。

ヒント: Layout Editor が表示されていない場合は、右上の [Design] モードボタンをクリックします。

2. Layout Editor で、[Palette] に移動してアプリに ImageView をドラッグします。それを中央付近に、テキストと重ならないようにドロップします。

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

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

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

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

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

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

注: Layout Editor における制約とは、あるビューの別のビュー、親レイアウト、または見えないガイドラインに対する連結または位置合わせのことです。たとえば、ビューをコンテナの端から特定の距離に制約することも、常に別のビューの右側、または常にコンテナ内の一番上のビューに制約することもできます。

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

5. ImageView の下部から ConstraintLayout の下部までの制約を追加します。端に近すぎて、上部に対して行ったようにはドラッグできないかもしれません。その場合は、[Attributes] ウィンドウの [Constraint Widget] の下部にある [+] をクリックして、制約を追加します。余白を 0 に設定します。

ヒント: 画面に Views をさらに追加すると、制約の追加が難しくなることがあります。間違った View に制約を追加した場合、Control+Z キー（Mac では Command+Z キー）を使用して、このステップを元に戻すことができます。または、View を右クリックしてメニューをポップアップし、[Clear Constraints of Selection] を選択すると、その View のすべての制約が削除されます。

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

画像は中央に配置されますが、まだ画面いっぱいに表示されるわけではありません。これは以降のステップで修正します。

7. [Constraints] セクションの [Constraint Widget] で、[layout_width] を [0dp (match constraint)] に設定します。「0dp」は、ImageView の幅に対して一致制約を使用するよう Android Studio に指示する簡略表現です。前で追加した制約により、余白を引いても画像の幅は ConstraintLayout と同じになります。

8. [layout_height] を [0dp (match constraint)] に設定します。追加した制約により、余白を引いても ImageView の高さは ConstraintLayout と同じになります。

9. ImageView の幅と高さはアプリ画面と同じですが、画像は ImageView の中央に配置され、その上下に大きな空白があります。これでは見栄えがあまり良くないので、ImageView の [scaleType] を調整します。これは画像のサイズ調整と位置合わせの仕方を指示するものです。ScaleType の詳細については、デベロッパー リファレンス ガイドをご覧ください。現在、アプリは次のように表示されているはずです。

10. [scaleType] 属性を見つけます。見当たらない場合は、下にスクロールするか、検索してください。[scaleType] にいろいろな値を設定して、動作を確認しましょう。

ヒント: 全プロパティのリストからプロパティを見つけるには、[Attributes] の右側にある虫メガネアイコンをクリックし、プロパティの名前を入力します。Android Studio によって、その文字列を含むプロパティのみが表示されます。

11. 終わったら、[scaleType] を [centerCrop] に設定します。これで、画像が歪むことなく画面いっぱいに表示されます。

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

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

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

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

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

これで、ImageView が ConstraintLayout の下のリストの先頭になり、その後が TextViews になったはずです。「Happy Birthday, Sam!」と「From Emma.」というテキストが見えるようになりました（内容記述がないという警告は、この時点では無視してください）。

これで、Android アプリに画像を追加できました。

4. 適切なコーディング慣習を採用する

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

翻訳

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

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

1. 「Happy Birthday, Sam!」が含まれる最初の TextView の横にあるオレンジ色の三角形をクリックします。Android Studio でウィンドウが開き、詳細情報と修正候補が表示されます。[Suggested Fix] が表示されていない場合は、下にスクロールします。

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 か所にまとめることで、アプリ内のテキストの翻訳が簡単になり、アプリの別の場所で文字列を再利用するのも簡単になります。

7. 同じ手順で署名である 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 ではユーザー向けにさまざまなツールが用意されています。たとえば、TalkBack は Android デバイスに組み込まれている Google 製のスクリーン リーダーです。TalkBack により、画面を見ずにデバイスを使用できるよう音声フィードバックが提供されます。ユーザー補助について詳しくは、デベロッパー リファレンス ガイドをご覧ください。

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

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

しかし、このアプリの画像は装飾目的のみで使用されています。ユーザーに伝えたい内容説明を設定する代わりに、importantForAccessibility 属性を no に設定することで、ImageView をスキップするように TalkBack に指示できます。

2. [Component Tree] で、ImageView を選択します。
3. [Attributes] ウィンドウの [All Attributes] セクションで、[importantForAccessibility] を見つけて [no] に設定します。

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

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

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

5. 解答コード

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

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

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

解答コードの URL: https://github.com/google-developer-training/android-basics-kotlin-birthday-card-with-image-app-solution

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

コードを取得する

1. 指定された URL をクリックします。プロジェクトの GitHub ページがブラウザで開きます。
2. プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ダイアログが表示されます。

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

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

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

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

3. [Import Project] ダイアログで、展開したプロジェクト フォルダがある場所（[ダウンロード] フォルダなど）に移動します。
4. プロジェクト フォルダで、「Happy Birthday」フォルダを選択します。
5. [Open] をクリックします。
6. Android Studio でプロジェクトが開かれるまで待ちます。
7. 実行ボタン をクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。
8. [Project] ツール ウィンドウでプロジェクト ファイルを見て、アプリがどのようにセットアップされているかを確認します。

6. まとめ

• Android Studio の [Resource Manager] を使用すると、画像やその他のリソースを追加して配置することができます。
• ImageView は、アプリ内で画像を表示するための UI 要素です。
• ImageViews には、アプリを利用しやすくする内容説明を設定するようにします。
• 誕生日祝いのメッセージのようなユーザーに表示するテキストは、文字列リソースに抽出して、アプリの他言語への翻訳をしやすくします。

7. 詳細

• Kotlin での Android の基礎に関する用語
• Android Studio の Resource Manager
• ImageView クラス
• ユーザー補助機能
• 各種言語のサポート
• GitHub のスタートガイド

8. 自習用練習問題

注: 演習は省略可能です。この Codelab で学習したことを練習するよい機会になります。

次のことを行います。

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

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

5. 最初に制約と余白で Views の位置を決めてからスタイルを設定するようにしてください。
6. 画像の上に重なるテキストを目立たせる場合、shadowColor、shadowDx、shadowDy、shadowRadius を試してみてください。

確認:

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

これで、独自の誕生日カードアプリが作成できました。作品をソーシャル メディアで共有し、ハッシュタグ #LearningKotlin を使って皆にわかるようしましょう。