【Java】Android Studioで画面作成する方法 | Androidアプリ開発

という方に向けた記事になります。

サンプルとして、簡単なスタート画面を作成する場合を考えます。視覚的にレイアウトを編集する方法と、xmlファイルにコードを記述していく方法を見ていきます。

Android Studio 画面作成前の準備

Android Studio 画面作成前の準備として、プロジェクトを作成し、エミュレータでデモ画面が表示できることを確認しましょう。（できている方は飛ばして頂いてOKです。）

プロジェクトの作成

まずは、プロジェクトを作成します。以下の記事を参照ください。

【Java】Android Studioでプロジェクトを作成する方法を解説

アプリ開発したくてAndroid Studioをインストールしたけど、この次はどうしたら良いの？という疑問を解消します。Android Studioのインストールが完了したら、プロジェクトを作成し、アプリ開発を行います。まず、Android Studioを起動...

hyomolution.com

2023.01.09

デモ画面（エミュレータ）で初期画面を表示

プロジェクトの作成ができたら、初期画面を表示してみます。プロジェクト作成後は「Hello World!」と画面に表示されるようになっています。

緑色の▶︎ボタンを押して、エミュレータを起動し、「Hello World!」と表示されたらOKです。以下の記事で詳しく解説しています。

【Java】Android Studio エミュレータを起動してアプリ実行する

アプリが動作するか確認するために、エミュレータを動かしたいんだけど、どうしたら良いの？という疑問を解消します。Android Studioのプロジェクト作成ができたら、エミュレータを使用してアプリの動作を確認してみましょう。プロジェクト作成後は...

hyomolution.com

2023.01.14

Android Studio 画面作成を行う

プロジェクトの作成およびエミュレータでデモ画面表示できたら、実際にAndroid Studio 画面作成を行います。

手順は以下の通り。

1. レイアウトファイルを開く
2. テキストを変更する
3. ボタンを追加する

一つずつ見ていきます。

レイアウトファイルを開く

プロジェクトを作成したら、初期状態で「レイアウトファイル（activity_main.xml）」と「レイアウトの裏の処理を記述するファイル（MainActivity.java）」が作成されています。

今回は画面の作成を行うため、レイアウトファイル（activity_main.xml）を開きます。

また、画像の右上の方で「Code」「Split」「Design」が選択できます。視覚的にレイアウトを編集しつつ、ソースコードも見たいため、Splitを選択します。

テキストを変更する

初期状態では、テキストが「Hello World!」と設定されています。xmlファイルの赤枠の箇所を変更するか、デザインの赤枠の箇所を直接変更することができます。

ただし、テキストを直接レイアウトファイルに設定することは非推奨で、「strings.xml」にテキストを設定し、設定したものをレイアウトファイルから参照することが推奨されています。

非推奨のやり方でもアプリは動くので、慣れてきてから変更してもOKです。

activity_main.xml

" テキストを直接指定（非推奨）
android:text="スタートボタンを押してゲームを始めよう！"

" テキストをstrings.xmlから参照（推奨）
android:text="@string/start_text"

strings.xml

<resources>
    <string name="app_name">hyomolution_sample</string>
    <string name="start_text">スタートボタンを押してゲームを始めよう！</string>
</resources>

ボタンを追加する

画像の赤枠の箇所からボタンをドラッグ&ドロップして追加もしくはxmlファイルにソースコードを追加します。

activity_main.xml

<Button
        android:id="@+id/start_button"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_marginTop="100dp"
        android:ellipsize="middle"
        android:text="@string/start_button"
        android:textSize="20sp" />

まとめ

Android Studio で画面作成する方法について解説しました。最終的なソースコードは以下の通りです。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="150dp"
        android:text="@string/start_text"
        android:textSize="16sp" />

    <Button
        android:id="@+id/start_button"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_marginTop="100dp"
        android:ellipsize="middle"
        android:text="@string/start_button"
        android:textSize="20sp" />

</LinearLayout>