'Svg not visible in device but visible in android xml

enter image description here

I have used SVG's for these icons, the icons are visible in xml but not visible in device . following is my code :

                ` <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:weightSum="10"
                   >

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="25dp"
                        android:layout_weight="1.5"
                        app:srcCompat="@drawable/email_id_icon"
                        />

                    <EditText
                        android:layout_width="0dp"
                        android:id="@+id/et_email"
                        android:layout_height="wrap_content"
                        android:layout_weight="8"
                        android:textColor="#fff"
                        android:inputType="textEmailAddress"
                        android:background="@android:color/transparent"
                        android:hint="Email Id"
                        android:textColorHint="#fff"
                        android:imeOptions="actionNext"
                        />

                </LinearLayout>`

I have gone through similar questions on SO, most of them suggested to use android: src instead of app:srcCompat , but I have to use srcCompat only because of SVGs. So what should I do?

Edit - I have done the same thing in another activity's layout . here is the working code : 

  <LinearLayout
        android:id="@+id/login_form_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView2"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="10">

            <ImageView
                android:id="@+id/username_iv"
                android:layout_width="0dp"
                android:layout_height="25dp"


                android:layout_weight="2"
                app:srcCompat="@drawable/email_id_icon" />

            <EditText
                android:layout_width="0dp"
                android:id="@+id/username_et"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:textColor="#fff"
                android:inputType="textEmailAddress"
                android:background="@android:color/transparent"
                android:hint="Email Id"
                android:textColorHint="#fff"
                android:imeOptions="actionNext"
                />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginBottom="10dp"
            android:background="#fff" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="10">

            <ImageView
                android:id="@+id/password_iv"
                android:layout_width="0dp"
                android:layout_height="25dp"
                android:layout_weight="2"
                app:srcCompat="@drawable/password_icon" />

            <EditText
                android:id="@+id/password_et"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:layout_width="0dp"
                android:background="@android:color/transparent"
                android:textColor="#fff"
                android:hint="Password"
                android:inputType="textPassword"
                android:fontFamily="roboto"
                android:textColorHint="#fff"
                 />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginBottom="20dp"
            android:background="#fff" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/btn_login"
            android:layout_marginBottom="20dp"
            android:background="@drawable/login_button_style"
            android:text="Login"
            android:textSize="@dimen/headingText"
            android:textAllCaps="false"
            android:textColor="#fff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_forgetpassword"
            android:layout_marginBottom="10dp"
            android:text="Forget your password ?"
            android:textColor="#fff"
            android:textSize="@dimen/headingText" />


    </LinearLayout>

I did not want to have icons in 4 resolutions so I made a single .png image and converted into .svg using Android Studio's Vector asset .

androidxmlandroid-layoutsvgandroid-imageview


Solution 1:[1]

Make sure you are using AppCompatActivity and not Activity. If you are using Activity, then write in your activity / fragment:

imageView.setImageResource(R.drawable.ic_svg_image);

Also add in build.gradle:

android {  
    defaultConfig {  
        vectorDrawables.useSupportLibrary = true  
    }  
}

And for 4.x versions of Android you can also add a support for TextViews' inner drawables. This is also actual for ImageViews.

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // This flag should be set to true to enable VectorDrawable support for API < 21.
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }
}

Then in AndroidManifest add this file:

<application
    android:name=".MyApplication"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    ...
</application>

Sometimes it crushes on some old devices. Then wrap your drawable inside:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_svg_image/>
</selector>

and set it instead of SVG:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/drawable"
    />

Solution 2:[2]

  1. Add vectorDrawables in build.gradle (app)

    defaultConfig { vectorDrawables.useSupportLibrary = true }

  2. Then use androidx.appcompat.widget.AppCompatImageView instead of ImageView.

  3. Make sure to use android:src to specify the svg added with Vector Asset tool.

  4. Done!

Solution 3:[3]

you can use VectorDrawable

Here is a tool to convert you svg to VectorDrawable

On pre lollipop device svg support is not quite comprehensive.

Add this in your build.gradle

 android {  
    defaultConfig {  
        vectorDrawables.useSupportLibrary = true  
    }  
}

Solution 4:[4]

Late answer but hope it helps someone. If someone is using constraint layout as the parent, with android:layout_height="wrap_content" and if any of the inner views have android:layout_height="match_parent", then the inner view is not visible. Making the height of the inner elements to wrap content and constraining it to the top and bottom of the parent constraint layout element made it work for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 GeneCode
Solution 3 rafsanahmad007
Solution 4 Arun Krishna

Related Questions