Flutter Quick Tip: Adding an Image to Your Launch Screen (Android)
If you’re getting hung up on either trying to figure out how to set up your launch screen on Android by following the Flutter docs or having issues with the image scaling, try this quick guide on getting it to work as you intend.
I created a new Flutter project and also a PNG image I will use on the launch screen:
This image is 400x400, but use whatever size you feel is appropriate. Keep in mind that we will need to put five copies of this image in our project, so I recommend checking your image size so it’s not unnecessarily large. Also, name it something telling, such as “launch_logo” or something to that effect. This image has a transparent background, by the way.
Step 1: Add your Image to your Project
Find your image and put a copy of it in the following directories in your Flutter project (all are located at android/app/src/main/res):
- mipmap-hdpi
- mipmap-mdpi
- mipmap-xhdpi
- mipmap-xxhdpi
- mipmap-xxxhdpi
The “ic_launcher.png” file you see in each directory is the default Flutter icon image that is set there on project creation.
When you add copies to each of these directories, Android will choose and display the image from the DPI directory that matches the screen density (or closest to it) of the device running your application. If you are having scaling issues, this should fix that problem.
Step 2: Reference your Image in your launch_background.xml File
Go to android/app/src/main/res/drawable/launch_background.xml AND android/app/src/main/res/drawable-v21/launch_background.xml
Your files, if unaltered, should look like this:
Uncomment the <item> tag and replace the “launch_image” text with the name of your image file. In my case, that is “launch_logo” so my <item> tag (and entire launch_background.xml file) looks like this:
Be sure you do not include the file extension in your android:src String (i.e., launch_logo.png will be entered as just launch_logo).
Save the files.
If you are wondering where the launch_background.xml file is called from, it’s from within your main AndroidManifest.xml:
What we are doing in this article is actually creating a launch screen that matches the splash screen, so it seems like it’s just one image the whole time as the app is loading. You can change that behavior if you want by making the AndroidManifest.xml splash screen different than the launch background. You can see the Flutter guide on how to do that.
Side note: There are other ways you can customize your launch screen image, such as changing the android:gravity you see above for alignment, tiling, anti-aliasing, and more. You can find more information about this on the Drawable Resources page.
Step 3 (Optional): Change the Background Color of the Launch Screen
Note: This is for demonstration purposes, I will be keeping the default white color for my launch screen.
In your launch_background.xml file, you can change the launch screen background color by altering the android:drawable item to any color you choose. In my case, I have a color called “darkCanvas” that I will change it to.
Head to android/app/src/main/res/values/colors.xml
If you do not have a colors.xml file, just right-click on the “values” directory and click “New File” (or your IDE’s equivalent) and name it “colors.xml” (without the quotes):
In your colors.xml file, add the following:
<?xml version="1.0" encoding="utf-8"?><resources> <color name="darkCanvas">#303030</color></resources>
Name your color whatever you want and change your hex RRGGBB code (the numbers with the # sign) to your color’s code. Make sure you save the file.
Head back to your launch_background.xml file and change your android:drawable value to “@color/darkCanvas” or whatever you named your color in the colors.xml file.
Your launch_background.xml file should now look similar to this:
Save the file.
You can find more information and ways to customize android:drawable in the ColorDrawable documentation.
Side note: If you’re like me and aren’t naturally gifted with knowing what colors match with what, I recommend using the website Coolors.co to help with picking a palette. I have no affiliation with Coolors.co — I just recommend it for picking colors.
Step 4: Run It
Now you’re done. Save all files, stop your app if it’s running, and restart it. You should now be greeted with your custom image on your launch screen when it appears.
If your image doesn’t appear, stop your app again, run flutter clean and try again.
Here are the file(s) we modified in case you need them for reference:
launch_background.xml:
colors.xml:
