CODEWITHSUNDEEP
androidsvgreact-native
CodeBy
CodeBy

Reputation: 762

How to implement Android splash screen using svg instead of png?

I make RN app. For Android version I have made /drawable/splash_screen.xml with following content

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  <item
    android:drawable="@color/gray"/>

  <item>
    <bitmap
      android:gravity="center"
      android:src="@mipmap/ic_launcher"/>
  </item>

</layer-list>

and links to this file in res/values/styles.xml

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
</style>

also in AndoirdManifest.xml

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:theme="@style/SplashTheme"
    android:screenOrientation="landscape"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

This works fine, but I'd like to make SVG file instead PNG (mipmap/ic_launcher). The SVG file might be like this https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html (at least without animation). How to achieve this?

Upvotes: 17

Views: 25425

Answers (4)

Alexsandr Shpuryka
Alexsandr Shpuryka

Reputation: 9

First conversion to xml and second naming of managed elements in svg. (VectorDrawable) android_svg.xml:

   <vector android:height="400dp" android:viewportHeight="206.132".....>
   ...............
    <path android:name = "arrow"
        android:fillColor="#00000000"
        android:pathData="M 47.30268,56.147897 37.688314,45.379807"
        android:strokeAlpha="1" android:strokeColor="#151414"
        android:strokeLineCap="butt" android:strokeLineJoin="miter" android:strokeWidth="1"/>
   </vector>

Third use of AnimatedVectorDrawable to animate VectorDrawable:

 <animated-vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        ............................>
    <target android:name="arrow">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="1000"
                    android:propertyName="pathData"
                    android:valueFrom="M 47.30268,56.147897 37.688314,45.379807"
                    android:valueTo=  "M 47.30268,56.147897 37.688314,45.379807"
                    android:valueType="pathType"
                    tools:targetApi="lollipop" />
                <objectAnimator
                    android:duration="1000"
                    android:propertyName="pathData"
                    android:valueFrom="M 47.30268,56.147897 37.688314,45.379807"
                    android:valueTo=  "M 47.30268,56.147897 57.686195,45.187519"
                    android:valueType="pathType"
                    tools:targetApi="lollipop" />
            </set>

        </aapt:attr>
    </target>
</animated-vector>

Here is https://www.ap-impulse.com/animaciya-svg-dlya-web-i-android-splash-screen-shag-105/ for a description of how to use the above. Here's the project itself https://github.com/nik137/Diagnostics

Upvotes: 1

N&#237;colas Schirmer
N&#237;colas Schirmer

Reputation: 1444

The default SVG importer in the Android Studio doesn't work too well, so I recommend to use a SVG to VectorDrawable converter like svg2android.

Now we need to create a drawable file using the code generated by the svg2android.

res/drawable --> new --> drawable resource file --> paste the vector code there

And on the splash_screen.xml we need to add an item using our vector as drawable with a gravity set to center.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- background with solid color -->
    <item android:drawable="@android:color/white"/>

    <!-- logo -->
    <item
        android:drawable="@drawable/your_logo"
        android:gravity="center"/>

</layer-list>

-- Edited (Dec 2019) --

As @petyr pointed in the comments, the svg2android is now deprecated, but the as @Krisztián suggested, the Respresso Image Converter can do virtually everything that svg2android can. Just add a SVG image into it, leave it in auto and it will produce an Android compatible SVG.

Upvotes: 30

codigo-francisco
codigo-francisco

Reputation: 159

In the xml file you need to use the attribute drawable only instead of a bitmap tag

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:drawable="@color/gray"/>

  <item android:drawable="@mipmap/ic_launcher"/>

</layer-list>

Upvotes: 7

Sid
Sid

Reputation: 23

Hi you can simply import your svg into your project by following this :

  1. Right Click on drawable folder in android studio.
  2. Choose New > Vector Drawable > Local File
  3. After importing file will copied to drawable folder.

  4. Now you can reference drawable like this 

    <item
    android:drawable="@color/off_white"/>

<item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/yoursvg"/>
</item>

After this you should be able to see you image on screen. Please test and accept it as answer if it helps you.

Upvotes: -5

Related Questions