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

Answer 2

When using an ImageView android:src is the right choice because it helps you to get the right fitting for your image. As already said you can use android:scaleType to tell the system how your image should be displayed. Possible values are shown here
So if you want your image in the same aspect ratio but fitting the bounds you should choose center_crop but this could crop some parts of the image on the top/bottom. About the image size: you may have heard of the density buckets used in Android: they range from LDPI to XXXHDPI which are connected to scale factors. You can find more details about this here . You are also guessing right that you should have your image in different solutions available in the density bucket folder under *res/**. On a Nexus 5X your image should be 1080pixels width to fit the entire screen. The density bucket used on this phone is XXHDPI. You can find some more details about this metrics here .

Answer 3

android:background exists for all the view. As the name suggests this is what is going to be there in the background.

android:src exists for ImageViews and its subclasses. You can think of this as the foreground. Because ImageView is a subclass of View you even have android:background for that.

If the foreground image is smaller than background image then the background portion which is not covered by the foreground would be visible.

Also, you can use transparency in the foreground in which case the background would be visible(transparently).