Android splash screen vector aspect ratio

Question

How can I keep aspect ratio of a vector drawable (@drawable/ic_splash_screen) and fit horizontally ?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/white"
        android:gravity="fill" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/logo" />
    </item>


    <item
        android:drawable="@drawable/ic_splash_screen"
        android:gravity="bottom|fill_horizontal" />
</layer-list>

In my code , the SVG drawable vector fill_horizontal at the bottom but keep it's original height

I want to use it in splash screen and want keep aspect ratio

I had to deal with something similar and finally managed to make my splashscreen work on all APIs including 21 and 22. Ill post a summed up answer bellow but here is the link https://stackoverflow.com/questions/39172899/splashscreen-with-vector-stretched-full-screen/60558138#60558138 — quealegriamasalegre, Mar 08 '20 at 04:08

score 2 · Answer 1 · answered Mar 08 '20 at 04:43

As @DeepThought I also think that your best bet is to go with gravity=center as it is the only way I know to preserve aspect ratio. however, if you wrap your drawable in a bitmap (as he suggests) it will not work on APIs different from 21,22 and 23. All the while on these same APIs images will always look stretched if you do not wrap them into a bitmap. which is why I would recommend you create 2 versions of your drawable layer-list and put one into drawable-v21 and the other in drawable-v24.

for v24 you can try:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@android:color/white"
    android:gravity="fill" />
<item

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

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

</layer-list>

for drawable-v21 you use

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@android:color/white"
    android:gravity="fill" />
<item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/logo" />
</item>
<item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/splash" />
</item>

</layer-list>

as for making the drawable fill the view horizontally without destroying aspect ratio I really dont know how to achieve this in xml. the only thing I can think of is oversizing your your splash_screen.xml file by setting the android:height and android:width parameters and facing the fact that on some slimmer devices a larger portion of the edges to the left and right of your SplashScreen will be cutt off.

....but if you are really obsessed about getting splash_screen.xml to fit all the width of the screen precisely there is always the total overkill solution. for that I recommend you read the following resource. it would imply you creating a bunch of alternative drawable resources depending on screen dp dimensions i.e. drawable-sw360dp, drawable-sw720dp and so on and then put in them different versions of your splash_screen.xml that have android:height and android:width taylored to each screen.

score 0 · Answer 2 · answered Mar 06 '20 at 03:16

Can you try with this change :

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/white"
        android:gravity="fill" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/logo" />
    </item>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash" />
    </item>

    </layer-list>

score -1 · Answer 3 · answered Mar 06 '20 at 03:22

Try this

First imageView is your background, this will stretch to all side. Having adjustViewBounds will maintain it's height and won't cause stretch image.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_splash_screen"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@mipmap/logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

For a splash screen, you don't want layouts - the OP presumably wants to stick to `Drawable`s. — Ryan M, Mar 06 '20 at 04:06

Android splash screen vector aspect ratio

3 Answers3