React-native-splash-screen: [ Help ] Android = How create landscape splash image that does not get stretched ?

Created on 31 Jan 2018 · 10Comments · Source: crazycodeboy/react-native-splash-screen

When launching in landscape mode, imaged is stretched to fill.

What are solutions to fix or prevent?

Thank you for a great lib!

I took your two Android example app images and edited. Very easy!

Thank you for sharing your work!

Source

esutton

👍2

Most helpful comment

Here how I've managed to show simple small logo image on a white screen:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/lin_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="105dp"
        android:layout_marginRight="105dp"
        android:orientation="vertical" >
            <ImageView
                android:src="@drawable/launch_screen"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
            >
            </ImageView>
    </LinearLayout>
</RelativeLayout>

terrysahaidak on 24 Sep 2018

👍5

All 10 comments

@esutton did you figure this out?

weisjohn on 7 Feb 2018

@esutton check this out: https://github.com/crazycodeboy/react-native-splash-screen/pull/141

weisjohn on 7 Feb 2018

did you figure this out?

@weisjohn No. I tried opening my react native project in Android Studio in order to experiment and understand layouts.

I copied \layout\launch_screen.xml and to experiment with layouts using buttons for placeholders for images.

My goal:
1) black background
2) one image to stay centered vertically and horizontally in center.
3) a green title bar at the top
4) another image centered vertically and horizontally in title bar.

Anyway, I do not understand Android Studio layouts. I need to find some tutorials to watch because it was not intuitive to me.

esutton on 7 Feb 2018

Were you able to fix this ?

kunalqss on 4 Apr 2018

@kunalqss I have not fixed this.

esutton on 4 Apr 2018

In my case, the image is stretched for about a second and then gets back to its original size (in landscape mode). I have removed the explicit width and height given to the image but still unable resolve this issue.

kunalqss on 5 Apr 2018

👍2

I am having the same issue as @kunalqss, do we know of any fix for this yet?

thedanielforum on 6 Sep 2018

I have same issue

I'm fixed it by:

Create new folder: android/src/res/layout-land
Add file launch_screen.xml and content file as file /laypout/launch_screen.xml, then change android:background="@drawable/launch_screen_land"
Create images launch_screen_land.png in drawable-xxx folders. Image's size is fit landscape screen size

hpthang88 on 11 Sep 2018

Here how I've managed to show simple small logo image on a white screen:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/lin_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="105dp"
        android:layout_marginRight="105dp"
        android:orientation="vertical" >
            <ImageView
                android:src="@drawable/launch_screen"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
            >
            </ImageView>
    </LinearLayout>
</RelativeLayout>

terrysahaidak on 24 Sep 2018

👍5

Thank you so much Terry this worked really well for me.