-1

I'm making an android App that shows images at full screen.

I learned some about dpi and dp, but I didn't find how many pixel must be the largest side of my images (in prospective to good fit also in landscape mode) to appear good in different devices.

As in the documentation, the most used screen configurations are normal with hdpi, xhdpi and xxhdpi density: enter image description here

So, if my thinking is correct, I can make only one image to fit the xxhdpi to works fine also with the other two densities, and put it in Android Studio under the "res/drawable" folder (without qualifier). Specifying the image size in dp in the layout, Android should scale the image for the smaller configurations.

But, for the xxhdpi, how many pixel must be the largest side of my image, in pixel, to show good?

Edit: how many pixel must be the longest side of my image to be showed properly in a device with xxhdpi density without the image appearing grainy?

All images are photo, not icons, so I can't use the vector graphics.

user2342558
  • 5,567
  • 5
  • 33
  • 54
  • I'm not entirely clear what you are asking for in your question. Are you trying to ask `What is the maximum number of height and width pixels supported by xxhdpi devices`? Or something different? – PGMacDesign Sep 06 '19 at 16:06
  • @Silmarilos, I need to know: how many pixel must be the longest side of my image to be showed properly in a device with xxhdpi density without the image appearing grainy? (I edited this question in my question post) – user2342558 Sep 06 '19 at 17:15

5 Answers5

3

By looking at the Android Documentation. One can estimate the size of the picture. look at below picture enter image description here

So, your image resolution should be in similar resolution

LDPI:    200 X 320px
MDPI:    320 X 480px
HDPI:    480 X 800px
XHDPI:   720 X 1280px
XXHDPI:  960 X 1600px
XXXHDPI: 1440 x 2560px

A little bit of +/- won't affect the outcome because with these standard sizes the aspect ratio of any portrait picture should be respected.

Rahul Khurana
  • 8,577
  • 7
  • 33
  • 60
  • Can you give me the source of these pixel values? As mentioned here https://material.io/resources/devices/ all xxhdpi have 1000x1920px or higher – user2342558 Sep 05 '19 at 07:57
  • @user2342558 I have faced the same issue earlier and figured out it on my own. I just picked the mdpi device size somewhere and made the others accordingly. – Rahul Khurana Sep 05 '19 at 08:04
  • for my Samsung Galaxy S5 neo, which is xxhdpi with 1920x1080 resolution, an image with the higher side of 960 looks good. So, in which qualified raw folder I must put images with these dimensions? In the raw-xxhdpi and provide alternatives one in the other by scaling it? E.g. in the xhdpi it will be 640px? It's true? – user2342558 Sep 05 '19 at 08:10
  • put those images in the drawable folder **src > main > res** and create multiple folders like `drawable-mdpi`, `drawable-hdpi` and so on.... – Rahul Khurana Sep 05 '19 at 08:14
  • I can't do that. I moved them in the raw folder because now images are encrypted. – user2342558 Sep 05 '19 at 08:16
  • @user2342558 you don't need to do that. Or move only the largest image into the raw folder and load image by using an image loader library like Glide. `Glide` is specifically designed to ignore memory-related issue to an app – Rahul Khurana Sep 05 '19 at 08:21
  • @user2342558 Are you not satisfied with my answer? – Rahul Khurana Sep 06 '19 at 02:57
  • I need to try your suggested dimensions. At this development step of my App I can't use an external library. I already have a decryption and a bitmap resizing. I implemented them using the official way suggested from Google so I mean Glide can't do these operations in a faster way without enforce me to modify the project structure and modify lots of code). – user2342558 Sep 06 '19 at 07:53
  • @user2342558 ok. if my answer helps you towards the right direction please upvote and accept as an answer. – Rahul Khurana Sep 06 '19 at 08:00
  • Thanks for your help, if you can please see my other questions. – user2342558 Sep 12 '19 at 04:45
  • @user2342558 Ok. I will check them – Rahul Khurana Sep 12 '19 at 04:46
0

Well, if you put the image which fits the xxxhdpi inside the folder drawable, then it will fit all the screens.

But there is another way to use only one image instead of using multiple images for different resolutions. It's by using svg images which are vector images that will not be affected by zoom in or zoom out.

To use svg you need to follow these instructions:

  1. Make the icon to be icon.svg
  2. In the Android Studio, right click on drawable folder
  3. Choose New -> Vector Asset
  4. Choose Local File (SVG, PSD)
  5. Choose your svg file
  6. Click Next and choose the name
  7. Click Finish
  8. In the app build.gradle add the following inside android block:

    vectorDrawables {
        useSupportLibrary true
    }
    
  9. In the xml layout file, add the following:

    <AppCompatImageView
        android:width="wrap_content"
        android:height="wrap_content"
        app:srcCompat="@drawable/your_svg_file"
        />
    
user2342558
  • 5,567
  • 5
  • 33
  • 54
Khalid Taha
  • 3,183
  • 5
  • 27
  • 43
0

Android have ratios defined for a image to set in all different drawables

Android icons require five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline.

  • mdpi: 160 dpi 1×
  • hdpi: 240 dpi 1.5×
  • xhdpi: 320 dpi 2×
  • xxhdpi: 480 dpi 3×
  • xxxhdpi:640 dpi 4×

Above size is for normal pixel icons. There are fix android size for Action bar, Dialog & Tab icons, Launcher icons & Notification icons

Check this link for more details http://iconhandbook.co.uk/reference/chart/android/

Kajol Chaudhary
  • 257
  • 2
  • 9
  • Yes but thats what I answer, it depends on the ratio. the maximum image which is good for xxxhdpi will be 4* with you baseline image size – Kajol Chaudhary Feb 01 '19 at 09:02
  • You do not answered my question "for the xxhdpi, how many pixel must be the largest side of my image, in pixel, to show good?" – user2342558 Feb 01 '19 at 11:28
0

You have to take a look at the current market of smartphones.

Here you can see the screen sizes and resolutions of the most popular devices in the market.

http://screensiz.es/

Order the list in pixel per inch and you will see that top smartphones have resolutions bigger than 500 ppi or another way to see it, much bigger than 72ppi of your images.

If you have enough space to store or mechanism to download images try to test with full quality. If thats too much try to find a compromise. Lower image quality and see the result in high resolution screen.

Note that you didn't posted here the total size of image, in case is bigger than screen size, take a look at total size of image and compress it to fit your needs, maintaining as much as possible the resolution.

Edit: Looking only to size of image in pixels, the current biggest screen in smartphone is 2560 x 1440 pixels, so you wont need any image bigger than this.

devzeze
  • 302
  • 2
  • 9
  • Why are you using the `ppi` unit? I need to know about the `pixel` attribute... Your explain about the `ppi` does not help me. – user2342558 Feb 04 '19 at 09:04
  • The image has the size and resolution. When you describe image size, you can refer to any of those. Anyway if you re only interested in the size of the image in pixels, just check in the screens table whats the size of screen (you have there the size in pixels) and adjust your image to the screen with highest resolution. 2960 x 1440 pixels. If it takes too much space, find a good compromise by reducing image size and testing in smartphone. – devzeze Feb 05 '19 at 08:49
  • Hi, you have the answer of the size of the image in pixels, can you update the answer and score? – devzeze Feb 06 '19 at 16:50
  • devzeze, you mentioned the highest resolution (2960 x 1440 pixels) but I need the XXHDPI max dimension in pixels for the bigger side of the image. – user2342558 Mar 22 '19 at 13:14
  • Because XXXHDPI is the highest resource bucket there is no max dimension for in pixels. It will always depends on manufacturer. For XXXHDPI the dpi is around 640 dpi, but because there are no more categories above for example Sony Xperia H8541 with 857 dpi is on same bucket. – devzeze Apr 12 '19 at 11:53
0

If I understand your answer correctly, you are talking about images (pictures of lovely cats and dogs?) and not about icons?

I prefer putting images into the nodpi folder.

nodpi Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density.

Afterwards I would create a fullscreen ImageView and let imageView do the scaling if needed

longi
  • 11,104
  • 10
  • 55
  • 89
  • Yes, are large bitmap, not icons. Because they are encrypted, is useless if I put them in the nodpi folder. I think that matter if I provide them with different dpi version to release the app with bundles so the user must download only the bundle accordingly with their device's density. And also by doing this, the user cpu will work less with a smaller image's size, resulting in an faster App. Please tell me if I'm wrong. – user2342558 Sep 06 '19 at 11:05