Floating action Button vector image remains black (Material design)

Question

I'm trying to get the vector image inside a Floating action button (with @+id/fab ) to be white, however, it keeps showing up as black (the image inside the button)

The layout:

    <?xml version="1.0" encoding="utf-8"?>
<!-- this is the Detail page of the item. -->

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ItemDetailActivity"
    tools:ignore="MergeRootFrame">

    <!--android.support.design.widget.AppBarLayout-->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <!--android.support.design.widget.CollapsingToolbarLayout -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <!--android.support.v7.widget.Toolbar -->

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/detail_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<!--            <com.google.android.gms.ads.AdView
                android:id="@+id/adView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />-->

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/item_detail_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <!--android.support.design.widget.FloatingActionButton -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|start"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@+id/item_detail_container"
        app:layout_anchorGravity="top|end"
        app:backgroundTint="#0550F7"
        app:srcCompat="@drawable/ic_navigation_white_24dp"
        />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

the drawable ic_navigation_white_24dp:

<vector android:height="50dp" android:tint="#FFFFFF"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@color/white" android:pathData="M12,2L4.5,20.29l0.71,0.71L12,18l6.79,3 0.71,-0.71z"/>
</vector>

the theme for this activity (in androidManifest.xml) is:

android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar"

ideas how to make the vectore image color of "ic_navigation_white_24dp" white ?

It might be helpful if you could post a picture of the image (or a screenshot) Also, what is the API version of the device you are running this on? The usual way I've seen to specify the color of the image is to use "android:fillColor" in the xml file for the vector so it seems like you're doing the right thing. — AndroidGuy, Feb 18 '19 at 22:59

score 0 · Answer 1 · answered Feb 18 '19 at 23:29

0

1. Check your vector drawable in android studio preview tab

Is it draw correctly? Preview tab is right at the IDE.

You can see how xml drawables are shown

2. Adjust Background of Floating Action Button

3. Can you adjust your vector drawable size to 24x24?

answered Feb 18 '19 at 23:29

MJ Studio

3,947
1
26
37

1. it was drawn correctly but the vector itself was black instead of white. i tried chaning the color inside the drawable it didn't do the trick background is already what i defined - thew issue was with the vector image itself i ended up using the answer from the original answer (my question turned out to be duplicate). In the fab element I added this row: app:tint="@null" – Dror Feb 19 '19 at 17:55

score 0 · Answer 2 · answered Feb 19 '19 at 00:15

0

Try removing the "android:tint="#FFFFFF" attribute from the vector drawable, and the " app:backgroundTint="#0550F7" from the layout.

answered Feb 19 '19 at 00:15

AndroidGuy

3,371
1
19
21

Floating action Button vector image remains black (Material design)

2 Answers2