How to Create an Animated Launch/Sync Image in AppSheet?

[Syamsudin]

To create an animated Launch Image in AppSheet you can use SVG (Scalable Vector Graphics) code.

​Hi everyone! Today I’m sharing an animated launch image template for AppSheet generated via Gemini AI (only for mobile phones /HP , Size : 1080 X 1920 pixel).

​In this template, you can directly insert your own logo, provided it is in SVG format. Use the dimensions width=“125” and height=“125” with the coordinates x=“0” y=“0”.

​Important: The SVG code must be written using quotes (“) instead of double double quotes to ensure compatibility. For color variations or further customization, you can copy the SVG code and ask Gemini to modify it for faster, high-quality results.

Step-by-Step Instructions:

​Prepare your Logo (or just leave it blank if you don’t want to use the logo) : Use your logo in SVG format. Ensure the attributes are set to width=“125”, height=“125”, x=“0”, and y=“0”. Wrap the code in quotes. Example

<path d="M23.55 15.25c0.84,-2.14 2.99,-5.36 4.2,-7.49 1.37,-2.41 3.01,-5.5 4.47,-7.76l-28.95 0.1c-1.46,0.05 -2.69,0.75 -3.11,2.01 -0.54,1.64 0.38,2.9 1.02,4.03l3.8 6.59c0.76,1.27 1.08,2.12 2.83,2.36 2.79,0.38 15.66,0.16 15.59,0.17l0.15 -0.01z" fill="#2195F2"/>
   <path d="M40.78 15.1l-17.23 0.15 -0.15 0.01c-1.21,2.25 -7.46,12.57 -7.83,13.77 -0.19,0.58 -0.13,1.57 0.43,2.59l4.65 8.39c0.63,1.05 1.6,2.15 3.35,1.94 2.34,-0.67 2.5,-1.88 4.85,-5.98l11.93 -20.87z" fill="#2195F2"/>
   <path  d="M23.55 15.25l17.23 -0.15 4.35 -7.37c0.57,-0.99 1.95,-3.66 2,-3.91 0.36,-2.01 -0.84,-3.47 -2.57,-3.56l-12.34 -0.26c-1.46,2.26 -3.1,5.35 -4.47,7.76 -1.21,2.13 -3.36,5.35 -4.2,7.49z" fill="#1372BF"/>

1. Customize Text: Edit the text within the SVG code to match your app’s name or branding.

2. ​Copy the Code: Copy the final animated SVG code.( From SALIN KODE SVG LAUNCH)

3. ​Apply to AppSheet:

4. • ​Go to Settings (or Info in older editors).

   • ​Navigate to Theme & Brand (or Dashboard > Logo Edit).

   • ​Find the Launch Image section.

   • ​Paste your SVG code directly into the input field.

5. Want color variations…click the ask Gemini button, a prompt and code are provided, just copy them to get color variations.

​I hope this template is useful for your projects!

Mobile App Link :: Launch image template (1080 x 1920)

AppSheet : mobile apps from spreadsheets : Create App Shortcut

insert logo as example

adjust the position and size of the logo

click on the image to see a larger image view

Want color variations…click the ask Gemini button, a prompt and code are provided, just copy them to get color variations.

copy the prompt for Gemini AI then generate

Thema & brand >> Launch image

[Steve]

You really are working some magic! Keep it up!

[Syamsudin]

Thank you @Steve

[Syamsudin]

Hello everyone, are there any difficulties in using the launch image animation template? If you want to create color variations, click the ask gemini button.

[PedroCouto]

Hello there!

Let me ask a simple and newbie question, why is it only for mobile? As for example, one of my apps are used mostly in desktop, so I could swap the width and height to properly showcase it and “forget” about mobile?

[Syamsudin]

Hi @PedroCouto

I apologize in advance for not having the time to create a template for the desktop display. For some reason, I can only create a mobile app version, but you can use the app on the desktop. You can copy the code and then ask Gemini AI to create color and size variations to suit the desktop display while maintaining the formula structure. Note that the code does not have quotation marks at the beginning and end. Because the launch image URL is without quotation marks.

If you want to share the mobile version of the app you created, select Security >> then select manage user >> select share link >> select install a mobile

for other templates

1. Profile Template For Appsheet

2. Does AppSheet need a Button Maker?

3. Progress Bar: "Before & After"

4. ANIMATED HTML IN APPSHEET: A Limitless Solution for Modern UI