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

レイアウト

FrameLayout を適用する

FrameLayout とは？

Design の一例

サンプルコード

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>

音を鳴らす処理を書く

使いたい音は、フリー音源を検索して、ダウンロードしてみよう！

MainActivity.kt

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