What image size should I ask from UI developer?

Question

I have an ImageView with these attributes:

   android:layout_width="match_parent"
   android:layout_height="160dp"

UI developer asks me for the size of Image that I want in px. What size should I ask? Should I ask different size for different devices?

Note

I don't have an ImageView with specific height and width. My ImageView width is match_parent not a specific width.

All the answers say that I should use a converter, How can I convert match_parent to px ?

According to answers, I should ask about six images, shouldn't I?

Answer 1

You should give highest screen density in pixels to your UI developer then scale to lower densities on your own.

Normally an android app will support screen densities ldpi at min and xxxhdpi at max.

Step1: If you want the image size is 160 x 160 dp then give the UI developer the highest image size associated with max screen density.

160 x 4 = 640x640 px (why multiply by 4? I will explain later)

Step 2: Scale the image 640x640 px to lower size based on screen densities

• ldpi : 160 x 0.75 = 120x120 px
• mdpi : 160 x 1 = 160x160 px
• hdpi : 160 x 1.5 = 240x240 px
• xhdpi : 160 x 2 = 320x320 px
• xxhdpi : 160 x 3 = 480x480 px
• xxxhdpi : 160 x 4 = 640x640 px

Tips: Find your image size corresponds with mdpi density screen (known as base density or 1X density) then scale to other densities by the following formula

Update: From https://material.io/tools/devices/ , screen size for base density screen is 360x640 px . So your ImageView size will be 360x160 px on 1X density screen.

ldpi: 270x120 px 
mdpi: 360x160 px
hdpi: 540x240 px
xhdpi: 720x320 px
xxhdpi: 1280x480 px
xxxhdpi: 1440x640 px

Answer 2

Why are you not using Vector drawable?

Why use Vectors?

1. Data can be represented in original resolution without generalization.
2. Graphical outputs of the images are more pleasing than the created as raster image
3. Another very important reason of using vector graphics rather than raster is their size. Vector objects are much smaller than raster image format. If we have the full-size image to update, the vector file might only take few kilobytes of space on your system, where the same image in medium resolution bitmap format might not place on CD ROM.

You should use SVG images in your project.

Create SVG instead of PNG files

Answer 3

Ok, you want to set image height of size 160dp (since it is in dp, this is the size in mdpi). So you to have to ask UI developer to make you image of height 4 times of that. Image Height = 4 * 160. After that you can use Batch drawable importer from android studio, to make image for all differrent resolutions. Hope it helps.

Answer 4

Different Devices has Different sizes

android:adjustViewBounds="true" is automaticaly pickup height of image

so you can this,

    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

Answer 5

You can refer this

 ldpi: 270x120 px 
mdpi: 360x160 px
hdpi: 540x240 px
 xhdpi: 720x320 px
xxhdpi: 1280x480 px
 xxxhdpi: 1440x640 px

Answer 6

You should go with 1440x640 for largest size.

If you want to support multiple devices with multiple images you can have 5 standard image slicings.

mdpi : 360x160 hdpi : 540x240 xhdpi : 720x320 xxhdpi : 1080x480 xxxhdpi : 1440x640

---

I came up with these image sizes, because if you look at most common display sizes, largest of them is 1440x2960 of Samsung Galaxy S8. (I am aware of 2160x3840 , but it is not main stream and I would even say its outright crazy).

In your case you have width set to match_parent which in every case of largest (or even custom) DPI, will be 1440px at most, so you can be damn sure that 99% of the time it will not exceed it. (Most current devices with 9:18 or 9:X ratio devices also feature 1440 px width in almost every case if they go more than 1080. Check out resolutions of latest devices released.)

So you can settle at 1440 px of width. Now height of your ImageView is 160dp. Which can be (as suggested by everyone else) 160*4 = 640 px for largest default DPI xxxhdpi . The reason that you should consider height for standard dpis because it is fixed to some dp (160dp) and this may change for custom dpi devices, so you can support maximum devices with this, 640px size. Hope I was clear about size suggestion.

Answer 7

This is an official size chart given by Material Design Or you can ask for xxxhpdi which is 1440 x 2960 px based image and use this site to get all the images with various densities. When you get images with various densities, no need to specify height and width in px layout. Keep the images with same name and use match_parent. Android will automatically choose the image according to the device.

Answer 8

To provide good graphical qualities on devices with different pixel densities, you should provide multiple versions of each bitmap in your app - one for each density bucket, at a corresponding resolution. Otherwise, Android must scale your bitmap so it occupies the same visible space on each screen, resulting in scaling artifacts such as blurring .

Figure 1. Relative sizes for bitmaps at different density sizes

There are several density buckets available for use in your apps. Table 1 describes the different configuration qualifiers available and what screen types they apply to.

Table 1. Configuration qualifiers for different pixel densities.

To create alternative bitmap drawables for different densities, you should follow the 3:4:6:8:12:16 scaling ratio between the six primary densities. For example, if you have a bitmap drawable that's 48x48 pixels for medium-density screens , all the different sizes should be:

• 36x36 pixels (0.75x) for low-density (ldpi)
• 48x48 pixels (1.0x baseline) for medium-density (mdpi)
• 72x72 pixels (1.5x) for high-density (hdpi)
• 96x96 pixels (2.0x) for extra-high-density (xhdpi)
• 144x144 pixels (3.0x) for extra-extra-high-density (xxhdpi)
• 192x192 pixels (4.0x) for extra-extra-extra-high-density (xxxhdpi)

Then, place the generated image files in the appropriate subdirectory under res/ and the system will pick the correct one automatically based on the pixel density of the device your app is running on:

res/

• drawable-xxxhdpi/

    awesome-image.png 

• drawable-xxhdpi/

    awesome-image.png 

• drawable-xhdpi/

    awesome-image.png 

• drawable-hdpi/

    awesome-image.png 

• drawable-mdpi/

    awesome-image.png 

Then, any time you reference @drawable/awesomeimage , the system selects the appropriate bitmap based on the screen's dpi. If you don't provide a density-specific resource for that density, the system picks the next best match and scales it to fit the screen.

• Tip: If you have some drawable resources that the system should never scale (perhaps because you perform some adjustments to the image yourself at runtime), you should place them in a directory with the nodpi configuration qualifier. Resources with this qualifier are considered density-agnostic and the system will not scale them.

Official Source: Screen Densities

Answer 9

try this source code

Display display = getWindowManager().getDefaultDisplay();
String displayName = display.getName();  // minSdkVersion=17+
Log.i(TAG, "Pantalla          = " + displayName);

// Tamaño en píxeles
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
Log.i(TAG, "Ancho             = " + width);
Log.i(TAG, "Alto              = " + height);

// dpi
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int heightPixels = metrics.heightPixels;
int widthPixels = metrics.widthPixels;
int densityDpi = metrics.densityDpi;
float xdpi = metrics.xdpi;
float ydpi = metrics.ydpi;
Log.i(TAG, "Ancho en píxeles  = " + widthPixels);
Log.i(TAG, "Alto en píxeles   = " + heightPixels);
Log.i(TAG, "Densidad dpi      = " + densityDpi);
Log.i(TAG, "x dpi             = " + xdpi);
Log.i(TAG, "y dpi             = " + ydpi);

// Deprecated
int screenHeight = display.getHeight();
int screenWidth = display.getWidth();
Log.i(TAG, "Alto de pantalla  = " + screenHeight);
Log.i(TAG, "Ancho de pantalla = " + screenWidth);

// Orientación 
int orientation = getResources().getConfiguration().orientation;
Log.i(TAG, "Orientación       = " + orientation);

Answer 10

Yes you would need to take multiple images for different screen sizes, if you do not want to use vectors and wish to use images (png,etc.) instead.

Since you have width as match_parent , in this case take the images with the max screen width for different density buckets:-

MDPI -> 320 px
HDPI -> 480 px
XHDPI -> 640 px
XXHDPI -> 1080 px

One dp is a virtual pixel unit that's roughly equal to one pixel on a medium-density screen (160dpi; the "baseline" density).

According to the above statement , you the find the heigth for the images :-

MDPI -> 160 px
HDPI -> 240 px
XHDPI -> 320 px
XXHDPI -> 480 px

How to calculate :-

Consider, 160 dp would be 160 px in mdpi(1x).

160 dp   would be 240 px in hdpi (1.5x).

and so on..

OR using the function px = dp * (dpi / 160)

For HDPI , dpi is 240

px = 160 * 240/160
px = 240

For dpi list refer this

This helped me to figure it out, and make things clear