CODEWITHSUNDEEP
androidkotlinfloating-action-button
Aldor
Aldor

Reputation: 292

FAB 2 coloured icon

I am using a FAB widget and I want to add a 2 coloured icon in it. Is that possible? This is my current code right now: 

 <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/notificationFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fabSize="mini"
            android:tintMode="multiply"
            android:backgroundTint="@color/colorWhite"
            android:layout_marginTop="5dp"
            app:tint="@color/colorPrimaryLight"
            app:rippleColor="@color/colorPrimary"
            android:layout_marginHorizontal="10dp"
            android:src="@drawable/active_notif_final"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:borderWidth="0dp"
            />

I did a workaround: made the colors of the icon light and added tintMode as multiply to get the original color. But it still doesn't look good.

workaround

Workaround

Original

Original

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/notificationFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/colorWhite"
            android:layout_marginTop="5dp"
            app:rippleColor="@color/colorPrimary"
            android:layout_marginHorizontal="10dp"
            app:icon="@drawable/active_notif_final"
            app:iconTint="@color/colorPrimaryLight"
            app:iconTintMode="multiply"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:borderWidth="0dp"
            />

with extended FAB:

enter image description here

Upvotes: 1

Views: 58

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363895

By default, the icon (app:srcCompat) is tinted with the app:tint color as per the FloatingActionButton documentation.

You can disable this behavior by adding app:tint="@null" to your fab:

 <com.google.android.material.floatingactionbutton.FloatingActionButton
      app:srcCompat="@drawable/..."
      app:tint="@null"
      .../>

In the ExtendedFloatingActionButton the app:icon is tinted with the app:iconTint:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    app:icon="@drawable/...."
    app:iconTint="@null"
    .../>

Upvotes: 1

Related Questions