簡易ミュージックアプリ

簡易ミュージックアプリ

アンドロイドアプリ作成の「複数のバックミュージック再生」を解説しているページです。
アンドロイドアプリの作り方「簡易ミュージックアプリ」
  • 内  容 :複数曲の再生と停止 「バックミュージックの再生」の続編
  • 難 易 度 :★★★★☆ ( 未経験者の理解、応用は難しいので、再現できるを目指す )
  • 予備知識 :変数、メソッド、IF関数、IDの理解、XML
  • 注  意 :開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
  • 補  足 :2015/02/11現在、Android StudioとEclipseの両方で対応。
  1. はじめに → YouTube
  2. 素材の用意 → YouTube
  3. レイアウト作成 → YouTube
  4. 画像の変更 → YouTube
  5. 1曲の再生と停止 → YouTube
  6. 複数曲の再生と停止 → YouTube
  7. Android Studioで復習 → YouTube
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz
jazz(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock
lock(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops
pops (停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz2
jazz2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock2
lock2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops2
pops2 (再生中)

利用サイト様 :Music is VFR

mp3ファイルを3曲用意してください。
極端に長い曲、短い曲、容量の大きい曲以外でしたら問題ありません。
フォルダ名、ファイル名は全て小文字で以下と全く同じにしてください。

  • raw (フォルダ)
    • jazz.mp3
    • lock.mp3
    • pops.mp3
アンドロイドアプリの作り方-【-簡易ミュージックアプリ-】-保存場所
保存場所

※ ファイル名、フォルダ名は完全に一致してください。1文字でも違うとエラーです。

アプリ名[Eclipseの場合]
エクリプスの場合

アプリ名[アンドロイドスタジオの場合]
アンドロイド スタジオの場合
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pops"
        android:src="@drawable/pops"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:onClick="pops"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lock"
        android:src="@drawable/lock"
        android:layout_weight="1"
        android:onClick="lock"
        android:scaleType="centerCrop" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/jazz"
        android:layout_gravity="center_vertical"
        android:src="@drawable/jazz"
        android:layout_weight="1"
        android:onClick="jazz"
        android:scaleType="centerCrop" />

</LinearLayout>

XMLの解説図です。詳しくは動画をご覧ください。

アンドロイドアプリの作り方【ミュージックアプリ】XML解説
XML解説
package com.test.soundtest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }
}

注意点!!

サンプルを適切にコピペすることで動作しますが・・・・意外と難しいです。

1文字違い、1行違うだけでアウトです。
以下を意識しながら確してください。

  • 記載場所 : {}や;より前か後ろか?
  • 文字の違い : 大文字と小文字 、全角と半角
  • コピー範囲  : 最後の;が入っているか?
  • ファイル名  : ファイル名、フォルダ名が1文字でもちがうと正常に動作しません
package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
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);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

        // mp3の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.pops);
        p.setLooping(true);  // 連続再生設定
        p.start(); // 再生
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}

package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
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);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

        // mp3の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.pops);
        p.setLooping(true);  // 連続再生設定
        p.start(); // 再生
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }
        p = MediaPlayer.create(getApplicationContext(), R.raw.lock);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }

        p = MediaPlayer.create(getApplicationContext(), R.raw.jazz);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}
オプションメニューの利用

オプションメニューの利用

Android-アプリ入門-オプションメニューの利用

Android アプリ開発の【オプションメニューの利用】を解説しているページです。

【 動画リスト 】

アプリ開発 オプションメニューの利用 完成図
完成図

オプションメニューを押したら連動した画像が表示されます。

難易度:★★★★☆ ( 未経験者には理解も利用も困難 )
補 足:Android StudioとEclipseで確認済み
補 足:開発バージョンが違うと正常に動かない場合があります。

【 予備知識 】

以下の予備知識が必要です。

  • XML
  • 変数
  • メソッド
  • if
  • id

【 流れ 】

  1. 新規アプリ作成
  2. 画像の表示 (activity_main.xml)
  3. メニューを押したら画像が変わる (MainActivity.java)
  4. メニューにアイテムを追加する (menu_main.xml)
  5. メニューアイテムに合わせて画像を変える (MainActivity.java)
  6. Eclipseで復習

動画で学ぶスマフォアプリ_使用素材

※ 以下をパソコンの中に保存してください。

オプションメニューの利用 エビ
エビ
オプションメニューの利用 イワシ
イワシ
オプションメニューの利用 カメ
カメ
オプションメニューの利用 シャチ
シャチ

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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/image_syati" />

</RelativeLayout>

ImageView図解

menu_main.xml オプションメニュー


<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/iwasi"
        android:title="イワシ"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item
        android:id="@+id/ebi"
        android:title="エビ"
        android:orderInCategory="200"
        app:showAsAction="never" />

    <item
        android:id="@+id/kame"
        android:title="カメ"
        android:orderInCategory="300"
        app:showAsAction="never" />

    <item
        android:id="@+id/syati"
        android:title="シャチ"
        android:orderInCategory="400"
        app:showAsAction="never" />

</menu>

Android-オプションメニュー図解

MainActivity.java (プログラム)

package com.text.menutest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;     // 3・インポート必要

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


     // 4・オプションメニューの作成
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 4・res → menu → menu_main.xml をメニューに設定
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    // 3・オプションメニューが押されたら
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        // 3・画像変更の準備
        ImageView iv = (ImageView)findViewById(R.id.imageView);
        // 3・イワシの画像に変更(説明用:後で削除)
        iv.setImageResource(R.drawable.image_iwasi);

        // 5・メニューの押されたアイテムidを取得
        int id = item.getItemId();

        // id iwasi(イワシ)が押されたら
        if (id == R.id.iwasi) {
            // イワシの画像に変更(本番)
            iv.setImageResource(R.drawable.image_iwasi);
            // 正常終了
            return true;
        }

        // id ebi(エビ)が押されたら
        if (id == R.id.ebi) {
            // エビの画像に変更
            iv.setImageResource(R.drawable.image_ebi);
            return true;
        }

        // id kame(カメ)が押されたら
        if (id == R.id.kame) {
            // カメの画像に変更
            iv.setImageResource(R.drawable.image_kame);
            return true;
        }

        // シャチは非掲載です。挑戦してみてくださいね!

        return super.onOptionsItemSelected(item);
    }
}

バックミュージックの再生

バックミュージックの再生

Androidアプリ開発 バックミュージックの再生

Android アプリ開発の学習動画で、バックミュージックの再生を解説しているページです。
この動画は、以前公開した「バックミュージックとアクティビティ」の新バージョン(2015/01/20)になります。

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

ゲーム等での「バックミュージックを流す」を解説した動画です。

  • 難 易 度 :★★★☆☆ ( 未経験者も再現は可能・理解と応用は難しい )
  • 予備知識 :理解にはメソッドの理解が必要です。
  • 注  意 :開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
  • 補  足 :2015/01/20現在、Android StudioとEclipseの両方で対応。

【 動画リスト 】

・1/5 はじめに
http://youtu.be/kcFvcMIFDyQ

・2/5 新規作成と音楽ファイルの読み込み
http://youtu.be/LvYUozNJZrM

・3/5 とりあえず再生してみる
http://youtu.be/fdE3Bkl1_Qc

・4/5 アクティビティのライフサイクル
http://youtu.be/q0t6FFCdJUQ

・5/5 Android Studio
http://youtu.be/uxcCOPe_VAA

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

  1. 新規アプリケーション作成
  2. 音楽ファイルの準備  フリーBGM・音楽素材 MusMus
  3. プログラミング
    • 再生の準備
    • アクティビティのライフサイクルとは?
    • アプリ起動時に再生
    • ホームボタンで一時停止
    • 戻るボタンで終了 ( メモリの解放 )
  4. Android Studioで復習

MainActivity.java (プログラム)

package ~ パッケージ略 ~;

import android.media.MediaPlayer;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    // 再生の準備
    MediaPlayer p;

    // アプリ起動時に1回だけ実行
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

    // 画面が表示されるたびに実行
    @Override
    protected void onResume() {
        super.onResume();
        p.start(); // 再生
    }

    // 画面が非表示に実行
    @Override
    protected void onPause() {
        super.onPause();
        p.pause(); // 一時停止
    }

    // アプリ終了時に実行
    @Override
    protected void onDestroy() {
        super.onDestroy();
        p.release();// メモリの解放
        p = null; // 音楽プレーヤーを破棄
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        ~ 略 ~
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ~ 略 ~
    }
}


Android studioとEclipse比較してみた

Android studioとEclipse比較してみた

Android開発ツールの比較動画です。
現段階の主流であろうEclipseと、これからの主流になるであろうAndroid Studioを比較してみます。

Android studioとEclipse比較してみた

動画リスト

【 動画リスト 】

・1/4 はじめに
http://youtu.be/WtmB3pZ2OS0

・2/4 起動編
http://youtu.be/v6AddV3lJgE

・3/4 作成編
http://youtu.be/vRDJESb6WxQ

・4/4 スタジオのメリット
http://youtu.be/I-2WCVWTIKM

title_タイトル_対象者

・現在Eclipseで開発を行っているが、Android Studioに興味がある。
・これからアプリ開発を考えているが、どのツールを使うか迷っている

難易度 :★★☆☆☆ ( 未経験者にも参考可能なレベル。実際の利用は基礎知識が必要 )

※ 比較動画ですので丁寧には解説していません。

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

・StudioとEclipseの画面構成
・アプリ新規作成
・カウンターアプリの作成
・Android Studioのメリット

カウンターアプリ、キャプチャ画像
サンプルアプリ完成図

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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView"
        android:textSize="36sp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="41dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="59dp"
        android:onClick="onButton" />

</RelativeLayout>

MainActivity.java (プログラム)

package com.example.test0107;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {

    // ↓ここから  ////////////////////////
    int c = 0;	
    public void onButton(View v){
	    c++;
	    TextView t = (TextView)findViewById(R.id.textView1);
	    t.setText(c + "");
    }
    // ↑ここまで  ////////////////////////
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ~略~
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ~略~
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ~略~
    }
}

プログラミング基礎 2/8 ~入力ルール~

プログラミング基礎 2/8 ~入力ルール~

プログラミング基礎 2/8 ~入力ルール~

プログラミング入力時のルール「注意点」を収録しています。
ルールを知ることで、学習効率を上げ、トラブル防止(挫折防止)に役立って貰えたら幸いです。

難易度 :★☆☆☆☆

以下の予備知識が必要です。

学習の流れ

  1. アプリ新規作成
  2. 入力ルール

入力ルール(MainActivity.java)

  • +-アイコンはくくりの開閉
  • 文字の色は、意味の違い
    • 紫色:意味のある単語( 不用意に編集不可 )
    • 緑色:意味の無いコメント( 自由に編集可能 )
    • ※ 設定により変更可能
  • 赤いマークはエラーマーク
  • 単語と単語は半角スペースで開ける
    1. ○ 複数の半角スペース
    2. ○ タブや改行を入れる
    3. × 全角スペース
    4. × 単語を途中で切る
    5. × 単語をつなげる
    6. × 小文字を大文字に変える
  • 改行や空白は見やすくするため
  • Ctrl + Shift + F で自動調整
  • ;は1行の終わり( 日本語の「。」と同じ )
  • 基本は半角で記入する
  • タブは階層を表している
プログラミング基礎 1/8 ~プログラミングとは~

プログラミング基礎 1/8 ~プログラミングとは~

プログラミング基礎 1/8 ~プログラミングとは~

学習内容

スマフォアプリを作成したいけど、プログラミング未経験者を対象にした「プログラミングとは?」の解説動画です。

未経験の方に「プログラミングをマジで動画で教える」を目指した動画、第一弾です。

注意: このシリーズはあくまでも「基礎知識(予備知識)」で、具体的な学習は続編の「プログラミング入門」で行う予定です。

難易度 :★☆☆☆☆

  • スマフォアプリを作りたい方
  • プログラミングは全くの未経験

動画内のスライド紹介

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

ボタンとXML

ボタンとXML

プログラミング未経験者対象の【 Androidアプリ作成動画 】で、このページは「画面作成の基本操作」を解説した動画です。

注意:この動画は未経験者の方の参考動画で、動作を保証するものではありません。
開発バージョン違い、PC環境の違い、文字コード等の設定違いにより、コピペしてもうまく機能しない時があります。

動画で学ぶアプリ開発「ボタンとXMLレイアウト」

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

未経験者対象の「画面の作り方」の解説動画です。

「ボタンとRelativeLayout」の内容をXMLで作成する解説動画です。

【 学習の流れ 】

  1. 新規アプリケーション作成
  2. XMLとは
  3. XMLでの画面作成

【 XMLとは 】

  1. 画面を確認してみよう
  2. XML → 文字で画面を作成する文法

【 XML図解 】

動画で学ぶAndroid開発 「XML図解」

XML図解-XMLの書き方

【 XMLでの画面作成 】

  1. 削除と配置をしてみよう。
  2. 横幅を変えてみよう。
  3. 画面の中央に配置してみよう。
  4. ボタンの右寄せ、左寄せ。
  5. 余白を設定してみよう。
ボタンとRelativeLayout

ボタンとRelativeLayout

プログラミング未経験者対象の【 Androidアプリ作成動画 】で、このページは「画面作成の基本操作」を解説した動画です。

注意:この動画は未経験者の方の参考動画で、動作を保証するものではありません。
開発バージョン違い、PC環境の違い、文字コード等の設定違いにより、コピペしてもうまく機能しない時があります。

動画で学ぶアプリ開発 「ButtonとRelativeLayout」

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

未経験者対象の「画面の作り方」の解説動画です。
RelativeLayoutにボタンを配置し、基本的な設定の仕方を解説しています。

【 学習の流れ 】

  1. 新規アプリケーション作成
  2. 編集画面の調整と理解
  3. ボタンの編集
  4. RelativeLayout基礎

【 ボタンの編集 】

  1. 文字を変更してみよう。
  2. 文字サイズを変更してみよう。
  3. ボタンサイズを変更してみよう。
    • wrap_content(ラップコンテンツ・素材を包み込む)
    • match_parent(マッチペアレント・親に合わせる)

【 RelativeLayout基礎 】

  1. RelativeLayoutとは
    • Relative(リラティブ・相対)とLayout(レイアウト・配置)
    • 相対的:○○の右、○○の下
    • 具体的:画面の中央、画面の右、画面の下
  2. 画面の中央に配置してみよう。
    • Horizontal(ホリゾンタル・水平)とVertical(ヴァティカル・垂直)
    • true(トゥルー・真)とfalse(フォルス・偽)
  3. ボタンの右寄せ、左寄せ。
    • alignParent(アラインペアレント・親とそろえる)
  4. 余白を設定してみよう。
    • margin(マージン・余白)
サイズ違いのイラストを並べよう

サイズ違いのイラストを並べよう

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

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

Androidアプリの作り方_サイズの違うイラストの並べ方

SeekBarの利用_学習内容

この動画は「サイズの違うイラストの並べ方」を解説したものです。
ポイントさえつかむと、自由に応用することができると思います。

難易度 :★★☆☆☆ ( 未経験者にも、再現、応用が可能なレベル。(エクリプスの基本操作は必要 ))

動画で学ぶスマフォアプリ_使用素材

動画で学べるAndroidアプリ開発_サイズが違う画像のレイアウト
クラゲイラスト400px
サメのイラスト
サメのイラスト600px
クジライラスト
クジライラスト800px

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

  1. 新規アプリ作成
  2. 縦並びレイアウトへ変更  ( LinearLayout )
  3. 画像の用意
    • ネットからダウンロード
    • アプリに組み込む
  4. 画像の配置と並べ替え
  5. 画像の表示サイズをそろえる
  6. 起動テスト
  7. 説明を省いた復習

動画で学ぶAndroidアプリ 【ソース】

2・縦並びレイアウトへ変更 ( LinearLayout )

  • TextViewの削除
  • 縦並びのレイアウトに変更する

縦並びレイアウト_LinearLayout

<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.test0924b.MainActivity" >

</LinearLayout>

※ バージョンによって多少違いがありますが、学習には問題ないです。

4・画像の配置と並べ替え

  • 画像を3枚配置する
  • 画像の並べ替え

3・画像の配置と並べ替え2

<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.test0924b.MainActivity" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_whale800px" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_shark600px" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_jellyfish400px" />

</LinearLayout>

5・画像の表示サイズをそろえる

  • 全ての画像の、横幅と縦幅を最大化する
  • 全ての画像の、表示の割合を指定する

5・画像の表示サイズをそろえる

<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.test0922.MainActivity" >

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_whale800px" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_shark600px" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_jellyfish400px" />

</LinearLayout>

6・起動テスト

  1. パッケージエクスプローラ内のプロジェクトをクリック( 名前は作成毎に異なる )
  2. メニューの実行ボタンをクリック
  3. 30秒~2分ほどでエミュレータが起動し、アプリが表示される

動画で学ぶAndroidアプリ_エミュレータ起動時の注意「プロジェクトを先にクリック」

SeekBar(シークバー)の利用

SeekBar(シークバー)の利用

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
 
未経験者を対象にして、できる限り分かりやすく解説しているつもりですが、プログラミングスキルや開発環境によって理解出来なかったり、再現出来ない時もあります。

SeekBarの利用_YouTubeアイコン

 

SeekBarの利用_学習内容
この動画は「SeekBar(シークバー)を使って背景色を変更する」を解説したものです。
 
難易度 :★★★★☆ ( 未経験者には理解も利用も困難で「再現出来れば十分」なレベル )
 
SeekBarを本格的に理解するのはオブジェクト指向を深く理解できてないと厳しいと思います。

残念ながら、初心者の方は「理解より再現(自分のパソコンで再現させる)」を目指してください。
不思議な物で、分からずに体験していると、学習が楽になりますので、是非2回は再現してみてください。
 
 
title_動画で学ぶアプリ作成_作成の流れ

  • 新規アプリケーション作成
  • 背景色の変更
  • SeekBerを配置
  • SeekBerでの背景色の変更
  • 復習作成( 同じ物をもう一度 )

 
 
SeekBarの利用_ソース

 

1・背景色の変更(前置き)

  • RelativeLayoutにIDを付ける
  • TextViewを削除する
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    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.test1.MainActivity" >

</RelativeLayout>

 

・setBackgroundColorで背景色を付ける (MainActivity.java)

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        // この段階でエラーが出る人はバージョンUPが必要と思われます。( 2014/09/10 現在 )
    }

// ~ 以下略 (変更しません)~

SeekBarの利用_(RelativeLayout)findViewById

SeekBarの利用_setBackgroundColor(Color.rgb(255,-0,-0));


2・SeekBarの配置

・RelativeLayoutにIDを付ける (activity_main.xml)

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    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.test1.MainActivity" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:max="255" />

</RelativeLayout>

 

 


3-1・バーを変更したときの処理を登録する (1/3)

・setOnSeekBarChangeListenerの設定 ( MainActivity.java )

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;
import android.widget.SeekBar;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        
        /************************************
         * シークバーの利用
         ***********************************/
        SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
        sb.setOnSeekBarChangeListener(l);            // エラーが出ます
    }
// ~ 以下略 (変更しません)~

SeekBarの利用_sb.setOnSeekBarChangeListener(l);
 
 


3-2・バーを変更したときの処理を登録する (2/3)

・OnSeekBarChangeListenerの設定 ( MainActivity.java )

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        
        /************************************
         * シークバーの利用
         ***********************************/
        SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
//      sb.setBackgroundColor(Color.rgb(0, 0, 255));
        sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                        // TODO Auto-generated method stub
				
                }
			
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                        // TODO Auto-generated method stub
				
                }
			
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress,
                        boolean fromUser) {
                        // TODO Auto-generated method stub
				
                }
        });
        // ***ここまで*****************************
    }
// ~ 以下略 (変更しません)~

SeekBarの利用_イベントリスナー
 
 


3-3・バーを変更したときの処理を登録する (3/3)

  • 背景色変更の処理を移動する。
  • 赤色の変数をpに統一しています。

・ ( MainActivity.java )

/************************************
* シークバーの利用
***********************************/
SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // タッチを離した時の処理を記載
    }
			
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // タッチした時の処理を記載
    }
			
    @Override
    public void onProgressChanged(SeekBar seekBar, int p, boolean fromUser) {
        // 値が変化する度に実行される
				
        /************************************
        * 背景色の変更
        ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(p, 0, 0));
    }
});
// ***ここまで*****************************