「アイコンサイズ」の考え方は統一されている
話はこの記事と同じで、、、
【Android】Toolbarのアイコンサイズは「24dp」(「32dp」ではない)!
以下のページを読んでいくと、
Sizing
・Live area: 44dp circle
・Total area: 48dp circle
・System icon: 24dp
このような記載があり、基本的に、アイコンというのは「System icon」という位置づけで考えたらよいっぽくて、「サイズは24dp」で、そのアイコンを中心に各Area(余白)を設ければ、Googleの提唱するデザインとして間違いがないっぽい。
「Toolbarのアイコン」も、「Floating Action Button(FAB)のアイコン」も、例外はないみたいで、これはすごく分かりやすい話だと思う。
とにかく、アイコンは「24dp」で用意してしまえば、後は、適宜、各Area(余白)を設計すれば万事解決っぽい。
こういう思想がフレームワークとしての理想だと思うのだが、リファレンスってのはホント記載が分かり辛い!
公式の「System icon」をFloatingActionButton(FAB)に設定してみる
ピンポイントに「Floating Action Button(FAB)だったらこうしろや!」というような記載は先のページには存在しないので、じゃあ、試してみるしかないよねってことで、ちゃちゃっとやってみる。
のページで公式の「System icon」が提供されているから、これの中からダウンロードして使う。
おぉ、数が豊富で、日々のアプリ開発でマジに重宝する…!
で、Floating Action Button(FAB)の設定は、
<!-- Floating Action Button -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/floating_action_button"
android:src="@drawable/ic_edit_white_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_gravity="end|bottom"
app:fabSize="auto" />
こうだが、単純に、ダウンロードしたアイコン「ic_edit_white_24dp」を改変せずそのまま設定してみた。
以下はそのスクリーンショット(鉛筆アイコン部分)。
おーっ、違和感ないね!
Googleの公式アプリ、Gmailをキャプチャして比較したけど、サイズは一緒だった。
※実は、ここにFAB専用解説ページがある→「Buttons: Floating Action Button」
……ちなみに、余談だけど、以下のマージン、
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
Gmailをキャプチャしてペイントでピクセルをグリッドにして計ったら、上記の通り、画面端からは「16dpの余白」だった、余談ね。
てなわけで、Floating Action Button(FAB)自体を作成する解説をしているサイトもあったけど、ハッキリ言って、公式の「System icon」を「24dp」で使って実現すれば、圧倒的に時間コストはカットできると思う。
公式のものを使っていれば間違いは無いだろうし。
「app:fabSize="mini"」では?
ところで、Floating Action Button(FAB)には、
app:fabSize="mini"
app:fabSize="normal"
の2種類がある。
size int: one of SIZE_NORMAL, SIZE_MINI or SIZE_AUTO
「小さい方の、アイコンサイズはどうなるの???」
という疑問が上がるかもしれないが、先のページは、小さい場合はアイコンをさらに小さくしろ、という記載はしていないし、むしろ同じにしろと書いてある。
つまり、アイコンサイズは常に「24dp」であり、余白を適宜設計しましょう、という至極分かりやすい考えなのである。
サンプルアプリ
以下のメモ帳アプリ(文中に登場するスクショのアプリ)では、「ic_edit_white_24dp」だけでなく、「ic_add_white_24dp」をFloating Action Button(FAB)に用いた画面もあるので、実際の見た目や操作感を確認したいという方は、一度、是非、参考にしてみてください。
シンプルなメモ帳は文字数もカウントする-様々なカスタマイズ機能を搭載した無料ノート-NOTEBOSS
【動作環境】
Android OS 5.0以上
Made in Japan.
© CUTBOSS
Producer & Director, Boss of the Barber.
Lead Programmer & Designer, Boss of the Barber.