Understanding supporting different screen sizes relating to Images

Question

I still have problems with the correct view for the images in my Application. So on my first device (5,2 inches & 480 density) it looks good.

On the second device (5,5 inches & 420 density) the image doesn't fit and it shows white borders.

This is the ImageView in my layout:

  <ImageView
    android:id="@+id/iv_image"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"   
    android:layout_alignParentStart="true" 
    android:layout_below="@id/tv_topic" />

I placed all my Images in the drawable folder after reading this on a Android Blog :

There are commonly two ways to target all screen DPIs. 1. Easiest way - Make all images to Extra High or Extra Extra High DPI.

Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout.

So I implemented all Images in the highest possible resolution ONCE in the drawable folder. Is it necessary to place them all in the specific folders (drawable-ldpi, drawable-mdpi ...)? It would mean that there will be multiple copies of my Image with always the same size.

And yes I read the official documentation of supporting multiple screens a couple times. However I have some problems understanding it.

Answer 1

I advice you to use the layout_weight attribute to keep the constant ratio between the ImageView and the question layout. Change your layout to something like this :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="4">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/iv_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="3" />
</LinearLayout>