【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【Android】<kotlin>FAB(Floating Action Button)の実装方法とカスタマイズについて徹底解説!

すだ

みなさまこんにちは〜!
メモリアインクのすだです。

本日は、
レイアウトにFAB(Floating Action Button)というボタンを実装して、さらにカスタマイズする方法をご紹介します!

この記事を読んでわかること…

  • FAB(Floating Action Button)とは?
  • FABの実装方法
  • FABのカスタマイズ方法
  • スクロール時のFAB表示・非表示を切り替える実装方法
目次

環境

  • Kotlin (ver 1.9.0)
  • Android Studio (Giraffe | 2022.3.1 Patch 3)

FAB(Floating Action Button)とは?

FAB(Floating Action Button)とは、画面の上に浮かぶように表示される円形のボタンです。
よく使われる例としては、チャットアプリでの新規メッセージ作成ボタンや、地図アプリの現在地表示ボタンなどがあります。

FABはユーザーに対して重要なアクションを提供するため、視覚的に目立つように設計されています。

【Android】<kotlin>FAB(Floating Action Button)の実装方法とカスタマイズについて徹底解説!

FABをレイアウトに実装する方法

早速FABを実装してみましょう!

レイアウトファイルを以下のように実装してください。

<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="30dp"/>

ビルドしてみると…

【Android】<kotlin>FAB(Floating Action Button)の実装方法とカスタマイズについて徹底解説!

このようにシンプルなボタンが画面右下に表示されました。
(タップしてみると ボタンを押した感がしっかり出ます)

FABのカスタマイズ方法

ボタンは様々にカスタマイズできますので、試してみましょう。

サイズの変更

app:sizeをセットすることで、ボタンのサイズを変更できます。

サイズ属性値説明
通常 (標準)size="normal" (デフォルト)56dp
小さめfabSize="mini"40dp
自動調整fabSize="mini"ウィンドウサイズに応じて自動調整
自由サイズfabCustomSize="56dp"自由にサイズを指定可能
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fabCustomSize="100dp"  />

アイコンの変更

android:srcをセットすることで、ボタンのに表示するアイコンを設定できます。
また、app:maxImageSizeでアイコンのサイズを変えることができます。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:src="@drawable/ic_add"
    app:maxImageSize="36dp" />

色の変更

app:backgroundTintで背景色を、app:tintでアイコンの色を変更できます。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/teal_200"
    app:tint="@android:color/white" />

影の調整

FABにはデフォルトで影がついていますが、app:elevationをセットすることによって調整可能です。

影を消す
app:elevation="0dp"

影を強くする
app:elevation="12dp"

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:elevation="12dp" />

角丸の調整

app:shapeAppearanceOverlayをセットすることで、角丸を変更できます。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/RoundedCorners" />
<style name="RoundedCorners" parent="">
    <item name="cornerSize">16dp</item>
</style>

長押しでテキストラベルを表示

android:contentDescriptionを長押し時にアクセシビリティラベルが表示されます。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:contentDescription="追加ボタン" />

アニメーションを追加

表示・非表示を指定して、アニメーションを加えることもできます。

fab.show()  // 表示
fab.hide()  // 非表示
fab.animate().scaleX(0f).scaleY(0f).setDuration(300).start()  // フェードアウト
fab.animate().scaleX(1f).scaleY(1f).setDuration(300).start()  // フェードイン

Extended FloatingActionButton (テキスト付きFAB)

テキスト付きのFABを作りたい場合は ExtendedFloatingActionButton を使います。

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/extended_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="追加"
    android:icon="@drawable/ic_add"
    app:backgroundTint="@color/teal_700" />

コードで動的に設定

Kotlinからプログラムで動的にFABをカスタマイズできます。

val fab = findViewById<FloatingActionButton>(R.id.fab)
fab.setImageResource(R.drawable.ic_add)
fab.backgroundTintList = ContextCompat.getColorStateList(this, R.color.teal_700)

スクロール時のFAB表示・非表示を切り替える実装方法

続いて、上方向にスクロールしている時のみFABが表示されるよう実装してみます。

val fab: FloatingActionButton = findViewById(R.id.fab)

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)

        if (dy > 0) {
            fab.hide()  // 下にスクロールしているときFABを非表示
        } else if (dy < 0) {
            fab.show()  // 上にスクロールしているときFABを表示
        }
    }
})

addOnScrollListener()の使い方については、以下の記事でもご紹介しておりますので
ぜひ合わせてご覧ください!

【Android】<kotlin>FAB(Floating Action Button)の実装方法とカスタマイズについて徹底解説!

私は↑こんな感じで、画面を開くとゆっくりFABがフェードインされるように実装してみました!

まとめ

おつかれさまでした。いかがでしたでしょうか!

  • FABは視覚的に目立つボタンであり、重要なアクションをユーザーに提供する
  • RecyclerView のスクロールを監視し、FABの表示・非表示を切り替えることで、画面を広く使いながらユーザーの利便性を高めることができる

上記ぜひ覚えて、アプリ開発で試してみてくださいね〜!

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか?

それではまた次の記事でお会いしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

コメントする

目次