■ はじめに
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/