みなさまこんにちは〜!
メモリアインクのすだです。
本日は、
レイアウトに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はユーザーに対して重要なアクションを提供するため、視覚的に目立つように設計されています。
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"/>
ビルドしてみると…
このようにシンプルなボタンが画面右下に表示されました。
(タップしてみると ボタンを押した感がしっかり出ます)
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()の使い方については、以下の記事でもご紹介しておりますので
ぜひ合わせてご覧ください!
私は↑こんな感じで、画面を開くとゆっくりFABがフェードインされるように実装してみました!
まとめ
おつかれさまでした。いかがでしたでしょうか!
- FABは視覚的に目立つボタンであり、重要なアクションをユーザーに提供する
RecyclerView
のスクロールを監視し、FABの表示・非表示を切り替えることで、画面を広く使いながらユーザーの利便性を高めることができる
上記ぜひ覚えて、アプリ開発で試してみてくださいね〜!
技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
自分の市場価値をさらに向上させてみませんか?
それではまた次の記事でお会いしましょう!
コメント