5分で学ぶ Android プログラミング – ページ 2

Android プログラミング【文字加工② 】 ~ カラー変更 ~

2016年2月13日2016年2月24日たんたむ

android プログラミングの基礎学習です。
ボタンクリックで文字カラーを変更します。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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="com.test.text.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b1"
        android:text="赤"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b2"
        android:text="青"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b3"
        android:text="黄"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="サンプル"
        android:textSize="30sp" />
</LinearLayout>

MainActivity.java (完成)

package com.test.text;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    // クリック処理
    public void b1(View v){
        // 文字カラー変更
        ((TextView)findViewById(R.id.text)).setTextColor(Color.RED);
    }

    public void b2(View v){
        ((TextView)findViewById(R.id.text)).setTextColor(Color.BLUE);
    }

    public void b3(View v){
        ((TextView)findViewById(R.id.text)).setTextColor(Color.YELLOW);
    }

}

Android プログラミング【文字加工① 】 ~ サイズ変更 ~

2016年2月13日2016年2月24日たんたむ

android プログラミングの基礎学習です。
ボタンクリックで文字サイズを変更します。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name Text
Company Domain test.com
Package name com.test.text

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<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="com.test.text.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b1"
        android:text="24sp"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b2"
        android:text="48sp"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b3"
        android:text="96sp"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="サンプル"
        android:textSize="30sp" />
</LinearLayout>

MainActivity.java (完成)

package com.test.text;

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

public class MainActivity extends AppCompatActivity {

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

    // クリック処理
    public void b1(View v){
        // 文字サイズ変更
        ((TextView)findViewById(R.id.text)).setTextSize(24);
    }

    public void b2(View v){
        ((TextView) findViewById(R.id.text)).setTextSize(48);
    }

    public void b3(View v){
        ((TextView) findViewById(R.id.text)).setTextSize(92);
    }
}

ポイント

Android プログラミング【アニメーション ⑤ 】 ~ 複合アニメ ~

2016年1月31日2016年2月1日たんたむ

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

a4.xml ( 上下 + 回転 )

上下移動しながら回転します。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toYDelta="10%" />

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:startOffset="1000"
        android:toDegrees="360" />
</set>

MainActivity.java

前回の【アニメーション ① 】 ~上下移動~ に修正を加えます。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a4));

    }

}

Android プログラミング【アニメーション ④ 】 ~ 透明化 ~

2016年1月31日2016年2月1日たんたむ

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

a3.xml ( 透明化 )

一度だけ透明化します。（元に戻る）

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

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

a3.xml ( 透明を維持 )

一度だけ透明化しますが、元に戻りません。（透明を維持）


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

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

MainActivity.java

前回の【アニメーション ① 】 ~上下移動~ に修正を加えます。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a3));

    }

}

Android プログラミング【アニメーション ③ 】 ~ 回転アニメ ~

2016年1月31日2016年2月1日たんたむ

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

a2.xml

「時計回りに1回」回転するアニメーションです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:startOffset="1000"
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>

a2.xml

「1秒おきに、時計回りを繰り返す」アニメーションです。

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

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:startOffset="1000"
        android:toDegrees="360" />

</set>

MainActivity.java

前回の【アニメーション ① 】 ~上下移動~ に修正を加えます。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a2));

    }

}

Android プログラミング【アニメーション ② 】 ~XML詳細~

2016年1月31日2016年2月1日たんたむ

前回の【アニメーション ① 】 ~上下移動~ の続編です。
アニメーション設定ファイルの解説動画です。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

アニメーション詳細

前回の【アニメーション ① 】 ~上下移動~ 内で出てきた a1.xml の解説です。

Android プログラミング【アニメーション ① 】 ~上下移動~

2016年1月31日2016年2月1日たんたむ

XMLでのシンプルなアニメーションです。
「出来る限り簡単、コピペで出来る」を目指した動画です。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

使用素材

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name Anim
Company Domain test.com
Package name com.test.anim

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

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

    <ImageView
        android:id="@+id/monster"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/monster" />

</RelativeLayout>

ファイル構成

アニメーション専用のフォルダとファイルを作成します。
ファイルやフォルダの階層と名前を確認してください。

a1.xml

上下移動を繰り返します。


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:duration="1000"
    android:fromYDelta="0"
    android:toYDelta="10%"
    android:repeatMode="reverse"
    android:repeatCount="-1"
    />
</set>

ポイント

アニメーションさせたいタイミングに以下を記載します。

findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a1));

MainActivity.java

アプリケーション起動時にアニメーションをスタートしています。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a1));

    }

}

Java図解

Android プログラミング【アクティビティ⑤ 】 ~ 画面を閉じる ~

2016年1月9日2016年1月12日たんたむ

画面を閉じる（アクティビティの終了）を学習します。
画面を閉じるは、最短１行の入力で可能です。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

ポイント

ボタンの追加

「閉じるボタン」を追加します。
編集するXMLのファイル名にご注意ください。

activity_gallery.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:background="#88ffff"
    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.test.activity.Gallery">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ギャラリー"
        android:textSize="30sp" />

    <Button
        android:onClick="onClose"
        android:layout_centerInParent="true"
        android:textSize="30sp"
        android:text="閉じる"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
</RelativeLayout>

プログラムの追加

プログラム（動的な命令）を追加します。
編集するJavaのファイル名にご注意ください。

Gallery.java


package com.test.activity;

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

public class Gallery extends AppCompatActivity {

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

    // クリック処理
    public void onClose( View v){
        finish();       // 画面を閉じる（アクティビティの終了）
    }
}

Android プログラミング【アクティビティ④ 】 ~ 画面の切替 ~

2016年1月8日2016年1月25日たんたむ

アプリ開発に必須のアクティビティを学習します。
今回は、前回作成した画面を表示する方法を学習します。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

MainActivity.java (完成)


package com.test.activity;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    // クリック処理
    public void onButton1( View v){
        Intent intent = new Intent(this,Setting.class); // 画面指定
        startActivity(intent);                          //  画面を開く
    }

    // クリック処理
    public void onButton2( View v){
        Intent intent = new Intent(this,Gallery.class); // 画面指定
        startActivity(intent);                          //  画面を開く
    }
}

ポイント

Android プログラミング【アクティビティ③ 】 ~ 画面の編集 ~

2016年1月8日2016年1月12日たんたむ

前回作成した画面を編集します。
編集するファイルを、間違わなかったら問題ないと思います。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

activity_main.xml

メインのタイトル画面です。
タイトルと画面切り替えのためのボタンが２つあります。


<?xml version="1.0" encoding="utf-8"?>
<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="com.test.activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="タイトル画面"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onButton1"
        android:text="設定画面"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onButton2"
        android:text="ギャラリー"
        android:textSize="30sp" />
</LinearLayout>

activity_setting.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:background="#ffaaff"
    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.test.activity.Setting">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="設定画面"
        android:textSize="30sp" />
</RelativeLayout>

activity_gallery.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:background="#88ffff"
    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.test.activity.Gallery">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ギャラリー"
        android:textSize="30sp" />

</RelativeLayout>

動画リスト

activity_main.xml

MainActivity.java (完成)

動画リスト

プロジェクト名

activity_main.xml

MainActivity.java (完成)

ポイント

動画リスト

a4.xml ( 上下 + 回転 )

MainActivity.java

動画リスト

a3.xml ( 透明化 )

a3.xml ( 透明を維持 )

MainActivity.java

動画リスト

a2.xml

a2.xml

MainActivity.java

動画リスト

アニメーション 詳細

動画リスト

使用素材

プロジェクト名

activity_main.xml

ファイル構成

a1.xml

ポイント

MainActivity.java

Java図解

動画リスト

ポイント

ボタンの追加

activity_gallery.xml

プログラムの追加

Gallery.java

動画リスト

MainActivity.java (完成)

ポイント

動画リスト

activity_main.xml

activity_setting.xml

activity_gallery.xml

アニメーション詳細