【Android】画面コンポーネント / FloatingActionButton

■ はじめに

Floating Action Button(FAB; フローティングアクションボタン)について、
学ぶ。

以下の動画が参考になる

https://www.youtube.com/watch?v=cASXtRa6yDc

■ 初期設定

[1] 「build.gradle (Module:app)」に
 「implementation 'com.google.android.material:material:【バージョン ※】'」を追記

※ 【バージョン】は、以下のサイトから最新版を確認(今回は「1.2.0-rc01」)

https://github.com/material-components/material-components-android/releases

[2] Android Studioの[Build]-[Rebuild Project]を選択し、ビルドする

build.gradle (Module:app)

dependencies {
    ...略
    implementation 'com.google.android.material:material:1.2.0-rc01'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

■ サンプル

準備:アイコンの追加

[1] [app]-[res]-[drawable] を選択し、
 右クリックして、[New]-[Vector Assert]を選択
[2] 以下を入力し、「Next」「Finish」ボタンをそれぞれ押下
 + Name : 任意の文字列(今回は「ic_baseline_add_24」)
 + Clip Art : 任意のアイコン(今回は「add(+)」)

デザイン部

[1] FloatingActionButtonを追加し、プロパティを変更する
 + id : 任意の文字列(今回は「addFloatingActionButton」)
 + layout_gravity : bottom|end
 + layout_margin : 16dp
 + src : 「準備:アイコンの追加」で追加したアイコン
[2] activity_main.xml を以下のように変更

[変更前]
<androidx.constraintlayout.widget.ConstraintLayout
[変更後]
<androidx.coordinatorlayout.widget.CoordinatorLayout 

プログラミング部

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        addFloatingActionButton.setOnClickListener {
            Toast.makeText(this, "クリックしました", Toast.LENGTH_SHORT).show()
        }
    }
}

参考文献

https://qiita.com/orimomo/items/e1e63a7bfffd5b1ebb46
https://hirauchi-genta.com/kotlin-floatingactionbutton/