TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でEditTextを追加する方法【初心者向け】
icon
icon
Androidアプリ開発

Androidアプリ開発でEditTextを追加する方法【初心者向け】

Androidアプリ開発でGUIコンポーネントの【EditText】を追加する方法を初心者向けに解説した記事です。EditTextを使うと、テキストボックスを簡単に作成することができす。また、「電話」や「メール」の設定も可能です。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はその中の1つである、EditTextを追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！Androidアプリでテキスト入力を実装したいんですけど、どうやるんですか〜？

田島悠介

EditTextっていうGUIコンポーネントを使うんだ。

大石ゆかり

EditTextですか？

 

EditTextとは

EditTextとは、テキストボックスを作成したいときに使用するGUIコンポーネントです。

EditTextは、一般的に使用される「PlainText」のほかに、「Phone」や「E-mail」などさまざまな種類が用意されています。これらのEditTextはそれぞれ、入力制限として、入力できる文字の種類があらかじめ制限されて、入力をするときに表示されるキーボードも切り替わる仕組みになっています。
例えば、「Number」を使用している場合、作成したテキストボックスに入力できるのは、数字のみになり、フォーカスされたときに表示されるキーボードは数値になります。また、「Password」を使用すると、入力した文字が黒丸で表示されます。

795316b92fc766b0181f6fef074f03fa2-620x381

 

TextViewを配置する

EditTextはレイアウトエディタのパレットの「テキスト・フィールド」から配置できます。
配置したいEditTextを配置したい場所までドラッグするだけです。幅は、プロパティの「layout_width」に数値を入力するか、match_parent(画面いっぱいに)などを入力します。

2b530e80c7d0de90885e285c5d7980632-620x472

このようにEditTextを配置すると、xmlファイルには次のようなコードが追加されます。

<EditText
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/editText”
android:layout_marginTop=”30dp”
android:layout_alignParentTop=”true”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true” />

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

EditTextのカスタマイズ

最後に、簡単なカスタマイズの方法をご紹介します。
テキストボックスには、入力ヒントを表示することが可能です。プロパティの「hint」に表示させたい文字を入力します。

c8856789ec11ab8b1013037cef6929f92-620x481

また、下の画像のように複数行を表示させるテキストボックスを作成することもできます。

94ed160662be198949535a112047e9b41-620x584

テキストボックスを作成するには、プロパティの「Imput Type」を選択し、「textMultiLine」にチェックを入れます。

3a4f695a458cb0ac0aceaa2eb13ac2dd2-620x486

「Line」に表示させたい行数を入力します。

f96d9b4281f6d16b3c7589aed5a17be51-620x478

 

EditTextの基本的な使い方は以上です。

他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でTextViewを追加する方法も合わせてご覧ください。

 

大石ゆかり

思ったより簡単に実装できました♪

田島悠介

AndroidのGUIコンポーネントは物によっては少し難しいのもあるけど使い方は似ているものが多いから、1つ覚えると他のも使えるようになると思うよ！

大石ゆかり

そうなんですね！！！

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

Androidアプリ開発でマニフェストを編集する方法【初心者向け】

Android端末では、通信をしたり、カメラで写真を撮ったりとさまざまなことができます。Androidアプリでも、マニフェストファイルでパーミッションの設定をす...
Androidアプリ開発

Kotlinを学びたい人に最適！入門向け学習サイト10選【初心者向け】

Kotlinの入門向け学習サイト10選を紹介します。 これからKotlinを学ぼうと考えている方はぜひチェックしておきましょう。   ...
Androidアプリ開発

Androidアプリ開発でArrayAdapterクラスを使ってリストを表示させる方法【初心者向け】

Androidアプリを開発では、ArrayAdapterクラスを使うと簡単にリストを表示することができます。 そこで今回はArrayAdapterクラスを...
Androidアプリ開発

Androidアプリ開発でアクティビティを作成する方法【初心者向け】

Androidアプリでは、画面の切り替えといった操作が可能です。そんな操作を実現する「アクティビティ」について初心者向けに解説します。   ...
Androidアプリ開発

Kotlinの関数名の頭にある「::」とは何かを現役エンジニアが解説【初心者向け】

Kotlinの関数名の頭にある「::」とは何かについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
Androidアプリ開発

Androidアプリ開発でProgressBarを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのなかの1つである、Progress...
Androidアプリ開発

あわせてよく読まれている記事

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安
Androidアプリ開発

KotlinのIntentによりAndroidアプリで画面遷移する方法を現役エンジニアが解説【初心者向け】

KotlinのIntentによりAndroidアプリで画面遷移する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 初心者向けにKotlinの入門向けサイトをまとめた記事もありますので読んでみてください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Androidアプリ開発講座の内容をもとに作成しています。 田島悠介 今回は、Androidアプリ開発に関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 KotlinのIntentによりAndroidアプリで画面遷移する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Intentとは Javaのコードとの差異 画面遷移処理を書いてみよう まとめ   Intentとは Androidアプリで他の機能や画面との橋渡しを行うのがIntentです。 Intentはアプリ内で別の画面に遷移したり、別の機能を起動したりといった、何らかの「目的」を実現するための仕組みとして利用されています。 Intentという単語には「目的」や「意図」といった意味があります。 Intentには「明示的Intent」と「暗黙的Intent」の2種類があります。 明示的Intent：対象となる画面や機能を明示的に指定する方法です。今回の記事では明示的Intentについて説明します 暗黙的Intent：「写真を撮りたい」、「メールを送りたい」といった「意図」だけを指定する方法です。どの機能が起動するかはAndroid OSに任せます   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中Javaのコードとの差異 明示的Intentでは対象の画面などをクラスオブジェクトで指定します。KotlinとJavaではクラスオブジェクトの指定方法が異なるので注意しましょう。 Java Intent intent = new Intent(this, SubActivity.class); Kotlin val intent = Intent(this, SubActivity::class.java)   画面遷移処理を書いてみよう 今回のサンプルプログラムではIntentの使い方を確認します。合わせて画面間で値を受け渡す方法についても例示しています。 事前にプロジェクトを「Empty Activity」で新規作成し、新たにEmpty Activityで「SubActivity」を追加しておきます。はじめにそれぞれの画面のレイアウトファイルを修正します。 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"> <EditText android:id="@+id/editText"
Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？ 田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。 大石ゆかり あ、そうなんですか〜！？   TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。 ただし、行をまたいでパーツを配置することはできませんのでご注意ください。     TableLayoutを配置する 今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。   最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。   次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください） 配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中TableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。     TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout>     コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
Androidアプリ開発

Androidアプリ開発のLinearLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが用意されています。 今回はそのなかの1つである、LinearLayout（リニアレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリでパーツを1列に並べたいんですけど、どうしたらいいんですか〜？ 田島悠介 いくつか方法はあるけど、1列に並べたいだけならLinearLayoutはどうかな？ 大石ゆかり どうやって使うんですか〜？   LinearLayoutとは LinearLayoutとは、パーツを縦一列もしくは横一列に並べる場合に使用するレイアウトです。 Eclpseで開発をする場合、LinearLayoutは縦一列に並べるLinearLayout（Vertical）と横一列に並べるLinearLayout（Horizontal）の2種類が用意されています。     LinearLayoutを配置する 今回は、LinearLayoutを使用して画像のような画面を作成してみます。 レイアウトは入れ子にして使用することができます。この例では、赤枠で表したLinearLayout（Vertical）に、青枠で表した３つのLinearLayout（Horizontal）が入れ子になって配置されています。   LinearLayout（Vertical）を配置します。 LinearLayout（Vertical）はレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のLinearLayout（Vertical）を、プレビュー画面までドラッグしましょう。   次に、同様にLinearLayout（Horizontal）を3回プレビュー画面までドラッグして配置します。 アウトラインで、レイアウトが正しく配置されているか確認をしましょう。   LinearLayoutにパーツを配置する LinearLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 もしも配置したいレイアウト以外の場所に配置をしてしまった場合は、プレビュー画面に配置されたパーツをドラッグするか、アウトラインに表示されているパーツをドラッグして移動しましょう。   ３行目のボタンのように、LinearLayoutに配置されたパーツを中央寄せで表示したい場合は、レイアウトを選択し、プロパティの「Gravity」の値を「center_horizontal」に変更します。   起動をして、画面を確認します。 配置はこれで完了です。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中LinearLayoutのコードを確認する 最後にコードを確認してみましょう。 XMLタブでコードを確認すると、下記のようになっています。LinearLayoutが入れ子になっていることがわかると思います。 <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” android:orientation=”vertical” > <LinearLayout android:layout_width=”match_parent” android:layout_height=”wrap_content” > <TextView android:id=”@+id/textView1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”名前” /> <EditText android:id=”@+id/editText1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_weight=”1″ android:ems=”10″ > <requestFocus /> </EditText> </LinearLayout> <LinearLayout android:layout_width=”match_parent” android:layout_height=”wrap_content” > <TextView android:id=”@+id/textView2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_weight=”1″ android:text=”コメント” /> <EditText android:id=”@+id/editText2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_weight=”1″ android:ems=”10″ /> </LinearLayout> <LinearLayout android:layout_width=”match_parent” android:layout_height=”wrap_content” android:gravity=”center_horizontal” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”送信” /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”リセット” /> </LinearLayout> </LinearLayout> 今回は以上です。   他のレイアウトも試したい場合はRelativeLayoutの使い方も合わせてご覧ください。   大石ゆかり 簡単に1列に並べられるんですね〜♪ 田島悠介 そうだね。縦でも横でも並べられるから、使う場面がとても多いレイアウトの一つだね。 大石ゆかり そうですね〜♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
Androidアプリ開発

Androidアプリでインテントを使って画面を遷移させる方法【初心者向け】

Androidアプリの開発では、「インテント（Intent）」という機能を使って画面を遷移させることが可能です。 インテントは、Androidの特徴的な機能の一つで、アプリケーション内の機能や他のアプリケーションへの橋渡しの役割をしてくれます。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！アプリの画面遷移ってどうやって実装するんですか？ 田島悠介 複数のアクティビティを作っておいてインテントっていう機能を使うと遷移できるんだ。 大石ゆかり インテント、ですか・・・？どうやるんですか〜？   2つの画面を用意する 画面遷移をさせるための準備をまずは行います。 今回は同じアプリ内に2つのアクティビティを用意しました。   1つ目の画面であるMainActivityには、テキストボックスとサブ画面に遷移するためのボタンを用意しています。   2つ目の画面であるSubActivityには、1つ目の画面のテキストボックスで入力された文字列を表示するためのテキストビューを用意してあります。   新しくアクティビティを追加した場合は、下記のようにマニフェストファイルにアクティビティの宣言を追加してください。 <activity android:name=”.SubActivity”></activity>   メイン画面を用意する 続いてメインの画面を用意します。 xmlファイルで、サブアクティビティを呼び出すボタンにandroid:onclicl属性を追加し、イベントが発生したときにonClickメゾットを呼び出すようにしてあります。 また、onClickイベントを作成します。   下記のように記述しましょう。 public void onClick(View v) { //インテントの作成 Intent intent = new Intent(this, SubActivity.class); //データをセット EditText editText = (EditText)this.findViewById(R.id.editText); intent.putExtra("sendText",editText.getText().toString()); //遷移先の画面を起動 startActivity(intent); }   19行目でインテントの作成を行い、遷移先のクラス名を指定しています。 また、22行目のputExtraで遷移先に渡すデータを名前と値のセットで登録し、26行目で遷移先の画面を起動します。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中サブ画面を用意する 次にサブ画面を用意します。 ここでは、下記のように記述しました。 Intent intent = this.getIntent(); String text = intent.getStringExtra("sendText"); TextView textView = (TextView)this.findViewById(R.id.textViewSub); textView.setText(text);   遷移された画面では、getIntentメゾットでインテントを使って渡されたデータを受け取ることができます。16行目のgetStringExtraでデータを取得します。 今回は文字列なので、getStringExtraメゾットを使っていますが、受け取るデータによって、getBooleanExtra,getIntExtraというように置き換える必要があります。     動作確認をする 最後に、エミュレーターを使って画面が遷移できるかどうか動作確認をしてみましょう。   まず、アプリを起動するとメイン画面が表示されます。テキストボックスに好きな文字を入力して、ボタンをクリックします。   ここでサブ画面が起動し、メイン画面で入力した文字が表示されれば成功です。    アプリによっては画面遷移を多く使うこともあると思いますので、覚えておきましょう。 エミュレータだけでなく、Androidを実機でテストすることも試してみましょう。   大石ゆかり 画面遷移できました！！！ 田島悠介 アプリはよほど簡単なアプリでない限り1画面で終わることはないから、インテントは覚えておいたほうが良いね♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
Androidアプリ開発

Androidアプリ開発のFrameLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、FrameLayout（フレームレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！FrameLayoutっていうレイアウトがあるんですけど、これって何に使うんですか〜？ 田島悠介 FrameLayoutはビューを重ねて表示したい時に使うんだ。ちょっと試しにやってみようか。   FrameLayoutとは FrameLayoutとは、パーツをひとつだけ配置して使用するレイアウトです。位置の指定はできず、FrameLayoutに配置したパーツは左上に表示されます。 また、FrameLayoutに複数のパーツを配置した場合、パーツが重なって表示されます。     FrameLayoutを配置する FrameLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のFrameLayoutを、プレビュー画面までドラッグしましょう。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中FrameLayoutにパーツを配置する FrameLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。   配置したパーツの位置を指定することはできず、画面の左上に表示されます。   さらにもうひとつパーツを配置してみましょう。すると先ほど配置したパーツの上に重なって表示されます。     FrameLayoutの応用 最後に応用として、FrameLayoutを利用して次のような画面のレイアウトを作る例を紹介します。 ボタンを押すことで表示される内容が変わる画面です。   レイアウトは、次のようになっています。 最初にLinearLayout（Vertical）（黄色枠）を配置します。 次に、LinearLayout（Hrizontal）（青枠）を配置し、画面を切り替えるためのボタンを配置します。 さらに、FrameLayout（赤枠）を配置し、その中に表示する画面を作成するために、レイアウトを3つ重ねた状態で配置しています。   なお、表示する画面の切り替えは、FrameLayoutの中に作成したレイアウトを、javaで制御しています。 レイアウトのソースは以下のようになります。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面3" /> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/layout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面１" android:textSize="40dp" /> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面２" /> </LinearLayout> <LinearLayout android:id="@+id/layout3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面３" /> </LinearLayout> </FrameLayout> </LinearLayout> MainActivityには以下のように記述しました。 public class MainActivity extends AppCompatActivity { private LinearLayout mLayout1; private LinearLayout mLayout2; private LinearLayout mLayout3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLayout1 = (LinearLayout)findViewById(R.id.layout1); mLayout2 = (LinearLayout)findViewById(R.id.layout2); mLayout3 = (LinearLayout)findViewById(R.id.layout3); findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout1.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout2.setVisibility(View.VISIBLE); mLayout1.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout3.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout1.setVisibility(View.INVISIBLE); } }); } } 今回の記事は以上です。 さらに他のレイアウトを試したい場合はGridLayoutの使い方も合わせてご覧ください。   大石ゆかり なるほど、こうやって使うんですね！ 田島悠介 使うのが少し難しいLayoutだけど、使い方によっては画面内で画面を切り替えるようなこともできるから、覚えておくと良いね。 大石ゆかり はい！   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でEditTextを追加する方法【初心者向け】