【Android Kotlin】FrameLayoutを使ってピアノアプリを作成する

## レイアウト

### FrameLayout を適用する
![スクリーンショット 2021-04-03 8.00.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933349/11e8c628-1d48-dff6-a868-a5e0eafd41bb.png)


### FrameLayout とは？
![スクリーンショット 2021-04-03 8.04.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933349/29aea5d4-8fef-61fc-c1dc-ca9884e4b89c.png)

### Design の一例
![スクリーンショット 2021-04-03 10.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933349/f1162899-ca94-3eb9-ccf6-0f8877ca6a58.png)


### サンプルコード
```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="@color/purple_700"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/topButton1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />

        <Button
            android:id="@+id/topButton8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:backgroundTint="#FFFFFF"
            android:paddingStart="1dp"
            android:paddingEnd="1dp"
            app:rippleColor="#DDDDDD"
            app:strokeColor="@color/purple_700"
            app:strokeWidth="1dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/space1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_weight="0.5"
            android:backgroundTint="#222222"
            android:visibility="invisible" />

        <Button
            android:id="@+id/bottomButton1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222" />

        <Button
            android:id="@+id/bottomButton2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222" />

        <Button
            android:id="@+id/space2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222"
            android:visibility="invisible" />

        <Button
            android:id="@+id/bottomButton3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222" />

        <Button
            android:id="@+id/bottomButton4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222" />

        <Button
            android:id="@+id/bottomButton5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222" />

        <Button
            android:id="@+id/space3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_weight="1"
            android:backgroundTint="#222222"
            android:visibility="invisible" />

        <Button
            android:id="@+id/space4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginEnd="4dp"
            android:layout_weight="0.5"
            android:backgroundTint="#222222"
            android:visibility="invisible" />

    </LinearLayout>

</FrameLayout>
```

## 音を鳴らす処理を書く
使いたい音は、フリー音源を検索して、ダウンロードしてみよう！

```Kotlin:MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        //音声の読み込み
        
        //鍵盤（ボタン）を押したら音が鳴る処理
        
    }
}
```