What is the best way to insert this image (with the correct dimension) into my Android project?

Question

I am absolutly new in Android development and I have some doubt about the correct way to insert an header image into my first app.

So I have the following situation: I have to insert an image as header (an immage and under it there is the content, the classic web site header concept), so I have done something like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="0dp">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:scaleType="fitStart"
        android:layout_height="250dp"
        android:background="@drawable/carbonara" />
        <!--
        android:src="@drawable/carbonara"/>
        android:background="@drawable/carbonara" />
        -->


    <TextView android:id="@android:id/text1"
        style="@style/pastaTitleTextStyle" />


</LinearLayout>

As you can see I am using this setting to set the header image:

android:background="@drawable/carbonara"

So I am using the android:background property to set the carbonara.jpg image as background of the LinearLayout header that have to horizontally fill the screen (because I have specified: android:layout_width="fill_parent").

Ok, so using the android:background settings it seems works fine on all the screen (this is what I say changing the device in the Android Studio activity preview) because I am setting the image as background so I think that it is "stretched" to fill the space.

But I don't know if use the android:background is the right soution. Someone say to me that it is better use:

android:src="@drawable/carbonara"

instead the android:background setting. Is it true? Why if it is an header that have to be fill? (in HTML\CSS it is pretty common use the background-image property to do this kind of stuff in layout...)

So I tryied to change doing:

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:scaleType="fitStart"
    android:layout_height="250dp"
    android:src="@drawable/carbonara" />

The problem is that now the image don't fill the entire space for some screen size (or maybe also pixel density?)

For example this is the preview setting Nexus 5 as device:

As you can see on the right there is a white space. Why? Is it the image not enought large for this screen or what?

Using android:background="@drawable/carbonara" instead android:src="@drawable/carbonara" I have not this problem and the image it is showed in a pretty decent way (maybe a litle horizontally stretched).

Is it really so horrible use android:background instead android:src for these situations?

So I really don't know what is the correct solution to handle this kind of problem: if the use of android:background is not good what have I to do? Have I to create different version with different size of my image and put it in the specific path of the /res/ folder? Or what? I am a bit 'confused.

Answer 1

Is it really so horrible use android:background instead android:src for these situations?

Its not about background and rsc attributes. Android runs on a variety of devices that offer different screen sizes and densities (dpi).You can't use same image for Nexus 5 and Nexus S.

Solution is: You will have to make multiple image based on screen size and dpi

A set of six generalized densities:

-ldpi (low) ~120dpi
-mdpi (medium) ~160dpi
-hdpi (high) ~240dpi Nexus S
-xhdpi (extra-high) ~320dpi Moto G
-xxhdpi (extra-extra-high) ~480dpi Nexus 5
-xxxhdpi (extra-extra-extra-high) ~640dpi Galaxy S6 and S7

Read more Supporting Multiple Screens