Raspbery pi3上で動作するAndroid ThingsのアプリをAndroid Studioで作成

2017年6月24日に実施された「[東北Tech道場 郡山道場 第3回](https://medium.com/@koriyamadojo/%E6%9D%B1%E5%8C%97tech%E9%81%93%E5%A0%B4-%E9%83%A1%E5%B1%B1%E9%81%93%E5%A0%B4-%E7%AC%AC%EF%BC%93%E6%9C%9F-%E7%AC%AC%EF%BC%93%E5%9B%9E%E9%96%8B%E5%82%AC-63c3bb4c3d1a)」の作業内容をまとめます。半年近く経ってしまいましたが、何かQiitaに書いてほしいとの依頼を受けたので、個人的にまとめていた内容を投稿します。

この回では、Android Studioを使って簡単なAndroid Thingsのアプリを作成し、Raspbery pi3上で動作させました。

#(1)プロジェクトの新規作成
- まずは「Start a new Android Studio project」のクリック。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/222292/a6bfd837-8364-42c5-8f1e-917720a1f654.png)

- 「Application name」と「Company domain」の入力。「Company domain」の方は、個人で作るので、とりあえず自分の名前を半角小文字、ピリオド区切りで入力。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/222292/9216780c-01e7-4e8b-a860-d403dcb07142.png)

- あとは基本的に「Next」「Next」「Next」「Finish」でOK。
- すると、次のようにプロジェクトが作成され、エディタが表示される。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/222292/82373884-ad80-76c8-5582-db45823fb5e1.png)

#(2)デザインの作成
- MainActivityを選び、デザインエディタを表示する。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/222292/da28430b-c51e-1eeb-4cf9-2c5dd44c7928.png)

- TextViewとToggleButton4つをビューにドラッグして配置する。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/222292/75e0a375-1077-7eb9-2d06-25ac99f5401e.png)

- 垂直のGuidelineを3本追加。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/222292/840c9582-c5b6-5253-1fde-526292f38801.png)

- Guidelineを画面の25%、50%、75%に配置する。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/222292/ed9d8b50-98ed-fbed-e7c2-b82dba26579f.png)

- TextViewコントロールに制約をつける。制約をつけることで、端末の画面サイズや縦横が異なったときにレイアウトが崩れなくなる。
![8.png](https://qiita-image-store.s3.amazonaws.com/0/222292/407659e2-060a-1c5f-2d84-69c8f6726a27.png)

- ToggleButtonにも制約を付ける。それぞれ、左右のGuidelineに付ける。
![9.png](https://qiita-image-store.s3.amazonaws.com/0/222292/b20757c9-3329-9528-8c59-385b5c381a2b.png)

- 一番左のToggleButtonは上をTextViewにつける。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/222292/266644d2-5a2b-aa92-3d20-4a6e9da59bce.png)

- 真ん中のTextViewは左右下の端と、一番左のToggleButtonの下側に付ける。
- ToggleButtonどうしに制約を付ける。①と②、②と③、③と④を結ぶ。
![11.png](https://qiita-image-store.s3.amazonaws.com/0/222292/4dd71587-a5d6-a43d-13ae-3b027d887bbf.png)

- 縦表示にするとこんな感じ。レイアウト崩れなければOK。
![12.png](https://qiita-image-store.s3.amazonaws.com/0/222292/9cc2af52-c3df-6f84-5709-f4cb49cbdb01.png)

#(3)	プロパティの設定
- 各ToggleButtonのidを変更。左から、「tbRed」、「tbBlue」、「tbGreen」、「tbWhite」に変更する。
制約を付けている関係で、idを変えようとすると警告ダイアログが出るので「Yes」を押す。
真ん中のTextViewのidも「tvReslt」に変更する。プログラムで参照するものはデフォルトの名前だとわかりづらいので、変えた方がいい。
![13.png](https://qiita-image-store.s3.amazonaws.com/0/222292/d0593041-54b6-d691-22db-1ff208214232.png)

- TextViewのサイズを変更する。2つとも30以上がいい。
![14.png](https://qiita-image-store.s3.amazonaws.com/0/222292/5c887050-e524-dad5-792a-dd5fc800fe76.png)

- 上のTextViewのTextプロパティは「Select LED Color」に、真ん中のTextViewのTextプロパティは「No Ligth Up」に変更する。

#(4)色の変更
- color.xmlに色を追加する。
![15.png](https://qiita-image-store.s3.amazonaws.com/0/222292/8cbf8784-1b63-b5a5-cc15-18a003dfb77a.png)

- ToggleButtonのTextColorを変更する。
![16.png](https://qiita-image-store.s3.amazonaws.com/0/222292/945b7cde-5436-fd07-8637-3a7336da26ac.png)
![16_2.png](https://qiita-image-store.s3.amazonaws.com/0/222292/6dc26739-6b26-63c0-3379-038c3c5f2530.png)

#(5)MainActivity.javaの編集
- 次の個所を入力する。
![17.png](https://qiita-image-store.s3.amazonaws.com/0/222292/6f73f8de-0cda-ea2d-b5e2-d5c325bcd8dd.png)

- イベントリスナー（ボタンクリックなどのイベントで呼ばれるメソッド）を追加する。下記を入力する。エラーが出るが気にしない。
![18.png](https://qiita-image-store.s3.amazonaws.com/0/222292/1fea902a-80d3-3b84-56c6-66446a2583ec.png)

- エラー個所を修正する。
![19.png](https://qiita-image-store.s3.amazonaws.com/0/222292/33161852-ea8f-09f1-b247-9154d602176d.png)

- onCheckedChangedメソッドが追加されるので、コードを追加する。
※11行目あたり（public class MainActivity extends AppCompatActivity {と@Overrideの間）に
```
	private TextView tvReslt;
```
　を追加してからやること。

![20.png](https://qiita-image-store.s3.amazonaws.com/0/222292/c979936c-310d-bcff-b27d-f8ecc5909de4.png)

![21.png](https://qiita-image-store.s3.amazonaws.com/0/222292/9dfffdab-cc81-ebe5-a140-1de07edb00e0.png)

- これは、「赤」ボタンのイベントリスナーなので、「青」、「緑」、「白」のイベントリスナーもコピーして作る。

- イベントリスナーのセット。次の赤下線のコードを追加する。
![22.png](https://qiita-image-store.s3.amazonaws.com/0/222292/0dada7e3-8ede-325d-0df4-c6b03255294c.png)

#(6)「おまじない」の追加
-「build.gradle」に赤下線部を追加。
![23.png](https://qiita-image-store.s3.amazonaws.com/0/222292/c8e42968-5ad2-d100-b0fe-57a2642f336d.png)

- 「AndroidManifest.xml」に赤下線部を追加。
![24.png](https://qiita-image-store.s3.amazonaws.com/0/222292/8c3a8cea-e930-6c51-7eaf-5c380206ddd2.png)

#(7)Raspberry Pi3で実行する。
- こんな感じになれば成功。Raspberry Pi3にマウスをつないでボタンをクリックすれば、中央のTextViewが変わるはず。

![25.jpg](https://qiita-image-store.s3.amazonaws.com/0/222292/cbdacbc8-d2b7-7c78-7eb8-32016e86a891.jpeg)