LoginSignup
1
1

More than 5 years have passed since last update.

Googleの「Building Your First App」を素直に実施した。

Posted at

基礎の基礎の基礎を身につけるために、
素直に、GoogleのAndroid Tutorialを実施しました。

環境

  • MacBook Pro (Retina 13-inch、Early 2015)
  • OS X El Capitan 10.11.6
  • Java 1.8.0_73
  • Android Studio 1.5.1

実施したこと

プロジェクト新規作成

  1. Android Studioを実行する
  2. 「Start a New Android Studio Project」を押下する
  3. 「New Project」画面で、プロジェクト設定を入力する
  4. 「次へ」を押下する
  5. 「Target Android Devices」画面で、対象とするAndroidデバイス情報を入力する
  6. 「次へ」を押下する
  7. 「Add an activity to Mobile」画面で、「Empty Activity」を選択する
  8. 「次へ」を押下する
  9. 「Customize the Activity」画面では、デフォルト値のまま変更しない
  10. 「終了」を押下する
  11. プロジェクトが新規作成される

エミュレータ上で起動

  1. プロジェクトを開く
  2. 「ツール」>「Android」>「AVD Manager」を押下する
  3. 「Create Virtual Device」を押下する
  4. 「Select Hardware」画面で、「Nexus 6」を選択する
  5. 「次へ」を押下する
  6. 「Select Image page」画面で、エミュレータに相応しいOSバージョンを選択する
  7. 「次へ」を押下する
  8. 「Android Virtual Device」画面では、デフォルト値のまま変更しない
  9. 「終了」を押下する
  10. Android Studioで、「実行」ボタンを押下する
  11. 「Device Chooser」画面で、「Launch emulator」を選択する
  12. 「OK」を押下する
  13. エミュレータ上で、指定したアプリケーションが実行される

シンプルなUIの作成

LinearLayoutの追加

  1. 「res/layout」ディレクトリより、「activity_main.xml」ファイルを開く
  2. 「RelativeLayout」タグを全て削除する
  3. 「LinearLayout」を追加するために、以下を記載する
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="horizontal">
</LinearLayout>

TextFieldの追加

  1. 「EditText」を追加するために、「LinearLayout」タグ内に以下を記載する
    • string.xmlに定義していないため、「android:hint」でコンパイルエラーが発生する
activity_main.xml
<EditText
    android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message"/>

文字列の追加

  1. 「res/values」ディレクトリより、「strings.xml」ファイルを開く
  2. 2つ文字列を追加するために、「resources」タグ内に以下を記載する
strings.xml
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>

ボタンの追加

  1. 「activity_main.xml」ファイルを開く
  2. ボタンを追加するために、「EditText」タグの後に、以下を記載する
activity_main.xml
<Button
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/button_send" />

TextFieldの修正

  1. 幅計算のパフォーマンスを向上させるために、「EditText」タグを以下に変更する
activity_main.xml
<EditText
    android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height'="wrap_content"
    android:hint="@string/edit_message" />

起動確認

  1. アプリケーションを実行する

スクリーンショット 2016-08-27 18.01.51.png

Activityの追加

ボタンの動作の追加

  1. 「activity_main.xml」ファイルを開く
  2. ボタンが押下された時の動作を定義するため、「Button」タグ内に以下を追記する
    • 「onc」くらいでコード補完してくれる
activity_main.xml
android:onClick="sendMessage"
  1. 「java/com.example.myfirstapp/MainActivity.java」を開く
  2. 「sendMessage」メソッドを追加する
MainActivity.java
public class MainActivity extends AppCompatActivity {

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

    /** Called when the user clicks the Send button */
    public void sendMessage(View view) {
        // Do something in response to button.

    }
}

Intentの構築

  1. 「sendMessage」メソッドに以下を追記する
    • 「Intent」や「View」のシンボルでコンパイルエラーが起きている場合、インポート文が足りていない。Option + Enterでインポート文を追加できる
    • 「DisplayMessageActivity.class」でコンパイルエラーが発生するが、後ほどすぐ作成する
MainActivity.java
public class MainActivity extends AppCompatActivity {

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

    /** Called when the user clicks the Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText)findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
        startActivity(intent);

    }
}

二つ目のActivity作成

  1. 「app」ディレクトリを右クリックし、「新規」>「Activity」>「EmptyActivity」を選択する
  2. 「Customize Activity」画面で、アクティビティ名に「DisplayMessageActivity.java」を入力する
  3. 「終了」を押下する

メッセージを表示

  1. 「DisplayMessageActivity.java」のonCreateメソッドに、以下を記載する
DisplayMessageActivity.java
public class DisplayMessageActivity extends AppCompatActivity {

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

        Intent intent = getIntent();
        String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

        TextView textView = new TextView(this);
        textView.setTextSize(40);
        textView.setText(message);

        ViewGroup layout = (ViewGroup) findViewById(R.id.activity_display_message);
        layout.addView(textView);
    }
}

起動確認

  1. アプリケーションを実行する

スクリーンショット 2016-08-29 20.55.59.pngスクリーンショット 2016-08-29 20.56.07.pngスクリーンショット 2016-08-29 20.56.10.png

結果

  • Androidの画面部品の定義方法を理解した。
  • IntentによるActivity間の情報連携の超基本を理解した。

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1