バッテリーチェッカー

【Android Studio】バッテリーチェッカーの作り方 第1回「レイアウトの作成」

 
ここまでの記事はこちら
 

今回はバッテリーチェッカーのプロジェクトとレイアウトを作成していきましょう。

完成イメージ


 
 


 

動画

準備中
 
 
 

解説

プロジェクトを作成する

プロジェクト作成画面を開いたら Empty Activity を選択します。


 
 

プロジェクト名などを入力して Finish を押します。


 
 

プロジェクトが作成されたら準備完了です。
 
 
 

画像の用意

画像のダウンロード

このアプリでは、5種類の画像を使ってバッテリー残量を表示します。


 

以下のリンクから画像をダウンロードするか、ご自身で画像を5種類ご用意ください。

 
 
 

画像をプロジェクトに置く

プロジェクトで使う画像は drawable フォルダ に置きます。
 

Android Studio 画面左側のプロジェクト構造にある app → res → drawable の上で右クリックして、Mac の場合は Reveal in Finder、Windows の場合は Show in Explorer を選択します。


 
 

drawable フォルダが開いたら、さきほど用意した画像を置いてください。

drawable-v24 フォルダは API 24 以上の端末用です。低い API でも使えるように drawable フォルダに置きます。

 
以上で画像を使う準備は完了です。
 
 
 

レイアウトの作成

次にレイアウトを作成します。

用意するのは

  • バッテリーの状態を表示する TextView
  • バッテリー残量の画像 ImageView
  • バッテリー残量(73%)を表示する TextView

の3つです。
 
 

activity_main.xml を開いて、以下のようにコードを編集・追加します。

 
 

このような画面になれば準備完了です。


 
 
 

Warning の解消

Warning が出ている箇所があるので解消しておきましょう。


 
 

Android Studio 画面左側のプロジェクト構造から app → res → values → strings.xml を開きます。


 
 

strings.xml を開いたら 4~6行目を追加します。

 
 

activity_main.xml に戻って、コードを3箇所追加・変更します。


 
 

Warning については以下の記事で詳しく解説しています。
【Android Studio】ImageView の Warning 解消法
【Android Studio】ゲームアプリ開発入門 第13回「Warningの解消 -XML編-」
【Android Studio】ゲームアプリ開発入門 第14回「Warningの解消 -java編-」
 
 
 

次に行うこと

次回はバッテリー状態を取得して機能を実装していきましょう。

第2回「バッテリー状態を取得する」に進む
 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx