Floating action button not showing vector asset

user_1200432 0
Viewed 1226

I'm trying to setup a vector asset into a fab. But the result is like this: enter image description here As you can see the vector is there but way down and to the left. here is the layout 

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/colorBg"
    tools:context=".ui.main.fragments.HomeFragment">


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_new_sale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:backgroundTint="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_cart_plus"
        android:scaleType="center"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_home_cards"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:foregroundGravity="center_vertical|center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

And heres is the vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="200"
    android:viewportHeight="200">
    <path
        android:fillColor="#FF000000"
        android:pathData="M165.1,119.28L75,119.28l2,9.84h82.48a7.37,7.37 0,0 1,7.19 9l-1.7,7.46a17.2,17.2 0,1 1,-19.54 3.19L81,148.77a17.21,17.21 0,1 1,-20.6 -2.63L38.85,40.62L17.38,40.62A7.38,7.38 0,0 1,10 33.24L10,28.33A7.37,7.37 0,0 1,17.38 21h31.5a7.38,7.38 0,0 1,7.23 5.9l2.81,13.77h120.7a7.37,7.37 0,0 1,7.19 9l-14.52,63.91A7.38,7.38 0,0 1,165.1 119.28ZM135.38,72.58L120.63,72.58L120.63,60.28a4.92,4.92 0,0 0,-4.92 -4.91h-4.92a4.91,4.91 0,0 0,-4.91 4.91v12.3L91.13,72.58a4.91,4.91 0,0 0,-4.92 4.91v4.92a4.92,4.92 0,0 0,4.92 4.92h14.75L105.88,99.62a4.91,4.91 0,0 0,4.91 4.91h4.92a4.92,4.92 0,0 0,4.92 -4.91L120.63,87.33h14.75a4.92,4.92 0,0 0,4.91 -4.92L140.29,77.49A4.91,4.91 0,0 0,135.38 72.58Z" />
</vector>

I will appreciate any help with this issue

floating-action-button android
7 Answers

Set 

android {
   defaultConfig {
     vectorDrawables.useSupportLibrary = true
    }
 }

in your build.gradle

user_124788300

I think you need to update your dependencies

I got it to work while using those dependencies:

implementation 'androidx.appcompat:appcompat:1.2.0-alpha02'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation "com.google.android.material:material:1.1.0"


<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/drawable_test"
    />

Screen shot

user_125467330

I know it's old question, and others might have the same problem, so I add this answer.

As others suggested, add the following dependencies to build.gradle:

implementation 'androidx.appcompat:appcompat'
implementation 'com.google.android.material:material:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'

Also as others suggested, add this to build.gradle:

android {
   defaultConfig {
     vectorDrawables.useSupportLibrary = true
    }
 }

In the vector, change android:width and android:height to android:width="24dp" and android:height="24dp".

In layout, in com.google.android.material.floatingactionbutton.FloatingActionButton, add app:fabCustomSize="56dp" or instead of this, add app:fabSize="normal".

user_71879750

The FloatingActionButton widget provides a complete implementation of Material Design’s floating action button component.

upgrade your dependencies 

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

Using AppCompat and app:srcCompat is the most foolproof method of integrating vector drawables into your app.

Finally

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

Note - Kindly reduce width,height value. 

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="200"
    android:viewportHeight="200">

Android Studio 1.4 introduced limited compatibility support for vector drawables by generating PNG files at build time. However, the vector drawable and animated vector drawable support Libraries offer both flexibility and broad compatibility — it's a support library, so you can use it with all Android platform versions back to Android 2.1 (API level 7+). To configure your app to use vector support libraries, add the vectorDrawables element to your build.gradle file in the app module.

Use the following code snippet to configure the vectorDrawables element:

//For Gradle Plugin 2.0+
 android {
   defaultConfig {
     vectorDrawables.useSupportLibrary = true
    }
 }
user_33951980

u can solve your issue with this idea,

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_new_sale"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:backgroundTint="@color/colorAccent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:src="@drawable/ic_cart_plus"
    android:scaleType="center"/>

here u can use android:src insted of app:srcCompat

user_119022280

It worked for me using the following depencencies

implementation 'androidx.appcompat:appcompat'
implementation 'com.google.android.material:material:1.1.0'
implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta4"

try updating these depencencies. I didnt have to do any rescaling. maybe also refer to this and this questions as it might be that your drawable is just not centered properly and leaving the circle

user_106374000

You just need to change your srcCompat to src, and that would solve the problem for you. I am attaching my own FAB code for your ease:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_explore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_16"
        android:src="@drawable/ic_explore_black_24dp"
        app:backgroundTint="@color/accent"
        app:tint="@color/color_white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
user_78101740
Related