How to add a custom splash screen in MAUI? - android

I have a basic MAUI project and I want to set an SVG file as the splash screen.
I have tried to modify the csproj file using the code below:
As you can see the photo is cropped in a circle
How can I make the splash screen display the entire photo?

You cannot (at least not without going a long way using a separate splash screen activity).
That's a limitation of Android: https://developer.android.com/develop/ui/views/launch/splash-screen
The picture also needs to fit into the frame and should be squared. You can set the base size for that in the <MauiSplashSceen> build action in your .csproj file.
You may also be interested in this: Custom NET MAUI Splash screen
There currently also is a bug in MAUI's resizetizer which requires giving the SVG file an entirely new name each time you want to change it: https://stackoverflow.com/a/74336491/4308455
I've written a blog post about the Splash Screen in MAUI, which might also be of interest: https://ewerspej.hashnode.dev/lets-customize-the-splash-screen-of-a-maui-app

For the device which android version is lower than 12.0, you can use the following code to make the image full full the splash screen.
Delete the old splash image in the Resources/Splash folder.
Put your image in it and set it's build action as MauiSplashScreen
Create a xml file in the Platforms\Android\Resources\drawable\maui_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item>
<bitmap
android:src="#drawable/splash" //the splash is your image's name
android:dither="true"
android:gravity="fill"/>
</item>
</layer-list>
And then, your image will show in the full splash screen.
For the device which android version is lower than(or =) 12.0, the android system changed the api about the splash screen. The resource code about is the FrameLayout contains a ImageView and we can't set the ImageView layout_width and layout_height. For more information, you can check the answer in this link.

Related

How to change size image of splash by using migrate?

I I try to make splash screen by using migrate. But I do not change resize image that I used. Here is my picture.
What I do:
implementation 'androidx.core:core-splashscreen:1.0.0-beta02'
I added this implementation to gradle.
I made theme part like
this
I put this theme in manifest.
Finally, I added this in main activity
I hope, someone can solve this problem.
I used a layer-list to resize my app logo:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="288dp"
android:height="288dp"
android:drawable="#color/splash_screen_background" />
<item
android:drawable="#drawable/app_logo"
android:gravity="center" />
</layer-list>
The library specs can be found here
That image seems too small and possibly should be round with transparent background. In the alpha version, the scaling still worked differently and when upgrading from there, the image didn't fit anymore. Would need to look it up, because one can find the perfectly correct (as expected by the library) dimensions of the splash screen image in the library resources. My code looks like this:
super.onCreate(savedInstanceState);
if (savedInstanceState == null) {
SplashScreen.installSplashScreen(this);
}
One would commonly use Photoshop or GIMP to change the size of the image (it's predefined). Using a vector drawable XML (similar to SVG) instead of PNG or WEBP scales nicely. And please don't post screenshots of code or errors; to show visual problems that's fine.

Android Studio Image Asset Launcher Icon Background Color

I have a .png logo for my app which doesn't have a background, when I add it to android studio as an Image Asset I am forced to have a background. The hex field doesn't accept 8 digit color codes, 6 digits only. Is there anyway to keep the background invisible?
To make background transparent, set shape as None.
See the image below:
EDIT:
For Android Studio 3.0,
you can set it from Legacy Tab
I'm using Android Studio 3.0.1 and if the above answer doesn't work for you, try to change the icon type into Legacy and select Shape to None, the default one is Adaptive and Legacy.
Note: Some device has installed a launcher with automatically adding white background in icon, that's normal.
You have two ways:
1) In Background Layer > Scaling, reduce the Resize to 1
and then in Legacy > Legacy Icon set Shape as None
2) in Background Layer > Scaling > Source Asset, you can set an image as a 1x1 pixel (or any size) transparent.png image (you've already created).
and then in Legacy > Legacy Icon set Shape as None
the above approach didn't work for me on Android Studio 3.0. It still shows the background. I just made an empty background file
<?xml version="1.0" encoding="utf-8"?>
<vector
android:height="108dp"
android:width="108dp"
android:viewportHeight="108"
android:viewportWidth="108"
xmlns:android="http://schemas.android.com/apk/res/android">
</vector>
This worked except the full bleed layers
This is just another workaround.
For the 'Foreground Layer', select 'Asset type' as text and delete the default text in the text field.
For the 'Background Layer', select 'Asset type' as image and now choose the path of the image you want as an icon.
And you are good to go.
Android Studio 3.5.3
It works with this configuration.
I Just put my view background (color code) as ClipArt or Image background, and it looks like transparent or no background where both have the same color as background.
These are the steps I took to make an image transparent:
1- I used an online website which makes the image transparent, there are a lot of them. For me, I use this https://www241.lunapic.com/editor/?action=transparent and sometimes this http://www.online-image-editor.com/help/transparency
2- In Android Studio (I'm using version 3.1.3), open Image Asset from app > res (right click) > New > Image Asset
3- In the Path, choose the location of the transparent image which you downloaded from the online website, and make the other options as shown, then Next, then Finish. The five different sizes of image mdpi(48×48), hdpi(72×72), xhdpi(96×96), xxhdpi(144×144), and xxxhdpi(192×192) will be created in the res/mipmap-density folders.
4- If you need sizes (dimensions) different from above, you can use this website http://nsimage.brosteins.com/ to upload your PNG image of biggest size that will be used in xxxhdpi. After uploading, you can download a zip file containing the five different sizes of image in the res/drawable-density folders.
First, create a launcher icon (Adaptive and Legacy) from Image Asset:
Select an image for background layer and resize it to 0% or 1% and
In legacy tab set shape to none.
Then, delete folder res/mipmap/ic_laucher_round in the project window and Open AndroidManifest.xml and remove attribute android:roundIcon="#mipmap/ic_launcher_round" from the application element.
In the end, delete ic_launcher.xml from mipmap-anydpi-v26.
Notice that: Some devices like Nexus 5X (Android 8.1) adding a white background automatically and can't do anything.
With "Asset Type" set to "Image", try setting the same image for the foreground and background layers, keeping the same "Resize" percentage.
I just added the icon as a normal icon: New -> Vector Asset
and then change the app icon in the Manifest file.
For Foreground Layer choose "Text" and then delete the content text
Finaly choose the path of the image you want as an icon.
enter image description here
Using android 3.0.1
I noticed this weird behavior(solution),
First: in background layer in the source_asset change the asset_type from image to color and than change it back to image.
second: enable trim in scaling and then resize it to a small percentage and it will work perfectly.
PS: If u didn't do the first step the scaling wont take affect.
and if anyone have an explanation for this please provide.
steps

Border line appear in drawable in Android

Hello I am trying to get Nine patch drawable from this tool Android Asset Studio, it generated the drawables of different density and that drawable I am setting as background of the button but drawables it generated has border line around images in four side that appear also when I am trying to run application in device.
Why it is so and can you please tell how this can avoided ?
<Button
android:id="#+id/submitButton"
android:layout_width="match_parent"
android:contentDescription="#null"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/sign_up_views_vertical_top_margin"
android:background="#drawable/sign_up_via_email_selector" />
sign_up_via_email_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/sign_up_submit" />
</selector>
Thanks in advance
Check to see if the image has the correct name.
It should be sign_up_submit.9.png, the lines that appear are actually the areas that the 9patch defines for stretch.
If the image has the correct name it is a chance that the online utility application you used messed the resource. Try to use the 9patch generator from the android sdk(look for [your_sdk_path]\tools\draw9patch.bat), and try to generate one yourself and see if the problem is still there.
can you please check how you placed your 9 patch image in drawable folder,9 patch image should be named sign_up_submit.9.png

Android button images gets blurry?

I have a few buttons in my app where I have applied circular PNG images on them but the edges gets pixelated. I don't know how to nine patch a circular image. If anybody knows a different way of doing it?
you can use following code to have circle image:
add this on drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#2085c226"/>
<stroke android:width="2sp" android:color="#85c226" />
</shape>
then in your code
android:background="#drawable/name_of_xmlfile"
One reason why android may try to scale your images is if you don't have them ready for your screen density. Make sure that you have your png image in res/drawable-xxhdpi, res/drawable-xhdpi, res/drawable-mdpi - all screen densities you are planning to support.
Note that xxhdpi is not mentioned in android documentation and the folder is not created by default but you need it if you are planning to support xxhdpi screens.
You didn't provide enough information e.g screen shot? code? but any ways you should use nine patch images if you are not providing separate image in each drawable directory. For further detail Go to This link. Hope this will help you.

How to add a PNG image as background in Android with no alteration (banding)?

I'm trying to add a background that includes a gradient (I do want to use an image, not an android xml declared gradient effect).
This image is remarkably ruined by Android, it add some crappy banding whatever I try the result is the same (two capture of approximately the same region the distorted/normal images) :
My image is used as a layout background inside my layout XML :
android:background="#drawable/background_gradient_dithered"
I've tried to used an intermediate drawable to force dither whose xml is :
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background_gradient" android:dither="true" android:antialias="true" android:filter="true"/>
I've tried to have the following code in my onCreate() :
getWindow().setFormat(PixelFormat.RGBA_8888);
Both tries changed nothing.
Thanks
The correct solution was .... I bet you've guess it : restarting Eclipse. I've learned it, every problem on Android might be a "restart Eclipse problem".
After some test I can add that enabling dethering is not useful when Format is set to PixelFormat.RGBA_8888
Readers should give a look to the answer given by #TenFour04, this approach can avoid to make drawable just to enable dithering.
window.addFlags(WindowManager.LayoutParams.FLAG_DITHER);
EDIT :
I've found out that even with these tricks the problem can persist. You can try to modifiy your PNG to have an alpha layer in it (change a pixel to a transparency of 99% for example), this would force android compiler to not play with it.
Try adding this in onCreate(). Older versions of Android default to no dithering.
Window window = getWindow();
window.setFormat(PixelFormat.RGBA_8888);
window.addFlags(WindowManager.LayoutParams.FLAG_DITHER);
I worked it out, just change the size of the .png files. I put them in the mdpi and resized it with Irfanview <-open source image editor to 1024x7xx <- dont remember, this comes too handy
and I set it for 300 dpi. So they download it on a tablet and stuff, hope this helps :)

Categories

Resources