Androidアプリの作り方「再生ボタンの設置」

音楽の再生ボタンを設置する

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。
動作を保証する物で無く、未経験者の方の参考動画としてご覧ください。

 

【 動画内容 】

ゲーム等での「音楽の再生ボタンを設置する」を解説した動画です。
前回作成した「バックミュージックとアクティビティ」の続編としてご覧ください。
この動画は、予備知識としてアクティビティのライフサイクルIFを理解していることが前提の動画です。
まだ、未学習の方は参考程度にしてください。( わからない箇所はご質問ください。 )

 

Androidアプリの作り方「再生ボタンの設置」

 

 


【 使用画像 (ご自由にお使いください) 】

アプリ素材 スタートボタンアプリ素材 一時停止ボタン

 


【 レイアウト 】

fragment_main.xml か activity_main.xmlです。開発環境のバージョンで変わります。

 

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
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=”com.example.sound0724.MainActivity$PlaceholderFragment” >

<ImageView
android:id=”@+id/soundButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_centerVertical=”true”
android:onClick=”onSoundButton
android:src=”@drawable/start” />

</RelativeLayout>

 


【 プログラム MainActivity.java 】

import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.Fragment;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {

	/****************************
	 * フィールド ( アプリ全体で使用する変数 )
	 ***************************/
	// 再生の準備
	MediaPlayer p;

	/*********************
	 * 初期化
	 ********************/
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 音楽の読み込み
		p = MediaPlayer.create(getApplicationContext(), R.raw.sound);
		// 連続再生設定
		p.setLooping(true);

		if (savedInstanceState == null) {
			getSupportFragmentManager().beginTransaction()
					.add(R.id.container, new PlaceholderFragment()).commit();
		}
	}

	/*********************
	 * ボタンでの再生と停止
	 ********************/
	public void onSoundButton(View v) {

		// 表示内容の切替え
		ImageView button = (ImageView) findViewById(R.id.soundButton);

		// 再生中なら停止して、停止中なら再生する
		if (p.isPlaying()) {
			p.pause(); // 一時停止
			button.setImageResource(R.drawable.start);
		} else {
			p.start(); // 再生
			button.setImageResource(R.drawable.pause);
		}
	}

	/*****************************
	 * 終了処理(メモリの解放)
	 *****************************/
	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();

		p.release(); // メモリの解放
		p = null; // 音楽プレーヤーを破棄
	}
	
	
	@Override
	protected void onPause() {
		super.onPause();
		// 本来なら停止処理が必要
	}
	
	
	@Override
	protected void onResume() {
		super.onResume();
		// 本来なら再開処理が必要
	}
  ~ 以下略 ~

動画で学ぶ、Androidアプリの作り方

バックミュージックとアクティビティ

※ 新バージョンがあります → [ バックミュージックの再生 ]

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。
動作を保証する物で無く、未経験者の方の参考動画としてご覧ください。

 

【 動画内容 】

ゲーム等での「バックミュージックを流す」を解説した動画です。
バックミュージック(音楽)を流すにはアクティビティのライフサイクルを理解する必要があるので、簡単にですが解説しています。

 

MediaPlayerとActivity

 

動画学習:アクティビティのライフサイクル

 


【 プログラム MainActivity.java 】

 

import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.Fragment;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

	// 再生の準備
	MediaPlayer p;

	/*****************************
	 * 起動処理 (読み込みと設定 )
	 *****************************/
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		Toast.makeText(this, "onCreate() 起動処理", Toast.LENGTH_SHORT).show();
		// 音楽の読み込み
		p = MediaPlayer.create(getApplicationContext(), R.raw.sound);
		// 連続再生設定
		p.setLooping(true);

		if (savedInstanceState == null) {
			getSupportFragmentManager().beginTransaction()
					.add(R.id.container, new PlaceholderFragment()).commit();
		}
	}

	/*****************************
	 * 画面表示
	 *****************************/
	@Override
	protected void onResume() {
		super.onResume();

		Toast.makeText(this, "onResume() 再生処理", Toast.LENGTH_SHORT).show();
		p.start(); // 再生
	}

	/*****************************
	 * 画面非表示
	 *****************************/
	@Override
	protected void onPause() {
		// TODO Auto-generated method stub
		super.onPause();

		Toast.makeText(this, "onPause() 画面非表示", Toast.LENGTH_SHORT).show();
		p.pause(); // 一時停止
	}

	/*****************************
	 * 終了処理(メモリの解放)
	 *****************************/
	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();

		Toast.makeText(this, "onDestroy() 終了処理", Toast.LENGTH_SHORT).show();
		p.release();// メモリの解放
		p = null; // 音楽プレーヤーを破棄
	}

	~ 以下略 ~














動画で学ぶ、Androidアプリの作り方

サイトの表示(ブラウザの起動)

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。

開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。

未経験者の方の参考動画としてご覧ください。

 

動画で学ぶアプリ開発【サイトの表示】

 

【 動画内容 】

ボタンやイメージをクリックでサイトを表示する。

正確に言うと「ブラウザを起動して、サイトを表示する」になります。アプリ内でサイトを表示するわけではありません。

 

【 学習メリット 】

動画を参考にしてもらえると、「サイト紹介」や「アプリ紹介」に役立ちます。

動画は簡単に見せているだけですので、本格的な理解はJavaのオブジェクト指向を先に学ぶことをおすすめします。

 


 

XML ファイル

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:id=”@+id/LinearLayout1″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
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=”com.example.test0616.MainActivity$PlaceholderFragment” >

<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:onClick=”onWeb”
android:text=”サイト紹介” />

<ImageView
android:id=”@+id/imageView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:onClick=”onImage”
android:src=”@drawable/app_chick” />

</LinearLayout>


Javaファイル (MainActivity.java)

~ 略 ~
import android.content.Intent;
import android.net.Uri;
~ 略 ~

public class MainActivity extends ActionBarActivity {

// Webボタンを押したら
public void onWeb(View v) {

Uri uri = Uri.parse(“http://hakoniwadesign.com/”);

Intent intent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

}

// 画像を押したら
public void onImage(View v) {

Uri uri = Uri.parse(“https://play.google.com/store/apps/details?id=net.comitore.pricecheck01”);

Intent intent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

}

~ 以下略 ~


プレゼン資料抜粋

20140617 サイトの表示(ブラウザの起動)

動画で学ぶ、Androidアプリの作り方

ページの切り替え(アクティビティ切り替え)

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。

開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。

未経験者の方の参考動画としてご覧ください。

 

【 動画内容 】

複数の画面の切り替え方の動画です。

専門書では「アクティビティの切り替え」等で説明されてますが、専門用語を省き「画面の切り替え」として説明させてもらってます。

アプリ開発動画【ページの切り替え】

 

【 学習メリット 】

動画を参考にしてもらえると、「ヘルプページ」や「設定画面」「タイトルページ」等の切り替えに役立ちます。

動画は簡単に見せているだけですので、本格的な学習はJavaのオブジェクト指向を先に学ぶことをおすすめします。

 


 

【 タイトル画面 fragment_main.xml 】【画面の切り替え】タイトル画面

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
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=”com.example.text0601d.MainActivity$PlaceholderFragment” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”85dp”
android:text=”メイン画面”
android:textSize=”40sp” />

<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/textView1″
android:layout_centerHorizontal=”true”
android:layout_marginTop=”79dp”
android:onClick=”onHelp”
android:text=”ヘルプ” />

<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/button1″
android:layout_centerHorizontal=”true”
android:layout_marginTop=”32dp”
android:onClick=”onSetting”
android:text=”設 定” />

</RelativeLayout>

 

【 タイトル画面 MainActivity 】

package com.example.text0601d;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;
import android.os.Build;

/*****************************************
* メイン画面
* ボタンを押すと別ページ表示(別のアクティビティを表示)
*/
public class MainActivity extends ActionBarActivity {

        // ヘルプボタンを押したら実行される
          public void onHelp(View v){
                    // ポップアップ表示
                    Toast.makeText(this, “ヘルプボタンを押したよ”, Toast.LENGTH_SHORT).show();

                    // 別画面表示
                    Intent intent = new Intent(this,com.example.text0601d.HelpActivity.class);
                    startActivity(intent);
          }

          // 設定ボタンを押したら実行される
          public void onSetting(View v){
                    // ポップアップ表示
                    Toast.makeText(this, “設定ボタンを押したよ”, Toast.LENGTH_SHORT).show();

                    // 別画面表示
                    Intent intent = new Intent(this,com.example.text0601d.SettingActivity.class);
                    startActivity(intent);
          }

          @Override
          protected void onCreate(Bundle savedInstanceState) {

                    未変更

          }

          @Override
          public boolean onCreateOptionsMenu(Menu menu) {

                    未変更
          }

          @Override
          public boolean onOptionsItemSelected(MenuItem item) {
                    未変更
          }

          public static class PlaceholderFragment extends Fragment {

                    未変更

          }

          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                    未変更
          }

}

 


【 ヘルプ画面 fragment_help.xml 】【画面の切り替え】ヘルプページ

※ タイトル文字と、背景色を設定しただけです。

※ Javaファイルも変更していません。

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”#eeee77″
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=”com.example.text0601d.HelpActivity$PlaceholderFragment” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”54dp”
android:text=”ヘルプページ”
android:textSize=”40sp” />

</RelativeLayout>

 


 

 

【 ヘルプ画面 fragment_setting.xml 】【画面の切り替え】セッテング

※ ボタン、タイトル文字と、背景色を設定しただけです。

※ Javaファイルも変更していません。

 

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”#77eeee”
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=”com.example.text0601d.SettingActivity$PlaceholderFragment” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”97dp”
android:text=”設定画面”
android:textSize=”40sp” />

<ToggleButton
android:id=”@+id/toggleButton1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_below=”@+id/textView1″
android:layout_marginLeft=”57dp”
android:layout_marginTop=”32dp”
android:text=”ToggleButton” />

<ToggleButton
android:id=”@+id/toggleButton2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/toggleButton1″
android:layout_below=”@+id/toggleButton1″
android:layout_marginTop=”24dp”
android:text=”ToggleButton” />

</RelativeLayout>

動画で学ぶ、Androidアプリの作り方

15分で作る(?) たまごアプリ

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
未経験者の方が参考にしてもらえると幸いです。

アプリの作り方_学習内容

 
難易度 :★★★☆☆ ( 未経験者にもあるていど理解、再現できるレベル )
 

画面に表示されるたまごをクリックすると、たまごにヒビが入り、たまごからヒヨコがうまれるアプリです。
このアプリはヒヨコが生まれるだけですが、クリックの仕方で別の動物が生まれたり、スピードを競うなど、ゲーム性を持たせることができます。
YouTube-たまごアプリ

title_動画で学ぶアプリ作成_作成の流れ

  • 新規アプリケーション作成
  • 画像の準備
  • レイアウト作成 ( たまごの表示率を設定 )
  • クリック処理
  • カウントダウン ( 条件分析 )
  • アニメーション処理

15分で作る(?) たまごアプリ_ソース

【 レイアウトファイル 】

rev > layout > fragment_main.xml

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:id=”@+id/LinearLayout1″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@drawable/back”
android:gravity=”center_vertical|center_horizontal”
android:orientation=”vertical”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:weightSum=”1″
tools:context=”com.example.eggtap3.MainActivity$PlaceholderFragment” >

<ImageView

android:id=”@+id/imageView1″
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_weight=”0.3″
android:onClick=”onEgg”
android:src=”@drawable/egg0″ />

</LinearLayout>


【 アニメーションリソース 】

rev > anim > tap.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android” >

<rotate
android:duration=”30″
android:toDegrees=”20″
android:pivotX=”50%”
android:pivotY=”50%” >
</rotate>

</set>


 

【 Javaファイル 】

MainActivity.java

package com.example.eggtap3;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

// 卵が割れる数
int eggCount =30;

public void onEgg( View v){

// 画像のリモコン
ImageView iv = (ImageView)findViewById(R.id.imageView1);

// カウントダウン
eggCount–;

// 画像を変える+条件分析
if( eggCount<20) iv.setImageResource(R.drawable.egg1);
if( eggCount<10) iv.setImageResource(R.drawable.egg2);
if( eggCount<5) iv.setImageResource(R.drawable.egg3);
if( eggCount<0) iv.setImageResource(R.drawable.egg4);

// アニメーション処理
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.tap));

}

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment())
.commit();

}

~ 以下略 ~

}

動画で学ぶ、Androidアプリの作り方

15分で作る(?) 占いアプリ

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
未経験者の方が参考にしてもらえると幸いです。

 

YouTube_動物占いアプリ

 

【 動画紹介 】

シンプルな動物占いアプリです。
ボタンをクリックすることで、画像とテキスト(文字)をランダムに表示します。

15分での作成と解説を目指しましたが、大幅に時間オーバーしました。(m_m)

説明付きはきついですね・・・
解説は入れていますが、この動画だけでの「アプリ作成の理解」を前提をしていません。
あくまでも、他の動画や市販テキストを合わせての学習が前提です。
続きを読む

動画で学ぶ、Androidアプリの作り方

15分で作る カウンターアプリ

カウンターアプリの作り方を紹介している動画です。

新規作成から15分で完成していますので、解説等は簡単です。
真似してもらうと、完成できるハズですが、開発環境のバージョン等の違いでうまく行かない人も多いと思います。

( SDK4.X以降では大きく違う為 )
細かい解説は別の動画で紹介していますので、うまく行かない方はそちらも参考にしてみてください。

YouTube_15分で作るカウンターアプリ

続きを読む