Zenn
💻

【備忘録】FloatingActionButtonについて

2023/07/17に公開
Android
Kotlin
#
application
#
fab
tech

備忘録④FloatingActionButton

前回に引き続き、Todoアプリで使ったFloatingActionButtonについて備忘録を残します。

もしよろしければ、アプリの感想やご意見も頂ければ幸いです。
https://play.google.com/store/apps/details?id=jp.dev.myapp.todo

はじめに

Androidアプリケーションのユーザーインターフェースを改善するために、マテリアルデザインガイドラインは貴重なリソースです。その中でも、FloatingActionButton（以下、FAB）は特に注目に値する要素の一つです。FABは、アプリケーション内の主要なアクションをユーザーに提示する効果的な方法として広く使用されています。

FloatingActionButtonの概要

FABは、画面上の主要なアクションを表現するための浮遊する円形のボタンです。マテリアルデザインの一環として導入され、ユーザーエクスペリエンスを向上させる効果的な要素として定評があります。
メインコンテンツの上に浮かせて配置され、目立つ位置に配置することで、ユーザーの操作を促す役割を果たします。

FABの特徴とデザイン原則

  • 特徴
    FABは、円形の形状を持ち、ドロップシャドウやアイコンなどのデザイン要素を組み合わせて使用されます。ユーザーの主要なアクションを起動するためのトリガーとして機能します。
  • デザイン原則
    デザイン原則として、シンプルさ、目立ちやすさ、アニメーションの活用などが重視されます。

FABの実装方法

以下は、FloatingActionButtonを実装する例です。実装にはAndroid Design Support Library（またはMaterial Components Library）を使用します。

  1. レイアウトファイル（activity_main.xml）でFloatingActionButtonを定義します。
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 他のビューとの配置や重なりを調整するためのコンテンツ部分 -->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/ic_add"
        app:backgroundTint="@color/colorAccent" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
  1. MainActivity.ktでFloatingActionButtonを操作します。
import com.google.android.material.floatingactionbutton.FloatingActionButton

class MainActivity : AppCompatActivity() {
    private lateinit var fab: FloatingActionButton

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

        fab = findViewById(R.id.fab)
        fab.setOnClickListener {
            // FABがクリックされた時の処理
        }
    }
}

上記の例では、activity_main.xmlでCoordinatorLayoutを使用してコンテンツ部分とFloatingActionButtonを配置しています。FloatingActionButtonには、app:srcCompat属性を使用してアイコンを指定し、app:backgroundTint属性を使用して背景色を指定しています。
MainActivity.ktでは、findViewById()メソッドを使用してFloatingActionButtonを取得し、setOnClickListener()メソッドでクリックイベントを処理しています。

FABの使用例とベストプラクティス

FABは、アプリケーション内の主要なアクションを実行するために使用されます。例えば、メッセージの新規作成や送信、共有などのアクションを実行するために利用されます。
また、画面上の他の要素とのバランスを考慮しながら配置する必要があります。目立ちすぎる場所や他の要素との重なりが避けられない場所に配置すると、ユーザーエクスペリエンスに悪影響を与える可能性があります。

まとめ

FloatingActionButtonは、ユーザーに主要なアクションを提示するための重要な要素です。FABを適切に活用することで、ユーザーインターフェースの洗練度と使いやすさを向上させることができます。

Discussion