New Splash screen is shown cut in a cyrcle shape

Question

I'm trying to replace my old activity based splash screen in my Android app with the new Splashscreens API

So i've created a svg of my app logo, create the theme, and set in my MainActivity the installSplashScreen but the logo in the Splashscreen looks like this when app is launched:

How could i fix that issue?

Here is what i've done style.xml:

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/colorAccent</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/ic_visual_vector</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

Manifest:

<activity
    android:name=".MainActivity"
    android:theme="@style/Theme.App.Starting"
    android:screenOrientation="portrait"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

MainActivity:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    SplashScreen.installSplashScreen(this);
    setContentView(R.layout.activity_main);
    ...

score 44 · Accepted Answer · answered Nov 09 '21 at 08:44

44

What you can do is to wrap your icon in an inset drawable so that it is drawn inside the circle.

For example, create a drawable/splash_inset.xml resource:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_visual_vector"
    android:insetLeft="72dp"
    android:insetRight="72dp"
    android:insetTop="72dp"
    android:insetBottom="72dp"/>

The actual inset values depend on your image and its aspect ratio, using 72dp here on all edges as an example.

Then apply this drawable as your windowSplashScreenAnimatedIcon.

answered Nov 09 '21 at 08:44

laalto

150,114
66
286
303

2

This is awesome. That way people can use their already shipped items and safe storage. This should be in the Android docs – CaptainCrunch Dec 30 '22 at 21:19
When I do that the inset is applied to my whole application. Why? – user19095510 Mar 15 '23 at 16:35
How can we make it full screen @laatlto – Suchith Apr 05 '23 at 14:38
2

I owe you a beer, this made my icon finally work, Android should list it as a way to make it work, I'm not a graphic designer for crying out loud. – Eman Jul 03 '23 at 18:13

score 8 · Answer 2 · answered Jul 08 '22 at 15:23

In Android 12, if your icon is bigger than the required size, it'll be cut off.

App icon without an icon background: This should be 288×288 dp, and fit within a circle of 192 dp in diameter.

For example, if the full size of an image is 300×300 dp, the icon needs to fit within a circle with a diameter of 200 dp. Everything outside the circle will be invisible (masked).

More info: https://developer.android.com/guide/topics/ui/splash-screen#elements

score 7 · Answer 3 · answered Mar 31 '23 at 14:12

7

I've found the most dependable way is to use the Asset Studio to create an Adaptive Icon, which covers all scenarios for DPIs. The insets approach will just lead you to mapping different insets for different DPIs, this tool does all of that for you and shows you where the image could be clipped.

Then point the splash screen icon to your generated mipmap

<item name="windowSplashScreenAnimatedIcon">@mipmap/ic_splash_screen</item>

Use the resize slider!

answered Mar 31 '23 at 14:12

em_

2,134
2
24
39

1

That's what I'm using for newer projects, the `inset` was a good workaround but wasn't solving the problem in itself. – NiceToMytyuk Mar 31 '23 at 14:19

score 1 · Answer 4 · answered Jun 15 '23 at 07:37

I definitely agree with @ShyHuy on his solution. If anybody still experience this issue eventually it's easier to play around with the icon itself. So the icon should be placed inside the circle but also include boundaries. Therefore your image should be 240dp or 288dp but the application icon itself should be placed inside a circle(or inside the red rect)

score 1 · Answer 5 · answered Aug 22 '23 at 09:44

First you need to create your logo with whatever size you like (min. 300px would be a good idea) inside a perfect circle. Example:

Next, add your logo. I'm just going to add "A" right in the center of the circle. Ensure that your logo doesn't cross the circumference of the circle. Whatever crosses it will be trimmed out.

Now, add your outer borders which needs to be exactly 1.5 times the size of your logo in the first step. The size of my square is 300px so its going to be 450px for me. This is how it looks now.

Now, we can use this image for the splash icon. You can try with this image as well and it will (most probably) work fine.

Finally, import this drawable and use it as your splash icon:

splash icon entry

This is how it looks:

score 0 · Answer 6 · answered Nov 07 '22 at 04:46

My answer could be late but I had same issue. I only added android:gravity="center" to my drawable/splash_logo.xml file and using the splash_logo.xml in styles.xml file.

<layer-list>
<item android:gravity="center"
      android:src="@drawable/splash_logo_icon" />

score -3 · Answer 7 · answered Nov 09 '21 at 08:34

-3

This happens when I run my app on an emulator 30s but when I run it on a physical device it show well. Looking at your code and comment above, is it really required you implement the image from the styles/Res ?... I recommend you create the imageView in your splash_screen.xml

answered Nov 09 '21 at 08:34

Nicholas Anyanwu

1
4

I'm using a physical device actually, i have no splash_screen.xml as per docs it says to use directly a vector image – NiceToMytyuk Nov 09 '21 at 08:35
Ok.....you can also try importing your image as PNG if the vector image keeps showing up incorrectly. – Nicholas Anyanwu Nov 09 '21 at 09:03

New Splash screen is shown cut in a cyrcle shape

7 Answers7

Linked