Genta Hirauchi

公開日:2020/02/22
更新日:2020/03/22

【Kotlin基礎】FloatingActionButtonを実装する方法を解説

  • KotlinでFloatingActionButtonを実装する方法が知りたい。
  • FloatingActionButtonをコードで動的に実装したい。
  • ボタンが変更された時に、何らかの処理を行いたい。

Kotlinには、FloatingActionButtonという浮き出しボタンを実装するViewがあります。FloatingActionButtonは、Googleが推奨するマテリアルデザインのボタンです。

本記事では、FloatingActionButtonの実装方法や、ボタンがタップされた時に、任意の処理を行う方法について、サンプルコードを交え、わかりやすく解説しております。

目次

FloatingActionButtonを実装する方法

ライブラリの導入

Kotlinでマテリアルデザインのボタンを実装するには、FloatingActionButtonというViewを使用します。

【公式ドキュメント】 : FloatingActionButton | Android Developers

FloatingActionButtonを実装するには、Material Componentsというライブラリを追加する必要があります。

ライブラリを追加するには、build.gradleのdependenciesに、以下を追加します。

  • build.gradle
implementation 'com.google.android.material:material:1.1.0'

Materialのバージョンに関しましては、Releases · material-components/material-components-android · GitHubを参照ください。

Point
  • FloatingActionButtonを実装するには、Material Componentsを追加する

xmlでFloatingActionButtonを実装する

xmlでFloatingActionButton実装するには、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   tools:context=".MainActivity"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:srcCompat="@drawable/soccer_ball"
       app:backgroundTint="#00ff00"
       android:layout_alignParentEnd="true"
       android:layout_alignParentBottom="true"
       android:layout_margin="16dp"/>

</RelativeLayout>

Switchを実装するには、<FloatingActionButton/>タグを使用します。

FloatingActionButtonに表示するアイコンは、app:srcCompatで指定します。

FloatingActionButtonの背景は、app:backgroundTintで指定します。

Point
  • xmlでFloatingActionButtonを実装するには、<FloatingActionButton/>タグを使用する
  • xmlでボタンのアイコンを指定するには、app:srcCompatを使用する
  • xmlでボタンの背景色を指定するには、app:backgroundTintを使用する

コードで動的にFloatingActionButtonを実装する

続いて、コードで動的にFloatingActionButtonを実装する方法を紹介致します。コードで動的にFloatingActionButtonを実装するには、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   // FloatingActionButtonの生成
   val floatingActionButton = FloatingActionButton(this).apply {

       // アイコンの指定
       setImageResource(R.drawable.soccer_ball)

       // 背景色の指定
       setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#00ff00")))

       // レイアウトの指定
       layoutParams = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT).apply {

           // 位置の指定
           addRule(RelativeLayout.ALIGN_PARENT_END)
           addRule(RelativeLayout.ALIGN_PARENT_BOTTOM)

           // 間隔の指定
           val metrics = getResources().getDisplayMetrics()
           val margin = (24 * metrics.density).toInt()
           setMargins(margin, margin, margin, margin)
       }
   }

   // FloatingActionButtonをRelativeLayoutの子Viewとして追加
   val relativeLayout = findViewById<RelativeLayout>(R.id.container)
   relativeLayout.addView(floatingActionButton)
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   tools:context=".MainActivity"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

</RelativeLayout>

FloatingActionButton()で、FloatingActionButtonのインスタンスを生成しております。

FloatingActionButtonに表示するアイコンは、setImageResource()で指定します。

FloatingActionButtonの背景は、setBackgroundTintList()で指定します。

その後、LayoutPramasでレイアウトを設定し、親のRelativeLayoutに対し、addView()でFloatingActionButtonを追加しております。

Point
  • コードで実装するには、FloatingActionButton()でインスタンスを生成した後、addView()で追加する
  • コードでボタンのアイコンを指定するには、setImageResource()を使用する
  • コードでボタンの背景色を指定するには、setBackgroundTintList()を使用する

なお、コードでの実装では、applyというスコープ関数を使用しております。applyに関しましては、以下の記事に詳しくまとめておりますので、そちらをご覧いただけると幸いです。

【Kotlin基礎】スコープ関数applyの実装方法と用途を解説

スコープ関数は、初めはなかなか理解しづらいかもしれませんが、覚えておくととても便利です。本記事では、スコープ関数applyについて解説致します。他のスコープ関数(let, run, also等)につきましては、簡単な解説と、詳細をまとめた記事へのリンクがありますので、そちらをご覧頂けたらと思います。

タップイベントを受け取る方法

続いて、FloatingActionButtonのタップイベントを受け取る方法を紹介致します。タップイベントを受け取るには、setOnClickListenerを使用します。

以下は、FloatingActionButtonをクリックすると、「タップされました。」とトーストが表示されるサンプルコードです。

  • MainActivity.kt
  • activity_main.xml
val floatingActionButton = findViewById<FloatingActionButton>(R.id.floating_action_button)

// FloatingActionButtonに、タップイベントを追加
floatingActionButton.setOnClickListener {
   Toast.makeText(this, "タップされました。", Toast.LENGTH_SHORT).show()
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   tools:context=".MainActivity"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:id="@+id/floating_action_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:srcCompat="@drawable/soccer_ball"
       app:backgroundTint="#00ff00"
       android:layout_alignParentEnd="true"
       android:layout_alignParentBottom="true"
       android:layout_margin="16dp"/>

</RelativeLayout>

setOnClickListenerの後のブロック{ }内に、タップされた時に行いたい処理を実装します。

Point
  • タップイベントを実装するには、setOnClickListenerを使用する
  • タップされた時に行いたい処理は、setOnClickListenerの後のブロック{ }内に実装する

まとめ

  • FloatingActionButtonを実装するには、Material Componentsを追加する
  • xmlでFloatingActionButtonを実装するには、<FloatingActionButton/>タグを使用する
  • xmlでボタンのアイコンを指定するには、app:srcCompatを使用する
  • xmlでボタンの背景色を指定するには、app:backgroundTintを使用する
  • コードで実装するには、FloatingActionButton()でインスタンスを生成した後、addView()で追加する
  • コードでボタンのアイコンを指定するには、setImageResource()を使用する
  • コードでボタンの背景色を指定するには、setBackgroundTintList()を使用する
  • タップイベントを実装するには、setOnClickListenerを使用する
  • タップされた時に行いたい処理は、setOnClickListenerの後のブロック{ }内に実装する