How to calculate image size for different devices dpi

Question

I have a listview layout with images

It looks like this

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="240dp"
    android:adjustViewBounds="true"
    android:id="@+id/listview_item_imageView"
    android:layout_gravity="center_horizontal|top" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#FAC308"
    android:id="@+id/listview_item_title"
    android:text="TITLE"
    android:textSize="20sp"
    android:paddingBottom="40dp"
    android:layout_centerInParent="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#ffffff"
    android:id="@+id/listview_item_subtitle"
    android:paddingTop="40dp"
    android:text="SUBTITLE"
    android:textSize="20sp"
    android:layout_centerInParent="true" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/orangeSeparator"
    android:src="@drawable/orangeseparator"
    android:layout_centerInParent="true" />

If I run it on device with 720x1280 240dpi it looks like this

If I run it on device with 720x1280 320dpi it looks like this

I get images from the internet, so I cant prepare different versions.

How to make it look similar across all the devices ?

Answer 1

in your container you have

android:layout_height="match_parent"

and in the image:

android:layout_height="240dp"

you have to have the same height or 'wrap_content' for your container not to have those gaps.

you can also add to the imageview:

android:scaleType="centerCrop"

another thing is that you can use specific library to handle loading of network images.

Answer 2

You can use fitXY Android Developer ,

android:scaleType="fitXY"

or you can also create different drawable resources from the original one, with Photoshop or any similar program

Answer 3

You can look this article . Make your app supporting different dpi variations and different screen types: Supporting Different Screens