TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でImageViewを追加する方法【初心者向け】
オーダーメイドコース
icon
icon
Androidアプリ開発

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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では初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

MacでAndroidアプリの開発環境を構築する方法（Android Studio）

Androidアプリを開発しようと思っても、開発環境の構築で戸惑う人も多いと思います。 そこで、MacのPCを使ってAndroidアプリの開発環境を構築す...
Androidアプリ開発

Androidアプリ開発でColorクラスを使って文字の色を変える方法【初心者向け】

Androidアプリを開発では、Colorクラスを使ってアプリの起動中に文字の色を変えることができます。 Colorクラスとは、その名の通り、色に関する指...
Androidアプリ開発

初心者でもできた！Androidアプリの開発環境構築方法（Windows編）

自分でもAndroidアプリを開発してみたい！と思う方も多いのではないでしょうか。 今回は、初心者でもできるWindowsのAndroidアプリの環境構築...
Androidアプリ開発

初心者が基礎からKotlinを学べる本10選を現役エンジニアが紹介

今回は、初心者がKotlinの基礎から学べる本10選について解説します。   田島悠介 今回は、Androidアプリ開発に関する内容...
Androidアプリ開発

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッ...
Androidアプリ開発

Androidアプリ開発で新規プロジェクトを作成する方法【初心者向け】

Android StudioでAndroidアプリを開発する場合、まず最初にプロジェクトを作成する必要があります。今回は、このプロジェクトを作成する方法を初心者...
Androidアプリ開発

あわせてよく読まれている記事

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリ開発コースGridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発でBitmapクラスを使って画像を表示させる方法

Androidアプリを開発では、Bitmapクラスを使って画像を表示したり変更したりすることができます。 そこで今回はBitmapクラスを使って画像を表示させる方法を初心者向けにご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！画像を表示したり変更したりするのってどうやって実装したらいいんですか〜？ 田島悠介 それならBitmapクラスを使うと実装できるよ。Bitmapクラスは複数の画像形式に対応しているんだ。 大石ゆかり どうやって使うんですか〜？   Bitmapクラスで使える画像形式 Bitmapクラスを使って画像を表示するときに使用できる画像形式は次の3種類です。 JPEG（JPG） PNG GIF これらの画像形式で画像を用意するようにしましょう。     Bitmapクラスの使い方 それでは、実際に使用してみましょう。   使用する画像は、resファイル内にdrawableファイルを用意し、画像を配置します。その際、形式が違うファイルで画像の名前が同じにならないように注意しましょう。   今回は、次の２つの画像を用意しました。   まず、レイアウトファイルにImageViewを用意しておきます。 ImageViewはレイアウトエディタのパレットの「Images」から配置できます。パレット内のImageViewを、配置したい場所までドラッグしましょう。   すると、以下の画像のようなダイアログが表示されます。これは、表示する画像を選択するためのダイアログです。 今回は、後ほど表示する画像を選択するのでキャンセルにしてもいいのですが、画像が変化したことをわかりやすくするため、drawableフォルダにコピーした画像「blue」を選択し、[OK]ボタンをクリックします。   これでImageViewの用意ができました。   ここでMainActivity.javaには次のように記述します。 今回はアプリが起動したときに実行されるonCreateメソッド内に次のように記述してみましょう。 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView iv = (ImageView)findViewById(R.id.imageView); Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.drawable.red); iv.setImageBitmap(bmp1); } 各行の説明をします。 Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.drawable.red); この行では、drawableに保存した画像をBitmapに変換しています。   iv.setImageBitmap(bmp1); この行で、上で変換したBitmapをレイアウトに用意したImageViewにセットしています。   これで画像の表示の設定ができました。アプリを実行して画面を確認してみましょう。 アプリを起動すると、onCreateメゾットが実行されるので、ImageViewに表示されるのは、「red.png」になります。   Bitmapクラスを使って画像を表示する方法は以上です。   大石ゆかり 三角から丸に変更できましたね♪ 田島悠介 Androidアプリで何か操作した後に画像を変更することってあるだろうから、覚えておいたほうがいいね。 大石ゆかり はい、覚えておきます♪   Androidアプリ開発をさらに効率よくしたい場合は、Androidアプリ開発のLayoutの使い方も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？ 田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。 大石ゆかり あ、そうなんですか〜！？   TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。 ただし、行をまたいでパーツを配置することはできませんのでご注意ください。     TableLayoutを配置する 今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。   最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。   次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください） 配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。     [PR] Androidアプリ開発コースTableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。     TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout>     TableLayout上のパーツの配置を調整する 「0」ボタンは2つのセルをまたいで配置されています。 複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。 <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ />   実行すると、この画像のようにボタンが表示されます。   また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。 列番号は、一番左から「0,1,2,3…」となっています。 <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_column=”3″ android:text=”+” /> </TableRow>   さらに実行すると、この画像のようにボタンが表示されます。 これで完成です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり tableタグを同じように設置できますね！ 田島悠介 そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。 大石ゆかり そうですね〜♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のFrameLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、FrameLayout（フレームレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！FrameLayoutっていうレイアウトがあるんですけど、これって何に使うんですか〜？ 田島悠介 FrameLayoutはビューを重ねて表示したい時に使うんだ。ちょっと試しにやってみようか。   FrameLayoutとは FrameLayoutとは、パーツをひとつだけ配置して使用するレイアウトです。位置の指定はできず、FrameLayoutに配置したパーツは左上に表示されます。 また、FrameLayoutに複数のパーツを配置した場合、パーツが重なって表示されます。     FrameLayoutを配置する FrameLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のFrameLayoutを、プレビュー画面までドラッグしましょう。     [PR] Androidアプリ開発コースFrameLayoutにパーツを配置する FrameLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。   配置したパーツの位置を指定することはできず、画面の左上に表示されます。   さらにもうひとつパーツを配置してみましょう。すると先ほど配置したパーツの上に重なって表示されます。     FrameLayoutの応用 最後に応用として、FrameLayoutを利用して次のような画面のレイアウトを作る例を紹介します。 ボタンを押すことで表示される内容が変わる画面です。   レイアウトは、次のようになっています。 最初にLinearLayout（Vertical）（黄色枠）を配置します。 次に、LinearLayout（Hrizontal）（青枠）を配置し、画面を切り替えるためのボタンを配置します。 さらに、FrameLayout（赤枠）を配置し、その中に表示する画面を作成するために、レイアウトを3つ重ねた状態で配置しています。   なお、表示する画面の切り替えは、FrameLayoutの中に作成したレイアウトを、javaで制御しています。 レイアウトのソースは以下のようになります。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面3" /> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/layout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面１" android:textSize="40dp" /> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面２" /> </LinearLayout> <LinearLayout android:id="@+id/layout3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面３" /> </LinearLayout> </FrameLayout> </LinearLayout> MainActivityには以下のように記述しました。 public class MainActivity extends AppCompatActivity { private LinearLayout mLayout1; private LinearLayout mLayout2; private LinearLayout mLayout3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLayout1 = (LinearLayout)findViewById(R.id.layout1); mLayout2 = (LinearLayout)findViewById(R.id.layout2); mLayout3 = (LinearLayout)findViewById(R.id.layout3); findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout1.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout2.setVisibility(View.VISIBLE); mLayout1.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout3.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout1.setVisibility(View.INVISIBLE); } }); } } 今回の記事は以上です。 さらに他のレイアウトを試したい場合はGridLayoutの使い方も合わせてご覧ください。   大石ゆかり なるほど、こうやって使うんですね！ 田島悠介 使うのが少し難しいLayoutだけど、使い方によっては画面内で画面を切り替えるようなこともできるから、覚えておくと良いね。 大石ゆかり はい！   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のRelativeLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、RelativeLayout（リラティブレイアウト・相対レイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリでボタンの並びを相対的に並べたいんですけど、何かいい方法ってないですか〜？ 田島悠介 それならRelativeLayoutを使うとできるよ。パーツの位置を相対的に設置できるんだ。 大石ゆかり RelativeLayout、ですか？   RelativeLayoutとは RelativeLayoutとは、基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。     RelativeLayoutを配置する 画面を最初から作成する場合は、xmlタブを開いてデフォルトで記述されているコードをすべて削除しておきましょう。 RelativeLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のRelativeLayoutを、プレビュー画面までドラッグしましょう。     [PR] Androidアプリ開発コースRelativeLayoutにパーツを配置する RelativeLayout上にパーツを配置してみましょう。 一番最初に配置したパーツはレイアウトの基準として配置されています。   次に配置したパーツは、一つ前に配置したパーツを基準に配置されます。また、基準にしているパーツは矢印で確認できます。   パーツを移動させると、そのパーツを基準としている他のパーツも同じように移動します。     RelativeLayoutのコードを確認する 最後に、RelativeLayoutで、下の画像のようにボタンを3つ配置した画面を作成しコードを確認してみましょう。   xmlタブでコードを確認すると、このようになっています。 <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignParentLeft=”true” android:layout_alignParentTop=”true” android:layout_marginLeft=”59dp” android:layout_marginTop=”56dp” android:text=”Button” /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/button1″ android:layout_below=”@+id/button1″ android:layout_marginTop=”80dp” android:text=”Button” /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_below=”@+id/button2″ android:layout_marginLeft=”43dp” android:layout_marginTop=”68dp” android:layout_toRightOf=”@+id/button2″ android:text=”Button” /> </RelativeLayout> グラフィカルレイアウトでうまく微調整ができない場合は、コードを使って微調整をするようにしましょう。各コードを編集する際は、下記の内容を参考にしてください。   レイアウトを基準に配置したい場合は、下記の属性を「true」にする android:layout_alignParentTop　：　レイアウトの上端に配置する android:layout_alignParentBottoｍ　：　レイアウトの下端に配置する android:layout_alignParentLeft　：　レイアウトの左端に配置する android:layout_alignParentRight　：　レイアウトの右端に配置する android:layout_centerHorizontal　：　レイアウトの水平方向の中央に配置する android:layout_centerVertical　：　レイアウトの垂直方向の中央に配置する android:layout_centerInParent　：　レイアウトの中央に配置する   パーツを基準に配置をしている場合は、下記の属性に基準としているパーツIDを指定する layout_below　：　指定したパーツの下に配置 layout_alignLeft　：　指定したパーツの左に配置 ayout_toRightOf　：　指定したパーツの右に配置   基準としたパーツやレイアウトからの距離を指定する場合は、下記の属性に距離を指定する layout_marginTop　：　上の距離 layout_marginBottom　：　下の距離 layout_marginLeft　：　左側の距離 layout_marginRight　：　右側の距離 （指定がない場合は、基準のパーツの位置と揃えて配置します）   今回の記事は以上です。 さらに他のレイアウトを試したい場合はTableLayoutの使い方も合わせてご覧ください。   大石ゆかり RelativeLayoutはとても使う場面が多そうなレイアウトですね〜♪ 田島悠介 そうだね。絶対的な位置関係だと一つパーツをずらした時に他のパーツも動かさないといけないから、使うととても便利だね。 大石ゆかり はい！   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

【ゼロから作る！】初心者から始めるAndroidアプリ開発の開発手順とは

Androidアプリの開発手順をゼロから紹介していきます。 今回の記事では、アプリを作ったことがないという未経験者でも分かりやすく2人のキャラクターが登場しながらAndroidアプリ開発について解説しています。 「Androidアプリを作る上で必要なもの」「Androidアプリを作ってリリースしてみたい」などそれぞれシチュエーションに分けて細かく紹介していきます。   では、Androidアプリの開発手順を実際に見ていきましょう！   目次 Androidアプリ開発をする上で必要なもの 実際にAndroidアプリを作ってみる アプリをリリースしてみる アプリで収益を得る   大石ゆかり 田島メンターってなんでiPhoneとAndroid、両方のスマホ持ってるんですかー？ 田島悠介 なんでって両方のアプリを勉強するためだよ！ 大石ゆかり え、でも同じアプリ入れてるじゃないですかっ！ 田島悠介 実はね、iPhoneとAndroidで同じアプリでも違うデザインになっていたりするんだよ！ 大石ゆかり へぇ〜そうなんですね。どっちも同じように作ってると思ってました！ 田島悠介 実は結構違うんだよね！ ちなみにiPhoneとAndroid、それぞれ持ってる人の割合って何%くらいか知ってる？ 大石ゆかり んー、私の周り見てもみんなiPhoneだからほとんどiPhoneなんじゃないですかー？ 田島悠介 たしかに日本人でiPhone使ってる人は多いよね！ でも世界ではスマホを使ってる人の71.9%くらいがAndroidって言われているんだよ！（2021年1月statcounter調べ：Mobile Operating System Market Share Worldwide | StatCounter Global Stats） 大石ゆかり え、そうなんですかー！初めて知りました！ 田島悠介 アプリを海外の人に使ってもらおうと思ったらAndroidから作る方が良いかもね！せっかくだからAndroidアプリの作り方を一通り説明しようか？ 大石ゆかり ぜひ！知っておきたいです！(Androidアプリ作れたら海外で働く夢も叶うかも♪)   Androidアプリ開発をする上で必要なもの PC(Mac/Windows/Linuxのいずれか) Android Studio JavaやKotlinなどのAndroid開発言語 Androidアプリの開発を進めるためには上の3つが必要です。   PC MacやWindowsなどのOSに関わらず、メモリは16GBほど搭載しておくと、開発する際にストレスなく動作させることが可能です。 もちろん、CPU性能も影響します。   開発環境 Android StudioではなくEclipseという環境でアプリ開発することも可能ですが、Android Studioで作る場合が一般的です。 Android Studioに関しては次の記事を参考にしていただくと分かりやすいです。 「AndroidStudio」を使ったアプリ開発環境の構築方法 | TechAcademyマガジン   言語 Java Javaは世界中の基幹システムで使われているプログラミング言語です。 Androidアプリ開発でも利用しますが、業務システムでもよく利用されるため、Javaを習得することで幅広い業務のシステム開発を行うことが可能になります。 Javaについては、次の記事を参考にしていただくと分かりやすいです。 今さら聞けない！Javaとは 【初心者向け】 | TechAcademyマガジン   Kotlin KotlinはJava言語と100%の互換性を保ちつつ、より簡潔にソースコードを書けるよう、現代的な言語仕様が多く取り入れられています。 2010年に開発が始まり、2017年にはAndroid開発用言語として正式サポートされた新しい言語のため、書きやすい文法であるよう工夫されています。 Kotlinについては、次の記事を参考にしていただくと分かりやすいです。 Androidアプリ開発に使うメリットを解説！Kotlinとは【初心者向け】 | TechAcademyマガジン   Dart（Flutter2） Dart言語を利用してAndroid開発をを行う際、Flutter2というフレームワークを利用します。 Flutter2を利用することで、「iOS」「Android」などのスマホアプリ、「Windows 10」「macOS」「Linux」などのデスクトップアプリ、「Google Chrome」「Safari」「Microsoft　Edge」など、ブラウザアプリを1つのソースコードですべて開発可能です。 https://flutter.dev/   JavaScript（React Native） JavaScriptを利用するReact Nativeでは、React.jsというフロントエンドフレームワークを利用してスマホアプリの開発が可能です。 基本的にはフロントエンドプログラミングの技術を利用しているため、フロントエンドエンジニアがスマホアプリを開発する際、低い学習コストで開発が可能です。 React.jsもReact NativeもFacebookがサポートしています。 React Native · A framework for building native apps using React また、中にはツールを使ってアプリ開発できるものもありますが、プログラミングをして自分の力で作りたいという人は「Java」というプログラミング言語を理解する必要があるでしょう。   C#（Unity） C#を利用して開発するUnityでは、ゲームの開発を行うことが可能です。 Unityで開発したゲームは、AndroidやiPhoneなどのスマホアプリだけでなく、PlayStationやNintendoSwitchやXboxなどの家庭用ゲーム機用や、WindowsやMacやLinuxなどのPC向けゲームなどでリリースすることが可能です。 Unityについては、次の記事を参考にしていただくと分かりやすいです。 今さら聞けない！ゲーム開発で人気のUnityとは | TechAcademyマガジン   C#（.net） Xamarin という機能を利用して、iOS、Android、Windows向けアプリケーションを実装可能です。 Xamarinという名称は、今後、MAUI という名称に変更される予定です。 Xamarin とは – Xamarin | Microsoft Docs   ノーコード ノーコードとは、コードを書かずに実装が可能なツールを言います。 実際プログラミング言語を学ばなくてもある一定レベルのアプリを作成することが可能です。 スマホアプリを実装可能なノーコードツールはたくさんありますが、代表的なものとしてGoogleが買収したAppSheetなどがあります。 Make an App with No-Code. Start building today for free.
Androidアプリ開発

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でImageViewを追加する方法【初心者向け】