コンテンツ
  1. ホーム
  2. Androidアプリ
  3. Android入門
  4. 2023Androidアプリ入門:TextView、PlainText、Button、Toast（Bumblebee）

2023Androidアプリ入門:TextView、PlainText、Button、Toast（Bumblebee）

Androidアプリ Android入門
2022-04-05

こんにちは！　文系SEの焼き芋です！

「アンドロイドアプリ開発で基本が分からない」

テキストボックスやラベル、ボタンってどうやって使うの？

という悩みを抱えていませんか？

そこで、今回は「簡単なアプリ」を作って基本的な使い方をご紹介します。

やきいも

この記事はこんな人におすすめです！
Androidアプリ開発をこれから始める方

この記事で解決できる悩み

以下の基本的な使い方が分かります。

  • TextView
  • PlainText
  • Button
  • Toast
あわせて読みたい
【独学】Androidアプリ開発！初心者向けロードマップ | 1万円で学ぶ Java言語でAndroidアプリ開発をしたい！けど、どうやって進めたら良いのか分からない!という悩みを抱えていませんか？ そこで、今回は「独学でAndroidアプリ（Java言語…
目次

完成アプリ

作成するアプリの完成イメージは

以下の画面の通りです。

名前を入力して、こちらをクリックすると、
『ようこそ！ yakiimosanさん』と表示

アプリの仕様について

デモアプリの仕様は以下の通りです。

  • 「テキストボックス」に名前を入力
  • 「こちらをクリック」ボタンを押す
  • 「ようこそ！　○○さん！！」とメッセージ表示

開発環境

android studio バージョン　Bumblebee

今回の開発環境は以下の通りです。

OSWindows10
メモリ8GB
android studioAndroid Studio Bumblebee (2021.1.1)
JDK1.8.0_172
プログラミング言語Java
開発環境

プログラミングの手順

以下の手順で実装していきます！

STEP
画面レイアウトの実装（activity_main.xml）
STEP
プログラム処理の実装（MainActivity.java)
あわせて読みたい
2023Androidアプリ入門:プロジェクト作成方法（Bumblebee） こんにちは！　文系SEの焼き芋です！ 「アンドロイドアプリ開発で基本が分からない」 という悩みを抱えていませんか？ そこで、今回は「プロジェクト作成方法」をご紹介…

画面レイアウトの実装（activity_main.xml）

「activity_main.xml」のプログラムソースコードは以下の通りです。

プログラムソースを見る！（activity_main.xml）
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/titleLabelId"
        android:layout_width="401dp"
        android:layout_height="64dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="171dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="80dp"
        android:background="#F19B1F"
        android:privateImeOptions="1"
        android:text="焼き芋のデモアプリ"
        android:textColor="#F6F2F0"
        android:textSize="44sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/nameFormId"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <EditText
        android:id="@+id/nameFormId"
        android:layout_width="386dp"
        android:layout_height="47dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="30dp"
        android:ems="10"
        android:hint="名前を入力してください"
        android:inputType="textPersonName"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/butttonId"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleLabelId" />
    <Button
        android:id="@+id/butttonId"
        android:layout_width="382dp"
        android:layout_height="81dp"
        android:layout_marginStart="13dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="61dp"
        android:onClick="clickFunction"
        android:text="こちらをクリック"
        android:textSize="34sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nameFormId" />
</androidx.constraintlayout.widget.ConstraintLayout>

プログラム処理の実装（MainActivity.java)

「MainActivity.java」のプログラムソースコードは以下の通りです。

プログラムソースを見る！（MainActivity.java）
package com.demoapphello;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    public void clickFunction(View view){
        EditText nameForm = (EditText) findViewById(R.id.nameFormId);
        Toast.makeText(MainActivity.this,"ようこそ！ " + nameForm.getText().toString()+"さん!!",Toast.LENGTH_LONG).show();
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
基礎＆応用力をしっかり育成！Androidアプリ開発の教科書 第2版 Java対応 なんちゃって開発者にならないための実践ハンズオン
¥2,722 （2022/04/06 23:59時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング

ボタン色の変え方

次のファイルの値を設定します。

  • activity_main.xml
  • themes.xml
  • themes.xml(night)

activity_main.xmlでは

android:background=”#FB9494″で色を指定する。

プログラムソースを見る！（activity_main.xml）
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FB9494"
            android:onClick="chooseAnswer"
            android:tag="1"
            android:text="3"
            android:textSize="80sp"
            app:layout_column="1"
            app:layout_columnWeight="1"
            app:layout_gravity="fill"
            app:layout_row="0"
            app:layout_rowWeight="1" />

themes.xmlでは、
parent="Theme.AppCompat.Light.NoActionBar"とする

プログラムソースを見る！（themes.xml）
    <resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.DemoBrainTrainer" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

themes.xml(night)では
parent="Theme.AppCompat.Light.NoActionBar"とする

プログラムソースを見る！（themes.xml(night)）
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.DemoBrainTrainer" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_200</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_200</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

まとめ「Androidアプリの基礎」

今回の記事では「アンドロイド（Android）アプリの基礎」について解説しました。

この記事のポイント

以下の基本的な操作

  • TextView
  • PlainText
  • Button
  • Toast

「アンドロイド（Android）アプリの基礎」
のイメージは分かったのではないでしょうか？

やきいも

ボタンやテキストボックスを実際にドロップして配置もできます！

「Visual Basic」のようでプログラミング初心者も
アンドロイドアプリ開発を楽しめるのではないでしょうか。
公式のandroidアプリ開発ユーザーガイドはコチラから参照できます！
開発時のご参考にどうぞ


以上、最後まで読んで頂きありがとうございました！

Androidアプリ Android入門
目次