I installed react-native-splash-screen and correctly setup everything but my logo image is shown streched and offscreen (appears too big).
https://i.imgur.com/oe6taN4.jpg
I used App Icon Generator website and placed the generated images into each drawable folder with the correct names:
https://www.appicon.co/
My launch_screen.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/launch_screen"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
/>
</RelativeLayout>
Use centerInside for scaleType.
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
See all options for scaling.
Related
I’ve got some images composed in Adobe Photoshop that contain a background layer and an object in a foreground layer. These images I would like to use in webp format in a website project:
The image should be displayed with transparency — i.e. the background of the image should be transparent, showing the underlying color of the html element — but when hovered over the image, the transparency should be disabled and therefore the background layer of the image is shown.
How can this reliably be done with JavaScript or any other web technology?
Note: I would like to avoid uploading two image versions
I am having issues with setting up Statusbar in Android.
I want Splashscreen to open with the Status bar as white color or full screen but currently it shows with black color background.
Second thing for other screens, I have background images so I want to cover those background images to full screen. But Statusbar is showing with gray color and I am not able to make the image full screen.
Here I have given my app theme in styles -
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
<item name="android:statusBarColor">#044862</item>
</style>
</resources>
Any helps much appreciated so that I can achieve both things.
I read about retina ready sites and I get some information like In retina ready sites images, slider,font and other elements are more sharper, more density and high resolution...
My Question is:
How I convert Normal Site to Retina Ready with Images, Fonts and other things...
<img src="image1#2x.jpg" width="660" height="440"/>
Original width: 660px and height: 440
And I already import retina.js
Download RetinaJS from Here
Thanks in Advance
If you want to use high density images, you have to set another attribute : srcset.
In this way, src attribute is usefull for old browsers that don't support srcset attribute. srcset attribute is used by modern browsers that will use it in order to load high density "#2x" image if the screen is ready for it. If the screen is not retina, the browser will automaticly load the low density image "#1x".
<img srcset="image#1x.jpg 1x, image#2x.jpg 2x" src="image#1x.jpg" alt>
You can look at this article from MDN if you need more information about it. There are more attributes that can help you like size.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
I wanted to prioritize loading of the logo of our website. I've found preload or prefetching images but this just loads the image after css has been loaded and evaluated. How could I force the image to load in parallel with the css assets so that on first page paint, the image immediately shows?
Two options come to mind:
Use an SVG version of your logo right in your html.
Use a Base64 encoded version of your logo if the size is small enough.
I have created a simple 1024x1024 icon.png under resources/ :
Then i run ionic resources and all the icons i need are generated under resources/android/icon/
My config.xml is changed to this:
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
</platform>
<icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
Now if i look at the app icon once installed it looks like the figure in the middle is bigger and ratio is not respected:
As you can see, the little red ball became a huge ball, this is something i don't understand, can anybody clarify me this?
(Can't place comments yet, so I'll do it by answering)
By the looks of it you're using an iconpack of some sort. (Since all the icons have the same shaped background with the original icon on top). My guess is that the icon pack eliminates most of the transparent space surrounding your icon (and all others), to fit the same icon design.
You can easily find out if this is indeed the case by either:
disabling the iconpack (the red circle should be normal sized now, with the surrounding whitespace)
making an icon with a border around the sides of the icon, so it probably won't cut off the whitespace.
If it is indeed the iconpack that's eliminating the surrounding whitespace, you could try to have a very light (99% transparent) layer as a background. This will prevent the iconpack from eliminating whitespace, so it won't scale the circle.
I wouldn't really recommend this though, since most people won't use an icon pack and then the icon could look a little strange on other devices.
I think it is because of the ionic resources command. It will read the image and auto crop the image depend on each screen size.
Ionic Resource Site said that no rounded corners maybe It's for non-transparent pixels outside the main picture, or it will resize/crop it to fit:
The icon image’s minimum dimensions should be 192x192 px, and should have no rounded corners.
You can try this:
Navigate to the project\resources\android\icon:
Check if every icon in was generated wrong ratio.
If it is bigger than your's original image, open up any picture editor like Photoshop or Paint and resize it manually by hand until fit your expected ratio (because you should only need the ionic resources generate the pre-sized picture).
Save and do it again for the others.
Rebuild the project.
UPDATE: Put 4 tiny pixel of color for 4 corners and try again. I think the device should know where is the correct border for the icon instead of resizing it.