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

Androidアプリ開発でGUIコンポーネントの【ProgressBar(プログレスバー)】を追加する方法を初心者向けに解説した記事です。プログレスバーを使うと、アプリで時間のかかる処理をしている時にどの程度進んでいるのかを表示できます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

今回はそのなかの1つである、ProgressBar(プログレスバー)を追加する方法と基本的な使い方をご紹介します。

 

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

 

大石ゆかり

田島メンター!!よく通信中の待ち時間とかに、クルクルまわる表示が出るじゃないですか〜?あれってAndroidアプリでどうやって表示するんですか〜?

田島悠介

プログレスバーのことだね、GUIコンポーネントで用意されているよ。

 

ProgressBarとは

ProgressBar(プログレスバー)とは、アプリで時間のかかる処理をしている時にどの程度処理が進んでいるのか表示したい場合に使われるGUIコンポーネントです。みなさんもアプリがデータをダウンロードするときなどに目にしたことがあると思います。

デフォルトでは、水平にバーを設置して進捗を表示するタイプと、グルグルまわるアイコンで処理が実行中であることを表示するタイプの2種類が用意されています。

001

 

 

アイコンタイプのProgressBarを配置する

ProgressBarはレイアウトエディタのパレットの「フォーム・ウィジェット」から配置できます。

パレット内のProgressBar(Normal)を、配置したい場所までドラッグしましょう。

 

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

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="147dp"
android:layout_marginStart="147dp"
android:layout_marginTop="68dp" />

 

ここでアプリを実行すると、アイコンタイプのProgressBarが表示されます。

ProgressBarの大きさは、styleプロパティで変更できます。

 

 

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

バータイプのProgressBarを配置する

続いて、バータイプのProgressBarを配置してみます。

アイコンタイプと同じようにパレット内のProgressBar(Horizonal)を、配置したい場所までドラッグしましょう。

配置はこれだけです。

 

 

バータイプのProgressBarをカスタマイズする

最後に、今配置したバータイプのProgressBarをカスタマイズしてみます。

今のままでは画面に対して幅の小さなProgressBarが表示されます。この時に、ドラッグProgressBarの幅を調整しようとしてもうまくいかないので、プロパティの値を調整しましょう。

 

 

まずは、横幅を調整する「layout_width」の値を「match_parent」にして、画面いっぱいに広げます。続いて、余白を調整する「layout_marginLeft」と「layout_marginRight」に適当な値を設定します。

 

また、プロパティの値を変更すると、ProgressBarに値を表示することができます。

「Max」でProgressBarの最大値を設定し、「Progress」でProgressBarに表示したい値を設定しましょう。

 

 

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

<ProgressBar
android:id="@+id/progressBar3"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="105dp"
android:max="200"
android:progress="70" />

 

プレビュー画面では値を示すバーがずれていますが、アプリを起動すると画面のように表示されます。

今回の記事は以上です。
ぜひ参考にしてみてください。

 

また、Androidアプリ開発でAlertDialogを追加する方法など、Androidアプリ開発に役立つほかの記事も合わせてご覧ください。

 

大石ゆかり

プログレスバー、設置できました♪

田島悠介

通信中とか何かの待ち時間によく使うから、覚えておくと良いね♪

大石ゆかり

はい!

 

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