android xml drawable image on full screen background

Question

I need an xml drawable (for a cordova splash screen) in android. I Want to display a transparent logo centered on the screen (without stretching), while the rest of the screen has a background color set.

What I tried first, was to add only the image in the xml file:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    android:src="@drawable/splashscreen"
    android:gravity="center_horizontal|center_vertical" />

This showed the logo centered on the screen, but (obviously) has no background color.

So I tried different solutions to add a background color to that xml. For example:

<?xml version="1.0" encoding="utf-8"?>    
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item>
        <bitmap
            android:src="@drawable/splashscreen"
            android:gravity="center_horizontal|center_vertical" />
    </item>
</layer-list>

Now the image has a background color - but it is not full screen any more. It adjusts to the image size and gets stretched when showing as full screen.

So, how can I get a full screen drawable with background color, and a centered image on it?

EDIT: All answers suggest using RelativeLayout - but I think this is not possible within an xml file in "drawable", right? I do not have any layout i can edit - only a drawable which gets referenced by cordova.

Com

Answer 1

I found the solution myself:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <color android:color="#FFFF"></color>
    </item>
    <item>
        <bitmap
            android:src="@drawable/splashscreen"
            android:gravity="center_horizontal|center_vertical"
            />
    </item>
</layer-list>

Android studio shows the layout still wrong - but it works on the device as expected.

To all posters, suggesting adding a layout-xml file: As I stated in the question, I don't have the possibility to do that, since this drawable gets included from Cordova. I don't have control over the used layout around this drawable.

Com

Answer 2

<?xml version="1.0" encoding="UTF-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
        android:src="@drawable/splash" 
        android:gravity="fill_horizontal|fill_vertical" />

Christean

Answer 3

do this way,

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white" >//Set background color

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:adjustViewBounds="true"
            android:src="@drawable/splash_logo" />//set logo 

    </RelativeLayout>

Saunderson

I only have an xml file in "drawable" folder i can edit - when I try to add a RelativeLayout in this files, android studio says "Element RelativeLayout must be declared". Are you sure it is possible to use RelativeLayout within drawable xml files? – Com

this is xml file put this into your layout folder and set background as your drawble color xml – Saunderson

Answer 4

You can use following code for your need:

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

    <item android:drawable="@color/bg_color"/>
    <item>
        <bitmap
            android:gravity="center|bottom|clip_vertical"
            android:src="@drawable/your_image" />
    </item>

</layer-list>

Billingsley

I only have an xml file in "drawable" folder i can edit - when I try to add a RelativeLayout in this files, android studio says "Element RelativeLayout must be declared". Are you sure it is possible to use RelativeLayout within drawable xml files? – Com

Its code for layout xml file not for drawable xml file – Billingsley

Well but question says "xml drawable" – Com

still getting issue then tell me – Billingsley

This could work, it's close to the solution I found. But I didn't test it. Thanks anyway! – Com

Answer 5

Old subject but solution may be useful to somebody. Accepted answer does not work for an image that is bigger than the screen. Setting top/bottom/left/right attributes to the first item will set the background color fullscreen, and specifying bitmap ratio in the second item using width and height with bitmap in fill gravity will display the image correctly. Here is a working sample:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item
        android:top="0dp"
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:drawable="@color/background_color" >
    </item>

    <item
        android:width="240dp"
        android:height="75dp"
        android:gravity="center" >
            <bitmap
                android:src="@drawable/logo"
                android:gravity="fill"
                />
    </item>

</layer-list>

Isochor

Answer 6

No need to use other relative layout for background color. You can do it using single ImageView like:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView"
    android:src="@drawable/noise"
    android:scaleType="centerInside"
    android:background="@android:color/black" />

Sealy