AndroidStudioでUBERっぽいアプリを作ろうとしたけどボタンを配置するところまでにした

# はじめに
いままでVBA屋さんのぬるま湯(?)から危機感を持ってdjangoを使ったWebアプリを作れるようになった。結果的にVPSサーバーを借りてLinux(CentOS)を使えるようになったりかなりの経験値を得た（スタンドアローン屋がWeb屋になるためにかなりの時間と辛酸をなめたような気もするが...）ってことはこれで [データベースがある前提におけるWebシステム](https://qiita.com/YoshitakaOkada/items/f434bb0bc493ff9cd65b) が作れるようになったわけだ。基本的なhtml+css+javascriptに加えて [Ajaxをつかった「いいね！」機能](https://qiita.com/YoshitakaOkada/items/1eb1257b7c4aa286cc13) の実装も覚えたのでこのへんでいいだろう。となると次の僕の興味は端末(Android)の操作だ。こりゃまた領域が違うだろう、だがWebの知識が少しは助けてくれるだろうとも思う。これができればGPSからの計算処理とかができるわけだ！

# Android Studio のインストール
どこかのWebページを参考にしてインストールしたんだけど細かいステップは忘れてしまった...
https://developer.android.com/studio/install?hl=ja
でもこの辺を見るとそんなに迷うようなインストールではなさそうだ
[[Android] Android Studio をインストールする手順（Windows）](https://akira-watson.com/android/adt-windows.html)

# 参考にするyoutube
[Android Uber Clone - Part 1 : Sign Up / Sign In](https://www.youtube.com/watch?v=DvFPQBHfGzs)
**約45分の動画なんだけどfull英語です！（死）**
qiitaに似たような記事あるんじゃないの？って思って探してみたけどないんだよね...
そこ大事だろみたいなところでｼｭﾝｯて画面変わったりするからFu●K:poop:。一時停止！:rotating_light:一時停止！:rotating_light:一時停止の鬼！:rotating_light::rotating_light::rotating_light:まぁ英語の勉強の意味もあるしじっくりやるつもりだけど、終始無音でchat形式で進んでいくのでわかりやすいっちゃわかりやすい。

[眠れない夜のための焚き火映像８時間](https://www.youtube.com/watch?v=pW4VVZ-ljbw&t=5854s)
ラジオだと気が散るし静かすぎるとこれまた気が散る

# 0:00-
Hello everybody !
To day i will show you how to create app like Uber, ofcourse, similar uber, not professional like Uber :D
Because I'm just a man, Uber is big company :D So i can't do anything like them
In this tutorial, we will try to create features : SIGN UP / SIGN IN for our app
今日は、Uberのようなプロフェッショナルではなく、もちろんUberのようなアプリを作成する方法を紹介します:D
ただ僕はひとりだし、Uber自体はデカい会社だ:D とてもじゃないけど彼らのすべての真似をすることはできない。そこでチュートリアルではまずはサインアップ/サインインを作ろう


## 起動して新規
Okay! Now just create your new project
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/3a4e04f3-a270-2581-9ca1-ee70d56e361c.png)

## 空のアクティビティーを選ぶ
コンソールアプリじゃなくて最低限のページ遷移の仕組みを持つテンプレートって感じかな？しらんけど
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/e013752c-84d1-d9db-e9b2-f11ea319ed7d.png)

## プロジェクトの構成
名前: AndroidUberClone
最小APIレベル: API 16+

最小APIレベルはいわゆるandroidのバージョンのことを示しているけど、2020年2月時点でandroidのバージョンは10ぐらいまで行っている（普段使いの僕のandroidは7.1.1[API25]）から、ある程度あげちゃっていいし、なんならAPI15って指定しちゃうと16以上にしろコラ！とかコンパイル時に弾かれて初心者は原因不明になって昼寝するはめになる:sleeping:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/18278320-beda-2b39-496f-346d7a282d02.png)
この画面になる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/ba7641d3-bf33-5c92-4f89-90e56676c9cf.png)

## Firebaseと接続する
このあたりになってくるとサーバレス！サーバレス！みたいな言葉が出てくるんだけど、なんてことはない、AWSのコントロールパネルいじれますか？みたいな意味ですよ。
https://console.firebase.google.com/?hl=ja
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/6a61bdfc-78b9-3617-2195-55edf0765e03.png)
プロジェクト名: UBER
すぐ下に書かれている「uber-7f3de」みたいなのはグーグルマップをAPIで使うときも出てくるけど、グーグルのサーバー上に保存するために一意に物理名をつけた、と思えば良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/aaaada91-4121-0e1c-a484-9b9933d5b8ad.png)
googleアナリティクス使う？
まぁ普通に使うよね。たまたまアカウントは持ってたのでそれを指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/50c45501-4465-3580-cc0f-fd84074f76c5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/2217114d-7ca5-b78e-b2c5-c6abf6dfc3fe.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/ef81a51d-7aed-5821-f602-3458cd35ecab.png)

増えた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/1646ac99-21aa-beb9-2c27-7e5d7f750709.png)

## アプリケーションにFirebaseを追加するための設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/73059f55-cb55-2d0c-69fc-d96d0eba876f.png)

### Androidパッケージ名
androidstudioで新規プロジェクトを作成したあとの最初の画面「MainActivity」という画面の最初に「com.example.androiduberclone」という文字があるのでそれをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/9059e4a3-6fe2-84e1-33a4-9f10709a30e2.png)
ここな↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/aa161b7a-01d1-644c-0d3b-5b65c4879992.png)

### アプリのニックネーム
「AndroidUberClone」を入力（何でもいいと思う）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/3773e1e5-8ea4-59a9-61f1-757b22548de2.png)

### 署名証明書
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/b8d565af-b8cb-1def-e9e3-14035b136263.png)
#### Gradle
Gradleとはビルド自動化システムなんだそうだ。githubが差分まわりをいろいろ面倒見てくれるように、おそらくはビルドして配置するってあたりの面倒を見てくれるんだろう。しらんけど
ちょっと小さいけどandroidstudioの右端にGradleというマークがあるのでクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/20ff6f5b-4ba4-8d50-db9c-f2c55c44176b.png)
#### 署名情報の出力
階層を下ってsigningReportをダブルクリック（signingが署名という意味らしい）
まぁ、このアプリケーションのMACアドレスみたいなもんかな
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/d1a2a60b-7d69-a540-9a64-a2988039faed.png)
31:CA:6C:D1:A3:AE:F8:4D:3D:F7:E7:8B:0A:1D:AB:5E:93:47:AE:1A をコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/c76bbde9-0ad3-0335-81a9-c4b092ac69e9.png)

### アプリを登録ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/47a841c4-5cee-f4ed-487f-fb42c3bf3bf9.png)

## 設定ファイルのダウンロード
google-services.json をダウンロードのボタンを押すと、設定ファイルがダウンロードされるので、エクスプローラの「ダウンロード」フォルダ上で「Ctrl+C」でコピーしたあと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/99caca20-8acf-9b62-02bc-4ad1992ea0c3.png)
androidstudio上の「プロジェクト」配下にある「app」フォルダをクリックした状態で「Ctrl+V」すると貼り付けされる。google-services.jsonファイルが出現することも確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/7b5f674b-f5b3-3912-09fc-a645d7343293.png)

## Firebase SDK の追加
プロジェクト レベルの build.gradle（<project>/build.gradle）を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/63905a97-cd22-304c-b389-32daf97fc028.png)

1.Check that you have the following line (if not, add it)
buildscript/repositories のカッコのなかに「google()」があることを確認してください。必ず書かれているはずだけど書かれてなければ追加してください

2.Add this line
dependencies のカッコの中に「classpath 'com.google.gms:google-services:4.3.3'」をコピペしてください

3.Check that you have the following line (if not, add it)
allprojects/repositories のカッコのなかに「google()」があることを確認してください

```kotlin:build.gradle（2箇所の確認ポイントと1箇所の変更ポイント）
buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.3'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}
```

アプリレベルの build.gradle（<project>/<app-module>/build.gradle）を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/52f99668-805b-ecd0-feaa-48f2d8a50b7e.png)

1.Add this line
2行目に「apply plugin: 'com.google.gms.google-services'」をコピペ
2.add the Firebase SDK for Google Analytics
dependencies のカッコのなかに「implementation 'com.google.firebase:firebase-analytics:17.2.2'」をコピペ

```kotlin:app/build.gradle（2箇所の変更ポイント）
apply plugin: 'com.android.application'
// Add this line
apply plugin: 'com.google.gms.google-services'

dependencies {
  // add the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics:17.2.2'
  // add SDKs for any other desired Firebase products
  // https://firebase.google.com/docs/android/setup#available-libraries
}
```

## 同期
設定を変更すると同期してくれ！と出てくるので同期させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/28c72203-9eb2-f9ea-e3f6-f45a0592b345.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/a7417935-6d91-4242-a65c-1737026c15a2.png)
なにやら待機になるので、ここで設定は完了し、androidアプリを初めて実行する必要がある（ここで実行環境のandroidバージョンが低すぎたりすると沼にハマって昼寝するはめになるのでプロジェクト作成時にandroidバージョンを確認する）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/6c48d916-f6f0-c7d7-7a87-2cda6ce0a7ed.png)

## 動作確認
署名情報を出力するタイミングで「実行」フォーカスが「signingReport」にあたっているので「app」にセットし、実行ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/dda92c45-7e0d-4b61-a84a-ebea0d6e1b41.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/9506be74-a577-2350-a96c-7e6aeb4c58cf.png)
キターーー！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/50cdc182-40f9-a7f2-825e-f18ddc4f1d3f.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

firebaseにも通信が成功したようだ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/a3e82f22-d063-f166-277f-eb48d2c01e1d.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

## Github連携
[Android StudioとGitHubを連携する方法](https://blog.codecamp.jp/programming-androidstudio-github)
プロジェクト単位ごとに git 設定が必要（というより勝手にプロジェクト単位でリポジトリを作りに行ってしまう）
google-services.json を .gitignore しないと gitguardian.com（githubにAPIキーなどのセンシティブ情報をアップすると危ないよって促すgithub警察:cop::rotating_light:）からメールがくるかもね

# 4:46-
## Maven
Now, we need add maven url to our root gradle file
Maven を使うようにガイドされるけど特に使わなくても動くことがわかったのでパス

## Add libraries to use
これから2つのライブラリをインポートする
- Firebase Authentication (For use e-mail and password, phone verification if you want)
- Firebase database (For store data)

```kotlin:app/build.gradle
dependencies {
    ...
    // ココカラ
    // Add library
    implementation 'com.google.firebase:firebase-auth:19.2.0'
    implementation 'com.google.firebase:firebase-database:19.2.1'
    // ココマデ
}
```
なお、動画では「compile」というキーワードを使って入力していくように書いてあるがandroidstudioが「implementation」を使え！と言ってくる。キーワード自体がなくなったようだ。さすがに3年前だとそうなるか。

## 動作確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/50cdc182-40f9-a7f2-825e-f18ddc4f1d3f.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

# 8:30-
## helloworldのデザイン部に移動する
Okay! Now import drawables and design your main layout
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/3ea55803-4a75-72df-4c07-1aa1af9e600c.png)

Hello Worldのデザインっぽいとこが出てきたな
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/9cacb2a4-ba78-30af-46c8-414971a1f2de.png)

## Sign Up / Sign In用の画像を取り込む
右クリメニューに「Batch Drawable Import」がねーよ！って思ってたら機能拡張なんだ...。[それさぁ、早く言ってよ～](https://www.google.com/search?sxsrf=ALeKk01SNGePS04cp7BhqlLSgfWkFRgaiQ%3A1582431397150&ei=pfxRXo7sCKzEmAX0k7zQCQ&q=%E3%81%9D%E3%82%8C%E3%81%95%E3%81%81%E3%80%81%E6%97%A9%E3%81%8F%E8%A8%80%E3%81%A3%E3%81%A6%E3%82%88%EF%BD%9E&oq=%E3%81%9D%E3%82%8C%E3%81%95%E3%81%81%E3%80%81%E6%97%A9%E3%81%8F%E8%A8%80%E3%81%A3%E3%81%A6%E3%82%88%EF%BD%9E&gs_l=psy-ab.3..0.23361.23361..23580...0.0..0.92.183.2......0....2j1..gws-wiz.......35i39j0i7i30.KGemd1xVYHI&ved=0ahUKEwjO0ruq6ObnAhUsIqYKHfQJD5oQ4dUDCAs&uact=5)

### 機能拡張: Android Drawable Importer
>[AndroidStudioのオススメ拡張機能 9選](https://qiita.com/Slowhand0309/items/da7cc2d577c47a8bde1a)
Android Drawable Importer
アイコンや画像などをプロジェクトに追加するのが楽になるプラグイン。
プラグインをインストールすると以下の4機能が使えるようになります。
1. AndroidIcons and Material Icons Drawable Import
2. Batch Drawable Import 画像を選択してサイズを指定してインポートできる
3. Multisource-Drawable
4. Vector Drawable Importer

### 機能拡張の仕方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/9a4cbf9d-3e30-c202-2f0a-9e14e0d43318.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/ad2027fb-8ccd-bbaa-576e-21a4a40c3d41.png)

## Batch Drawable Import
top画面用の画像を取り込むわけだが、動画ではあろうことかデスクトップから画像を取り込む（ちょっと待って？）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/b5a502e0-2e03-4cf4-e932-4e672ccc1d21.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/69dc70f1-7534-afb8-2c22-53521b83cad8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/fb54afe2-5810-0c3f-6085-57cdd4cedd5f.png)

しょうがないので昭和っぽい写真でも用意する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/91c70b6d-5eb6-cd02-54d5-7a5e48afdcaf.png)
取り込まれたようだ（取り込み時のターゲット名は「background」）大小のスマホ用に自動的にサイジングされている？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/8b0a4e8b-d14c-437e-ba0f-09586675c140.png)

デザインを開いてXML画面に移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/10215c29-3f9a-de0a-517c-b0b05e7673af.png)

背景を指定すると即座にプレビューに背景が反映される
hello world のあたりは削除する

```xml:app/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
- <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ <RelativeLayout 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"
+    android:background="@drawable/background"
    tools:context=".MainActivity">

-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="Hello World!"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />

</RelativeLayout>
```

## 動作確認
背景は適用された。おそらく RelativeLayout の影響だろう。Relativeは相対的の意味。cssにもよく出てくる単語だ。なぜ RelativeLayout にするのかといったあたりの納得感はないけどいまはしゃあない。
[今さら聞けないRelativeLayoutの話](https://qiita.com/smoriwani/items/c686153b39d32571d1bd)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/db90c3fb-93d1-2ef9-5832-a56891e4abfa.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

## styleのxmlをいじる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/c03a13d9-834d-d1be-d70d-a6f0b79119ad.png)

```xml:app/res/values/styles.xml
<resources>

    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
+       <item name="android:windowFullscreen">true</item>
    </style>

</resources>
```

## 動作確認
一番上のバーがなくなって、フルスクリーンになったってとこかな？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/1c5499fc-339f-3553-a651-09263abb4aab.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

# 9:50-
## テキストを置き、カラーを追加する
Okay! Just design your main Layout

```xml:app/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">

+    <LinearLayout
+        android:orientation="vertical"
+        android:layout_marginTop="30dp"
+        android:layout_centerHorizontal="true"
+        android:gravity="center_horizontal"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content">
+        <TextView
+            android:text="U B E R"
+            android:textSize="36sp"
+            android:textAlignment="center"
+            android:textColor="@android:color/white"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" />
+        <TextView
+            android:text="partner"
+            android:layout_marginTop="20dp"
+            android:textSize="16sp"
+            android:textAlignment="center"
+            android:textColor="@android:color/white"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" />
+    </LinearLayout>
+    <TextView
+        android:id="@+id/txt_rider_app"
+        android:layout_alignParentBottom="true"
+        android:layout_centerHorizontal="true"
+        android:layout_marginBottom="20dp"
+        android:layout_marginTop="20dp"
+        android:text="LOOKING FOR THE RIDER APP?"
+        android:textSize="12sp"
+        android:textAlignment="center"
+        android:textColor="@color/bottomText"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content" />
+        <Button
+            android:id="@+id/btnSignIn"
+            android:textColor="@android:color/white"
+            android:text="SIGN IN"
+            android:layout_marginRight="6dp"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content" />

</RelativeLayout>
```
```xml:app\src\main\res\values\colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

+    <color name="bottomText">#6b6b76</color>
+    <color name="rippleEffectColor">#f816a463</color>
+    <color name="btnSignIn">#1fbad6</color>
+    <color name="btnRegister">#83838c</color>
</resources>
```

## 動作確認
UBERの文字が入った。なんか飛脚でも来そうな画面だなｗ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/5d339145-a628-99b2-1a36-8ea48f20eead.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

## Rippleエフェクト
なんかRippleってテキトーな名前つけてんのか仮想通貨かよとか思ってたらRippleエフェクトってのがあるのね。bootstrapみたいなもんか。ちなみにrippleって「さざなみ、小波」って意味があるのか、と知ってから動作確認のタップ時の動作を見ると、あぁ確かに小波だわ...って感じする

[Androidでタッチフィードバックと言ったらRipple](https://qiita.com/yst_i/items/437cbfccfd829cfdd649)
[RippleDrawable(公式)](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable)

## Sign In ボタン用のxmlを追加する
新規のDrawableリソース・ファイルを作る
ファイル名：btn_sign_in_background
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/5e3f84d2-fd14-0568-a31a-d2bdd46b2085.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/5a7bc128-e75c-2793-ac2a-e145ade9ec9b.png)

```xml:btn_sign_in_background.xml（新規なので全部）
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/rippleEffectColor"
    >
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/btnSignIn"></solid>
            <stroke android:color="@color/btnSignIn" android:width="2dp"></stroke>
            <corners android:radius="2dp"></corners>
        </shape>
    </item>
</ripple>
```
```xml:app/res/layout/activity_main.xml
        ...
        <Button
            android:id="@+id/btnSignIn"
+            android:background="@drawable/btn_sign_in_background"
            android:textColor="@android:color/white"
            android:text="SIGN IN"
            android:layout_marginRight="6dp"
            android:layout_width="0dp"
+            android:layout_weight="1"
            android:layout_height="wrap_content" />

```

## 動作確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/6ad10ad3-1876-d77b-a6c8-190a20892c37.png)

## REGISTER ボタン用のxmlを追加する
新規のDrawableリソース・ファイルを作る
ファイル名：btn_register_background

```xml:btn_register_background.xml（新規なので全部）
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/rippleEffectColor"
    >
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/btnSignIn"></solid>
            <stroke android:color="@color/btnSignIn" android:width="2dp"></stroke>
            <corners android:radius="2dp"></corners>
        </shape>
    </item>
</ripple>
```

## いったん整理
1. android:weightSum="2"は、子が領域を二等分するという意味。子がandroid:layout_weightのプロパティを持っていることが前提条件になってそうだ。合計すると2になってそれぞれの重みが1ということは横幅いっぱいを1:1の均等割で左右配置するといった意味か
[レイアウト（５）-layout_weight属性とweightSum属性 親ウィジェットの残りのスペースを分け合って使う](http://ichitcltk.hustle.ne.jp/gudon2/index.php?pageType=file&id=Android056_layout5)

2. android:layout_above="@+id/txt_rider_app" とすることで、一番下のテキストの上といった指定になってそうだ

(プレビューのブループリントってやつでCSSレイアウトっぽいのが見れる）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/8ee215e8-811e-fec9-9ee6-1a54b1cb00eb.png)


```xml:app/res/layout/activity_main.xml
    <LinearLayout
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_above="@+id/txt_rider_app"
        android:layout_margin="16dp"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btnSignIn"
            android:background="@drawable/btn_sign_in_background"
            android:textColor="@android:color/white"
            android:text="SIGN IN"
-            android:layout_marginRight="6dp"
+            android:layout_marginEnd="6dp"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
+           style="?android:attr/buttonBarButtonStyle" />
+        <Button
+            android:id="@+id/btnRegister"
+            android:background="@drawable/btn_register_background"
+            android:textColor="@color/btnRegister"
+            android:text="REGISTER"
+            android:layout_marginStart="6dp"
+            android:layout_width="0dp"
+            android:layout_weight="1"
+            android:layout_height="wrap_content"
+            style="?android:attr/buttonBarButtonStyle" />
```

## 動作確認
ボタン２つの横幅を親に合わせて～ってあたりはCSSをちゃんと鍛えておかないと手間取るかもなぁ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/ccdde9a4-f13c-f56b-99b3-2dc59c8da4c8.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/b5ad22f6-93f3-6556-b4dc-074ba44f28c8.png)

# 18:00-
## フォントを手に入れる
calligraphy library を使うようにガイドされるけど、androidxで使えないらしい（英語でstackoverflowに投稿してみたら30分ぐらいで解決したわ）
https://stackoverflow.com/questions/60371748/override-function-attachbasecontext-is-not-working



# youtubeが古すぎてギブアップ
ちょっと駄目だな。いよいよyoutubeの内容とandroidstudioの操作感が違う。こっちに移ります。Googleの提供しているガイド付きチュートリアルらしい。
https://codelabs.developers.google.com/