おすすめ!プログラミング学習サービス5選!詳しくはこちら

2023Androidアプリ入門:TextView、PlainText、Button、Toast(Bumblebee)

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

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

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

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

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

焼き芋

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

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

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

  • TextView
  • PlainText
  • Button
  • Toast
目次

完成アプリ

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

以下の画面の通りです。

名前を入力して、こちらをクリックすると、
『ようこそ! 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)

画面レイアウトの実装(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);
    }
}

ボタン色の変え方

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

  • 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アプリ開発ユーザーガイドはコチラから参照できます!
開発時のご参考にどうぞ


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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次