2016/09/07

Learning Android Programming Through MIT App Inventor 2

To me, the most difficult part in doing Android programming is in knowing details such as which libraries to be included, which functions to be invoked, what parameters to pass, etc..

While searching for ways to solve my problem, I came across a video called "Convert App Inventor to Java" (https://www.youtube.com/watch?v=FqNTc4DVYW8). I found that the way Derek converted his App. made with App. Inventor into Java seemed like a good solution.

This is a quick summary of how I created an App. using App Inventor 2 and re-wrote it in Java using Android Studio 2.2.

The App. that I made using App Inventor 2 is a very simple App. that plays back a song whenever I click on the picture on the screen. The detail on how to build this App. can be found at http://www.appinventor.org/content/CourseInABox/Intro/courseinabox.

The MIT App Inventor 2 is available for free at http://ai2.appinventor.mit.edu/.

App. developed using MIT App. Inventor 2



Below is a screen shot of the App.


The "View" window shows how the App. looks like on the screen of an Android phone / tablet.


The "Components" window shows a list of all the components on the screen. In the example below, there are 4 visible components: Screen1, Label1, Button1, Label2 and 1 non-visible component: Player1.


The "Properties" window shows the available properties for the selected component. In the example below, the properties for Screen1 are presented.


Switch over to "Blocks" to see the building blocks of the App.

Here is how the App.works - when Button1 is clicked, Player1 will be activated to play a pre-defined song.


After verifying that the App. works as planned in App. Inventor 2, it's time to move on to re-write it in Android Studio.

Converting the App. Inventor App. to Java Using Android Studio 2.2 Beta 3

1. Launch Android Studio.

2. File -> New -> New Project.


3. Enter the application name and company domain. If you don't have a company domain, simply enter your name. Take note of the project location. This is where the project will be stored.


4. Since we will be developing for phone and tablet, use the default setting here.


5. Select "Empty Activity" and click Next.


6. Click "Finish" to use the default name here.


7. Put the resources needed into the corresponding directories under the "res" directory.

For this App., there are only 2 files that need to be placed under the "res" directory. "alliaskofyoupic.jpg" is the picture that will be used to represent Button1. "alliaskofyou.mp3" is the song that will be played back when Button1 is clicked.

For "alliaskofyoupic.jpg", copy it from the windows folder that contains the file and paste it under the "res\drawable" directory.

For "alliaskofyou.mp3", a directory named "raw" needs to be created first. To create the "raw" directory, right click on "res" and select "New", "Directory".


Then, enter "raw" then click OK.



After the "raw" directory is created, copy "alliaskofyou.mp3" from the windows folder that contains the file and paste it under "raw".


IMPORTANT!!

1. The filename of the file under "res" must be made up of "a~z", "0~9", "_". It cannot contain capital letter ("A~Z").

2. It's better to give the photo and audio files simple name for easy reference in the program. To rename the file name, go into the windows folder that contains the file and rename it from there.

The next step will be to create the screen layout of the App. in Android Studio.


Below are the codes for "MainActivity.java" and "activity_main.xml".

MainActivity.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
package wei_hsiunghuang.alliaskofyou;

import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    MediaPlayer mySound;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mySound = MediaPlayer.create(this, R.raw.alliaskofyou);
    }

    public void playMusic(View view) {
        mySound.start();
    }
}

The code at line 10, 16, and 19~21 were added manually. The rest of the codes were generated by Android Studio.

activity_main.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="wei_hsiunghuang.alliaskofyou.MainActivity"
    android:background="@android:color/black">

    <Button
        android:text=""
        android:onClick="playMusic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_marginTop="19dp"
        android:layout_below="@+id/textView"
        android:background="@drawable/alliaskofyoupic" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="All I Ask Of You"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        tools:textColor="@android:color/white" />

    <TextView
        android:text="Tap To Play Song."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white" />
</RelativeLayout>

Demo Video - App. made with Android Studio

Please turn up the volume of your speaker to hear the playback song.


References:

Convert App Inventor to Java
https://www.youtube.com/watch?v=FqNTc4DVYW8

Learn Android Studio: (13) How to play sounds or music using MediaPlayer.
https://www.youtube.com/watch?v=V1ocJmXeQ28

How do you import sound files like mp3 or waw files into android studio?
https://teamtreehouse.com/community/how-do-you-import-sound-files-like-mp3-or-waw-files-into-android-studio

Example usage of AppCompatActivity in Android
https://androidresearch.wordpress.com/2015/04/24/example-usage-of-appcompatactivity-in-android/

Installing and Running the Emulator in AI2
http://appinventor.mit.edu/explore/ai2/setup-emulator.html
Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)