New Splash screen is shown cut in a circle 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);
    ...

Opening

Answer 1

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.

Buckeye

This is awesome. That way people can use their already shipped items and safe storage. This should be in the Android docs – Gamages

When I do that the inset is applied to my whole application. Why? – Salvia

How can we make it full screen @laatlto – Puduns

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. – Correlation

pls can anyone shares the complete code. – Crowder

For me, very oddly, I can use an inset of 0dp, and my splash screen icon displays correctly. I have a correctly sized 288dp icon, but without an inset like this with 0dp, it gets cutoff anyway... Weird. Thanks! – Yamashita

Answer 2

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

Monadelphous

Answer 3

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!

Dzoba

That's what I'm using for newer projects, the inset was a good workaround but wasn't solving the problem in itself. – Opening

I have tried so, also tried the inset method but nothing fixed the issue, it's always bigger than the specified size!, any help? – Dorthadorthea

Answer 4

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:

Behn

Answer 5

For those having vector path errors after converting to xml, I suggest using following settings to save SVG file.

• Profile: SVG 1.1
• Type: Convert to outline
• Image Location: Embed

Advanced Options:

• CSS Properties: Presentation Attributes
• Decimal Places: 1
• Encoding: UTF-8
• Responsive: Unchecked (optional)
• Minify: Checked

These settings are available in Adobe Illustrator for saving as SVG file but not inside exporting.

Another trick for maintaining horizontal logo with fixed size after saving as SVG paths is to draw rectangle with size 288, color transparent, align center otherwise SVG will only have logo paths and its hard to resize later in xml, and draw a circle with size 192, color transparent, align center to see if your logo fits inside circle.

Tumult

Answer 6

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)

Teapot

Answer 7

I have faced the same issue. Instead, I had a square-shaped logo but it was displayed as a covered image. During research and trying different solutions this last one worked for me. From this site: https://developer.android.com/develop/ui/views/launch/splash-screen

I have got to know about the dimensions required for proper display. According to the dp units, I have created the 240x240px dimension square with the logo adjusted to 160x160px in the centre of the canvas. After adding the image set in the Android studio and linking it with the style. It works fine as it should be.

You can arrange the pixels according to the article if your logo is transparent or not. The main thing here is the adjustment of the logo in the centre with margins.

I hope this helps you.

Bacteriology

Answer 8

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" />

Ingrained

Answer 9

You should trim your icon when to add your icon using "new image asset". It will show reduced icon size. Then drag the slider to get the required size. Surely it will work.

Thecla

Answer 10

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

Luganda

I'm using a physical device actually, i have no splash_screen.xml as per docs it says to use directly a vector image – Opening

Ok.....you can also try importing your image as PNG if the vector image keeps showing up incorrectly. – Luganda