Android splash screen stretches a logo on the full screen

user_6415634 0
Viewed 9455

I have a simple splash screen with a white background and the logo on the center of the screen. In a modern version of the Android, its work well but in 'old' versions of Android(for example API 22) my a logo is stretched on the full screen. How to make the logo splash screen look normal on all the version of Android (before API 19)? p.s. I`m not the Android developer.

drawable/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/white" />

  <item
    android:width="150dp"
    android:height="50dp"
    android:drawable="@mipmap/my_logo"
    android:gravity="center" />

</layer-list>

values/styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@color/white</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/white</item>
    </style>

</resources>
react-native android-layout android
5 Answers

Instead of using a simple <item/> tag, use a <bitmap/> tag inside of an <item>.

From the Layer List drawable documentation:

All drawable items are scaled to fit the size of the containing View, by default. [...] To avoid scaling items in the list, use a <bitmap> element inside the <item> element to specify the drawable and define the gravity to something that does not scale, such as "center".

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

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

    <item>
        <bitmap
            android:src="@mipmap/my_logo"
            android:gravity="center"/>
    </item>

</layer-list>
user_82989090

This is because the attributes android:width and android:height were introduced in API level 23. The only solution I can think of if you want to show the same image with a relative size according to the screen size is to provide alternative bitmap resources.

Here is a link to the Android Developer Guide which explains this a bit further.

user_102850900

First thing doesn't use a png use a vector drawable. This way you don't need a separate image for different screen size. Use this to convert image http://a-student.github.io/SvgToVectorDrawableConverter.Web/

and now in your image view in XML file set your scale type to Center Crop or Fit XY android:scaleType="centerCrop" or use android:scaleType="fitxy"

user_49576970

The issue is not related to Android version. it should be related to the screen size of Devices.

To declare different layouts and bitmaps you'd like to use for the different screens, you must place these alternative resources in separate directories/folders.

This means that if you generate a 200x200 image for xhdpi devices, you should generate the same resource in 150x150 for hdpi, 100x100 for mdpi, and 75x75 for ldpi devices.

In a word, Android apps should provide 6 image sizes: ldpi (0.75x), mdpi (1.0x), hdpi (1.5x), xhdpi (2.0x), xxhdpi (3.0x), and xxxhdpi (4.0x).

user_97724870

What I usually do is I make sure my layout's root node is a RelativeLayout, and the first child is an ImageView with centerCrop as the scaleType.

Here's an example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:scaleType="centerCrop"
        android:background="@drawable/img_background"/>

    ...
user_23571470
Related