【Android】オリジナルのフローティングアイコンを作る

新規プロジェクトのテンプレートにフローティングアイコンのサンプルは用意されています。
　
f:id:yyama1556:20210503112724p:plain
　
実際にプロジェクトを作成して実行すると次のようなフローティングアイコンが表示されます。
　
f:id:yyama1556:20210503113432p:plain:w300
　
グリーンの背景にメールアイコンのフローティングアイコンになっています。

これをカスタマイズしてアイテム追加用のアイコンに変更したいと思います。

activity_main.xml に記載されているフローティングアイコンの箇所は次のようになっています。

    <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="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

まずは最終行のアイコン素材を変更します。SDKに標準で存在するプラス記号のようなマーク（@android:drawable/ic_input_add）を指定します。

    <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="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add" />

次のような表示になりました。

f:id:yyama1556:20210503114637p:plain:w100

プラス記号を白くしたいです。
app:tint 属性を追加して白を指定します。

    <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="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add"
        app:tint="@android:color/white" />

次のような表示になりました。
f:id:yyama1556:20210503115021p:plain:w100

プラス記号をもっと大きくして目立つようにしたいです。
app:maxImageSize 属性を追加します。

    <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="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add"
        app:tint="@android:color/white"
        app:maxImageSize="60dp" />

　
次のような表示になりました。
f:id:yyama1556:20210503115512p:plain:w100
　
背景色をピンク色っぽく変えようと思います。
app:backgroundTint 属性を追加します。

    <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="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add"
        app:tint="@android:color/white"
        app:maxImageSize="60dp"
        app:backgroundTint="#f595ee" />