Published Date : 2020年5月13日14:37

【アンドロイドアプリ】簡単なお遊びAndroidアプリの作り方 ~準備編~
How to make a simple Android app ~ Preparation ~

This blog has an English translation

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

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


Make and play with a simple Android app.


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

Download and process images and music files for use in apps


Let's search for [pexels] in the browser. Don't worry about misspellings on the images.

Responsive image

今回使用させて頂くのは「虎」と「猫」の画像。 なるべく小さいサイズを選んでダウンロードしましょう。 大きいサイズでも後でWindowsフォトでサイズ変更ができます。

This time, I will use images of "tiger" and a "cat". Please choose a smaller size to download. However, if you can only download large photos, try resizing them later in Windows Photos.

Responsive image


Next, go to the "Devil's Soul" site, a free music material site. Thanks for the great site as well as "pexels".

Responsive image


Because there was no "the cry of a cat", I will download this sound source material of "ghostly monster voice" and process it into "cat like-cry".

Responsive image


I confirmed the note that says "You can modify the music of this site. All changes are allowed. However, the copyright has not been waived, so it should be clearly stated that it is a modification of the music that was used from 魔王魂.". Therefore, I will make it clear here again that the song that I am going to modify is the one that I downloaded from "魔王魂".

Responsive image


Download Audacity, the music-editing software, and change the pitch of the sound effect downloaded from "魔王魂" so that it approaches "the cry of a cat".

Responsive image


However, the sound editing by Audacity has nothing to do with this theme, so I will not explain it. Well, it's easy, so try it while watching the video.

Android Studioを立ち上げてアプリのUIを作る
Launch Android Studio to create an app UI

ではAndroid Studioを立ち上げてください。

Now start Android Studio.

Responsive image


Briefly rename the image or sound effect file to make it easier to manage.

Responsive image


Copy and paste the image files into "app/res/drawable/".

Responsive image


To save the sound effects file, right-click on the [app/res/] and choose [New] -> [Directory] to create a [raw] folder.

Responsive image


Sound effects and image files are ready. Next, we will arrange the UI part of the application.

Responsive image

前回作った「Hello Android Studio!」のテキストを消します。右クリックから削除を選択するか、「DEL」キー等を使ってください。

Delete the [Hello Android Studio!] text that you created last time. Select Delete from the right-click, or use the [Del] key, etc.

Responsive image

サーチボックスに「image」と入力して「ImageView」を「Design Editor」にドラッグアンドドロップします。

Type [image] in the search box and drag and drop [ImageView] to [Design Editor].

Responsive image


This time, I want to display "tiger" on the screen first, so I select the image of "tiger".

Responsive image


You can fine-tune the position and size of the image.

Responsive image


Adjust the image margins.

Responsive image


Make the image ID easy to understand.

Responsive image


When scaleType is fitCenter, the entire image is scaled to fit into ImageView (Blue border around the image), preserving the image's aspect ratio.

Responsive image


Place the Button and change its ID and text for clarity.

Responsive image


[onClick] creates a function that runs when the Button is pressed. This application will switch the image and make a sound when you press this button.

Responsive image


I want to switch to a cat image, so I will position the B button on the layout. Then change the margin, ID and text just like the "Tiger" button to create a "onCLick".

Responsive image


That's all. Thank you for your hard work. In the next video and blog, we will complete the [] in charge of the application operation.

See You Next Page!