2016/09/15

App Inventor 2 - Add Play / Pause Feature To The Song Player App.

This post is the continuation of my 2 previous posts on AI2 (see below links).

Learning Android Programming Through MIT App Inventor 2
http://wei48221.blogspot.tw/2016/09/learning-android-programming-through.html#more

App Inventor 2 - How to Duplicate Project
http://wei48221.blogspot.tw/2016/09/app-inventor-2-how-to-duplicate-project.html#more

In "Learning Android Programming Through MIT App Inventor 2", I created a simple App. which plays back a song when the image (which represents a button) on the screen is touched. In this post, I want to add the start -> pause -> start (resume) feature. That's, when the image is touched for the 1st time, the App. will play back the song. When the image is touched again, the playback is paused. The playback is resumed when the image is touched again.

Below is a simple flow chart showing the entire process.






The AI2 Blocks


Note,
The block for the "else" part is called out by clicking on the blue gear-like icon of the "if then" block.


The blue gear-like icon can be used to bring out the block for "else if" or "else".

The code written in Android Studio 2.2

Preparation

First, follow my other post  - http://wei48221.blogspot.tw/2016/09/android-studio-22-how-to-copy-project.html to make a copy of the existing project.

Code

MainActivity.java

 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
package wei_hsiunghuang.alliaskofyou_v2;

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;

    int click_count = 0;

    @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) {

        if (click_count == 0) {
            click_count = 1;
            mySound.start();
        } else {
            click_count = 0;
            mySound.pause();
        }
    }
}

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
41
<?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_v2.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="@string/all_i_ask_of_you"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        tools:textColor="@android:color/white"
        android:id="@+id/textView" />

    <TextView
        android:text="@string/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>

Video


--------------------------------------------------------------------------------------------------------------------------

The code below add the feature of displaying a "Play" or "Pause" text for a short period of time.

MainActivity.java

 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
package wei_hsiunghuang.alliaskofyou_v2;

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

public class MainActivity extends AppCompatActivity {

    MediaPlayer mySound;

    int click_count = 0;

    @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) {

        if (click_count == 0) {
            click_count = 1;
            Toast.makeText(this, "Play", Toast.LENGTH_SHORT).show();
            mySound.start();
        } else {
            click_count = 0;
            Toast.makeText(this, "Pause", Toast.LENGTH_SHORT).show();
            mySound.pause();
        }
    }

activity_main.xml

The code for "activity_main.xml" is the same as the one shown above.

Video


References:

Tutorial 013 su App Inventor (edizione 2014) - L'istruzione if...then...else if...else
https://www.youtube.com/watch?v=jpRR2-lj6pg

Android global variable
http://stackoverflow.com/questions/1944656/android-global-variable

Dynamic Buttons with Images: Android Programming
https://www.youtube.com/watch?v=4MFzuP1F-xQ
Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)