Published Date : 2020年5月15日11:03

簡単なお遊びAndroidアプリの作り方 ~実装編~
How to make a simple Android app ~ Implementation version ~

This blog has an English translation

YouTubeにアップした動画、「【アンドロイドアプリ】How to make a simple Android app ~ Implementation version ~」の補足説明の記事です。

Here's a little more about the 「【アンドロイドアプリ】How to make a simple Android app ~ Implementation version ~」 video I uploaded to YouTube.


Make and play with a simple Android app. ~ Implementation version ~


It's a video that can be understood in a short period of time even when you're busy, without any unnecessary explanation.


Table of Contents

implement an app


From the top tab, select [].

Responsive image

動画と同じ場所に「ImageView image;」と書いてください。すると自動で「android.widget.ImageView;」がインポートされ、 ImageViewクラス型であるimageがJAVAに認識されます。

Please write [ImageView image;] in the same place as the video. This automatically imports [android.widget.ImageView;] and JAVA recognizes the ImageView class type [image].

Responsive image

Responsive image


Now, let's create the action when the [tiger] button placed in the previous video is pressed. Write the contents of the [switchTiger()] method set to [onClick()] of the [tiger] button.

メソッドの引数に「View view」を指定すると、先ほどと同様にAndroid Studioが自動で適切なライブラリをインポートしてくれます。

If you specify [View view] as the method argument, Android Studio will automatically import the appropriate libraries as before.

Responsive image

Responsive image

「Log.i("Info", "I am a tiger be hold!");」はボタンが押された時にコンソールに"I am a tiger be hold!"と表示させます。

[Log.i("Info" , "I am a tiger be hold!");" displays "I am a tiger be hold!" on the console when the button is pressed.

Responsive image

画面の一番下にある「protected void onCreate(Bundle savedInstanceState)」メソッドが呼び出された時(アプリを立ち上げると一番最初に実行されるメソッド)に「image = (ImageView) findViewById(;」が虎の画像を「image」に割り当てる。




When the [protected void onCreate(Bundle savedInstanceState)] method at the bottom of the screen is called (The first method executed when the app is launched), [image = (ImageView) findViewById(;] assigns the tiger image to [image].

This is the image that appears by default when the application is launched.

When the [tiger] button is pressed, the image of the tiger is assigned to the [image] by [image.setImageResource(R.drawable.tiger);] again.

In the case of a tiger image, the image of a tiger is fine, but when the [tiger] button is pressed in the case of a cat image, the image must be changed to a tiger, so this is the process.

Responsive image

「R.drawable.tiger」はR(app/res/)の(drawable)の(tiger.jpg)を意味している。そしてRは(res/) ディレクトリにある全リソースのリソース ID が含まれている。 onCreate()メソッドにある「image = (ImageView) findViewById(;」の「」は「tiger.jpg」をリソース IDとして登録させた「tigerImageView」を参照しています。

[R.drawable.tiger] means (tiger.jpg) of (drawable) of R (app/res/). and R contains the resource IDs of all resources in the (res/) directory. [] in [image = (ImageView) findViewById(;] in the onCreate() method refers to the [tigerImageView] that registered [tiger.jpg] as the resource ID.

Responsive image

「MediaPlayer mediaPlayer」と書くと、先ほどと同様にAndroid Studioが自動で適切なライブラリをインポートしてくれます。

Just write [MediaPlayer mediaPlayer] and Android Studio will automatically import the appropriate libraries for you.

Responsive image

「MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.tiger);」で虎の鳴き声のMP3ファイルを読み込んで、「mediaPlayer」に渡し、使える状態にします。

[MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.tiger);] reads the MP3 file of the tiger's roar, passes it to [mediaPlayer], and makes it available.

Responsive image

Responsive image


Use 「mediaPlayer.start();」 to make a sound.

Responsive image


You then create a method [switchCat()] that switches to the cat image and cry when you press [Back button] just like the [switchTiger()] method.

Responsive image

Responsive image

Responsive image

Responsive image

Responsive image

Responsive image

本来なら「image = (ImageView) findViewById(;」は一番最初に書くべきコードでしたが、都合により、後に書いてしまいました。なので、忘れずに「image = (ImageView) findViewById(;」を「onCreate()メソッド」の中に書き足してください。

「image = (ImageView) findViewById(;」 was supposed to be the first code to write, but for some reason I wrote it later. So don't forget to add 「image = (ImageView) findViewById(;」 to 「onCreate() method」.

Responsive image


Now that you are ready, you can start the application by pressing the play button of the "▷" mark on the upper right.

Responsive image


If the emulator shows a tiger image and two buttons, and there is nothing wrong with the console, it is a success.

Responsive image


Finally, I'll show you all the code.

// あなたのパッケージネーム
// Your package name
package com.akasatanahama.anew;


import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView image;

    public void switchTiger(View view) {
        Log.i("Info", "I am a tiger be hold!");


        MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.tiger);

    public void switchCat(View view) {
        Log.i("Info", "Actually, I was a kitten.");


        MediaPlayer mediaPlayer2 = MediaPlayer.create(this, R.raw.meow);

    protected void onCreate(Bundle savedInstanceState) {

        image = (ImageView) findViewById(;


That's all. Thank you for your hard work.

See You Next Page!