★★☆☆☆ – ページ 3 – ハコニワデザイン

Android Studio 入門【 ScrollView 】ボタンの縦スクロール

2015年10月13日2015年11月11日たんたむ

写真のギャラリーや、画面からはみ出すメニュー等を表示させる「ScrollView（スクロールビュー）」の使用方法です。
シンプルに解説したいので、縦スクロールのみで解説させてもらいます。

重なりに注意

LayoutとViewの重なりに注意してください。

Layout → SucroseView → Layout → ボタンなどのViewの順に重なっています。

match_parentが無難

wrap_contentだとボタンの上でフリックする必要があります。

activity_main.xml

ボタンを縦に並べたレイアウトです。

<?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: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=".MainActivity">


    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button13" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button14" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button15" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button16" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button17" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button18" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button19" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

15分で作る？【簡易ストップウォッチ】

2015年10月6日2016年1月7日たんたむ

「15分で作る」シリーズはある程度知識のある方向けの動画です。
未経験の方でもコピペで再現出来るように目指していますが、理解には「RPGで学ぶ」「3分で学ぶ」を先にご覧ください。

動画の内容

超シンプルなストップウォッチです。

「とりあえず動かす！」を優先しているので、デザインもアレンジもありません。

難易度：★★☆☆☆ 未経験でも再現は簡単、アレンジは難しい

activity_main.xml（未完成）

<?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: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=".MainActivity">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />
</RelativeLayout>

MainActivity.java（スタートのみ）

package com.hakoniwadesign.stopwatch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Chronometer;

public class MainActivity extends AppCompatActivity {

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

        ((Chronometer)findViewById(R.id.c)).start();
    }
}

activity_main.xml（完成）

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

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="スタート"
        android:textSize="40sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="ストップ"
        android:textSize="40sp" />

</LinearLayout>

MainActivity.java（完成）

package com.hakoniwadesign.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;

public class MainActivity extends AppCompatActivity {

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

    // スタート
    public void onStart( View v ){
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();
    }

    // ストップ
    public void onStop( View v ){
        ((Chronometer)findViewById(R.id.c)).stop();
    }

}

15分で作る？【動画の再生】

2015年10月5日2015年10月10日たんたむ

アプリ内に組み込んだ動画再生方法です。
具体的にはresフォルダ内の動画（mp4）を再生します。

動画素材

サンプル動画【シャカシャカ】

サンプル動画【ひよこ】

＊注意点：動画の形式によって再生できないものがありました。

activity_main.xml

<?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: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=".MainActivity">

    <VideoView
        android:id="@+id/v"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

MainActivity.java

package com.hakoniwadesign.video;

import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

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

        // ID取得
        VideoView v = (VideoView)findViewById(R.id.v);

        // 動画の指定（mp4の読込み）
        v.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.raw.video1));

        // 再生スタート
        v.start();

        // コントローラNO（動画をタップするとメニュー表示）
        v.setMediaController(new MediaController(this));

    }
}

Android プログラミング【ボタンで文字変更】

2015年8月11日2015年8月15日たんたむ

動画の内容

前回の「ボタンで画像変更」に「文字の変更」を追加します。

画面のボタンクリックで背景画像と説明文が変更します。

ポイント

前回の動画に以下を追加すると可能です。（コピペでOK ）

activity_main.xml

    <TextView
        android:id="@+id/t0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="aaaaaaaaaa"
        android:textSize="30dp" />

MainActivity.java

import android.widget.TextView;
((TextView)findViewById(R.id.t0)).setText("０mだよー");

activity_main.xml

画面作りは簡略化します。コピペでOKです。


<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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/b0" />

    <Button
        android:id="@+id/b0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="b0"
        android:text="0m" />

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b0"
        android:onClick="b1"
        android:text="10m" />

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:onClick="b2"
        android:text="20m" />

    <TextView
        android:id="@+id/t0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="あああああ"
        android:textSize="30sp" />

</RelativeLayout>

MainActivity.java

プログラミング（動的な変化）です。赤文字を適切な場所にコピペすると動くはずです。

package com.test.test0811;

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

public class MainActivity extends AppCompatActivity {

    // 0mのボタン
    public void b0(View v) {
        // 画像の変更 （b0画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b0);
        ((TextView) findViewById(R.id.t0)).setText("浮上したよ");
    }

    // 10mのボタン
    public void b1(View v) {
        // 画像の変更 （b1画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b1);
        ((TextView) findViewById(R.id.t0)).setText("10mです");
    }

    // 20mのボタン
    public void b2(View v) {
        // 画像の変更 （b2画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b2);
        ((TextView) findViewById(R.id.t0)).setText("20mまで潜ったよ！");
    }

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ポイント

Android プログラミング【ボタンで画像変更】

2015年8月3日2015年8月17日たんたむ

前編 → YouTube
後編 → YouTube

動画の内容

画面上にボタンを配置して「ボタンを押すと背景画像が変わる」を学習します。
もちろん、背景画像だけで無く、キャラクター自信や表情も変更できます。

作成の流れ

今回は「新規作成から完成」までを動画に納めたいので、細かい解説は省かせてもらいます。(m_m)
詳細は以下リンク先をご覧ください。

アプリの新規作成
画像の準備
画面レイアウト（背景画像）
画面レイアウト（ボタンの配置）
クリック処理（本題）
背景画像の変更（本題）

使用素材

以下、背景画像をパソコン内に保存し、アプリ内のdrawableフォルダーに保存してください。

activity_main.xml

画面作りは簡略化します。コピペでOKです。

<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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/b0" />

    <Button
        android:id="@+id/b0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="b0"
        android:text="0m" />

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b0"
        android:onClick="b1"
        android:text="10m" />

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:onClick="b2"
        android:text="20m" />

</RelativeLayout>

MainActivity.java

プログラミング（動的な変化）です。赤文字を適切な場所にコピペすると動くはずです。

package com.test.testf;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    // 0mのボタン
    public void b0(View v) {
        // 画像の変更 （b0画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b0);
    }

    // 10mのボタン
    public void b1(View v) {
        // 画像の変更 （b1画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b1);
    }

    // 20mのボタン
    public void b2(View v) {
        // 画像の変更 （b2画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b2);
    }

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ポイント

Android プログラミング【 Viewの非表示】

2015年5月14日2015年8月14日たんたむ

動画の内容

前回学習した「文字枠の追加」の「文字枠」を非表示にする方法です。
この動画の前に「文字枠の追加」を済ませておいてください。

Viewの非表示【TextViewを非表示にする】 — TextViewを非表示にする

応用で「タイトルボタンを非表示にする」などかなり幅広く使える命令です。

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"
    tools:context=".MainActivity">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/charText"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textSize="40dp"
        android:layout_marginBottom="20dp" />


</RelativeLayout>

MainActivity.java （完成）

アプリケーション起動時に文字枠（TextView）の非表示

package com.test.test; // この行はコピペするとエラーが出ます。（アプリ毎に違う内容になる）

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 文字枠の非表示
        findViewById(R.id.charText).setVisibility(View.INVISIBLE);
    }

    // 以下略 （変更不要）
    
}

ポイント

findViewById(R.id.●●).setVisibility(View.INVISIBLE);

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"
    tools:context=".MainActivity">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/charText"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textSize="40dp"
        android:layout_marginBottom="20dp" />


</RelativeLayout>

Android studioとEclipse比較してみた

2015年1月8日2015年2月19日たんたむ

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

動画リスト

【動画リスト】

・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

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

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

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

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

<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>

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) {
        ～略～
    }
}

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

2014年9月23日2015年2月19日たんたむ

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

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

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

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

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

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

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・画像の配置と並べ替え

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

３・画像の配置と並べ替え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・起動テスト

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

重なりに注意

match_parentが無難

activity_main.xml

動画の内容

activity_main.xml（未完成）

MainActivity.java（スタートのみ）

activity_main.xml（完成）

MainActivity.java（完成）

動画素材

activity_main.xml

MainActivity.java

動画の内容

ポイント

activity_main.xml

MainActivity.java

activity_main.xml

MainActivity.java

ポイント

動画の内容

作成の流れ

使用素材

activity_main.xml

MainActivity.java

ポイント

動画の内容

activity_main.xml （完成）

MainActivity.java （完成）

ポイント

activity_main.xml （おまけ・非表示→表示）

動画リスト

2・縦並びレイアウトへ変更 （ LinearLayout ）

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

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

6・起動テスト

2・縦並びレイアウトへ変更（ LinearLayout ）