Image is squeezed on Android

[orangecoloured]

I noticed taht image is a bit squeezed because of the top and bottom bars and found a way to avoid it.

Here's how my launch_screen.xml looks like now:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
>
  <ImageView 
    android:src="@drawable/launch_screen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
  >
  </ImageView>
</FrameLayout>

I am no Android developer and if there's a way to optimize or simplify it, that would be great.

[Jacse]

I don't think this is an issue with react-native-splash-screen but rather just the way Android layouting works.

[orangecoloured]

@Jacse you are right.
But still the image is squeezed if you use the layout from the docs.
So I would at least place a note there.

[pavelpashkovsky]

same too

[celodauane]

This works for me too. Perhaps they could add this in the docs for the library? I'm sure it would help a lot of other devs.

[DylanVann]

I ended up making my image square to make things work.

[Alexorz]

@orangecoloured Cool, thanks!

[mohamedabusrea]

It worked for me but I noticed that it increases the image ratio to force it to fill the screen like "background-size: cover" in CSS and I prefer "background-size: contain" so here is the new code:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:background="@color/splashBackground"
>
  <ImageView 
    android:src="@drawable/launch_screen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerInside"
  >
  </ImageView>
</FrameLayout>

[SnaiNeR]

Guys, I have a more flexible solution for changing the ratio of the picture, which is perfect for me - scaleType="fitCenter", but need set backgroundColor for empty space on scaling

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:background="@color/splashBackground"
>
  <ImageView 
    android:src="@drawable/shell_launch_background_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
  >
  </ImageView>
</FrameLayout>

[orangecoloured]

This has been addressed in this merge.

[orangecoloured]

@coderjoel try to use a raster version of the image, png or jpg. According to your description the component updates itself once it is rendered and has screen dimensions.

[export-mike]

@SnaiNeR @mohamedabusrea what do your @drawable/<name_of_image>.xml look like?

[export-mike]

@orangecoloured I'm using a png. it shows stretched then a split second later it resizes to the correct size.

launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/splashscreen_bg"
  android:orientation="vertical"
>
  <ImageView 
    android:src="@drawable/background_splash"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:scaleType="centerCrop"
    android:layout_gravity="center"
    android:layout_centerHorizontal="true"
  >
  </ImageView>
</FrameLayout>

background_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/splashscreen_bg"/>

    <item
        android:width="50dp"
        android:height="50dp"
        android:drawable="@mipmap/splash_icon"
   />

</layer-list>

[export-mike]

Update:

Ok I'm now doing this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash"
    android:orientation="vertical">
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/splashscreen_bg"/>
    <item>
      <bitmap
        android:gravity="center"
        android:src="@mipmap/splash_icon"
      />
    </item>
    <!-- <item
        android:drawable="@mipmap/splash_icon"
   /> -->

</layer-list>

I have quite a small logo so I set it in the center small with lots of whitespace in each mipmap

mipmap-mdpi = splash_icon.png
mipmap-hdpi = splash_icon@2x.png
mipmap-xhdpi = splash_icon@3x.png
mipmap-xxhdpi = splash_icon@3x.png
mipmap-xxxhdpi = splash_icon@3x.png

[rohail111]

I still have the issue first my splash screen is squeezed then it gets okay after that I get squeeze again...
version 3.2.0

Gradle version 3.4.2