VectorDrawable not showing or drawed wrong

Issue

I have 5 vectorDrawables, where 3 of them is generated from an PSD given to me from google.

Two of them is showing correctly (both from the generated vector from PSD), but the other two is not working at all, when running on API 21, but works fine on API 26, 27.

Two two vectors not showing looks like this

The two ImageButton's looks like this: (full XML file)

  <ImageButton
    android:id="@+id/multiplayerButton"
    android:layout_width="0dp"
    android:layout_height="80dp"
    android:layout_marginTop="4dp"
    android:background="@drawable/rounded_corners"
    android:paddingBottom="2dp"
    android:paddingTop="2dp"
    android:scaleType="fitCenter"
    android:src="@drawable/button_multiplayer_icon"
    app:layout_constraintEnd_toEndOf="@id/guideline3"
    app:layout_constraintStart_toStartOf="@id/guideline2"
    app:layout_constraintTop_toBottomOf="@id/startButton" />

    <ImageButton
    android:id="@+id/achievementButton"
    android:layout_width="0dp"
    android:layout_height="80dp"
    android:layout_marginStart="2dp"
    android:layout_marginTop="4dp"
    android:background="@drawable/rounded_corners"
    android:paddingBottom="8dp"
    android:paddingTop="8dp"
    android:scaleType="fitCenter"
    android:src="@drawable/button_achievements_icon"
    app:layout_constraintEnd_toEndOf="@id/multiplayerButton"
    app:layout_constraintStart_toEndOf="@id/highscoreButton"
    app:layout_constraintTop_toBottomOf="@id/multiplayerButton" />

The sword vector looks this way

<vector android:height="24dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@color/menu_buttons" android:name="ic multiplayer"
    android:pathData="m468.9 41.5 -73.1 15.5 -127.2 139.4 43.1 47.3 141.6 -129.2 15.5 -73.1zm-267.5 228.6 -55.8 61.2 -28.7 -28.7 -28.8 28.7 20 20 -69.5 69.5 51.6 51.6 69.4 -69.5 19.4 19.3 28.7 -28.7 -28.7 -28.7 63 -57.5 -40.7 -37.2zm-158.4 -228.6 15.6 73.1 274.3 250.3 -28.7 28.7 28.8 28.8 19.3 -19.3 69.5 69.5 51.6 -51.6 -69.4 -69.5 20 -20 -28.8 -28.7 -28.7 28.7 -250.3 -274.3 -73.1 -15.5z"/>

And the ribbon vector xml file looks like this

<vector android:height="24dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@color/menu_buttons" android:name="ic achievements"
    android:pathData="m256.3 343.9 47.2 21.9 23 -34.2 55.3 104 -69.8 68.3 -55.7 -160zm-0.7 0 -47.2 21.9 -22.9 -34.2 -55.3 104 69.8 68.3 55.7 -160zm0.3 -296.5 43.1 -20 27.4 38.9 47.3 4.2 4.2 47.4 38.9 27.3 -20 43.1 20 43.1 -38.9 27.4 -4.2 47.3 -47.3 4.2 -27.4 38.9 -43.1 -20 -43.1 20 -27.4 -38.9 -47.3 -4.2 -4.2 -47.3 -38.9 -27.4 20 -43.1 -20 -43.1 38.9 -27.3 4.2 -47.4 47.3 -4.2 27.4 -38.9 43.1 20zm0.2 48.5c-50.8 0 -92.1 41.2 -92.1 92c0 50.9 41.2 92.1 92.1 92.1c50.8 0 92 -41.2 92 -92.1c0 -50.8 -41.2 -92 -92 -92z"/>

Where the variable menu_buttons is defined to #FFC107, in colors.xml

Solution

VectorDrawable added in API level 21.

Support Library 23.2 or higher provides full support to Vector Drawables and Animated Vector Drawables on devices running Android 5.0 (API level 21) or lower.

You should use

 app:srcCompat="@drawable/your_vector_image"

You need to add vectorDrawables.useSupportLibrary = true to your build.gradle file:

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

FYI

app:srcCompat attribute to reference vector drawables as well as any other drawable available to android:src.

Answered By - IntelliJ Amiya