Do I have to set photoshop image to 160dpi for creating android buttons?

Community Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Android documentation says your button sizes should be 48x48 DP.

I understand that when a photoshop image is set to 160DPI, then 48DP = 48PX.

 

Here's the odd part. I made a 48px button in photoshop at 72DPI, and it looked exactly the same as a 48px button made at 160DPI.  The size were the same. The density might be different, but the size remained the same. The button sizes looked exactly the same in the Android Emulator.

 

What the hell does DP even mean if it doesn't represents any kind of visual size difference?

 

Shoudn't the android documentation tell you to make buttons at 48x48PX? Why do they say DP if it makes no visual difference? This is so confusing.

 

 

TOPICS
Windows

Views

216

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead

This article says, "Let’s say you have a 100x100 px bitmap. This image will appear much smaller on a high-density screen than on a low-density screen."

Is that true?

How do I design android buttons in photoshop, but be confident they will look right in Android? Is there a methodology?

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

It's stupid how we can't edit our posts, lol.

 

Does anyone know how I can ensure the buttons I make in photoshop will always be the same size no matter the Android phone?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Photoshop is a pixel editor, so it works in pixels.  Therfore in Photoshop the resolution in PPI (that is pixels per inch) is not a physical part of the image. It is just a number stored as metadata alongside the image and is used in three places only.

First when printing, the PPI is used by the print driver to calculate the physical size of the print. ie it converts pixels into inches.

Second - when showing a ruler in the user interface with a physical measurement such as inches or cm, as opposed to pixels, the resolution in  ppi is used to calculate the size of the ruler on screen.

Third - if setting text size in points - the ppi is used to convert the point size to pixels

 

That is it. Everything else is done purely as a pixel size. So a 48 x 48 pixel document is going to look the same on screen whether you set the ppi metadata to 1ppi or 1000ppi. However it will look defferent on different screens depending on the desnity of pixels on the displaying monitor. That is why 100% zoom in Photoshop is not a physical size, that physical size will be different on your screen and my screen. 100% zoom is just 1 document pixel mapped to 1 screen pixel.

 

Dave

 

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

I looked it up in the Android documentation (I'm not an Android developer) and as I suspected, DP means Device-independent Pixel. That answers your question…

 


@hen5FD8 wrote:

What the hell does DP even mean if it doesn't represents any kind of visual size difference?


 

…because DP does represent a visual size difference. But not an absolute difference — DP is, conveniently, a value that stays constant regardless of hardware ppi or viewing distance. According to the Android documentation (I added the bold formatting)…

 


…you must design your UI using density-independent pixels (dp) as your unit of measurement. One dp is a virtual pixel unit that's roughly equal to one pixel on a medium-density screen (160dpi; the "baseline" density). Android translates this value to the appropriate number of real pixels for each other density.

 

As a virtual pixel, it does not correspond to a specific physical pixels per inch value in hardware. It can’t, because it doesn’t yet know what hardware it will need to resolve to, so instead, as a device-independent pixel, it corresponds to a size unit that is consistent regardless of the ppi of the display. It’s related to the concept of the CSS reference pixel: Instead of being a single physical ppi value that can’t possibly be a consistent size across different displays, it represents a constant angle of view. By defining a device-independent pixel as an angle of view, that value can always be a constant apparent real-world size, while resolving to different hardware ppi values depending on the specific panel. Being defined as an angle of view also lets a DP automatically compensate for different viewing distances, since apparent pixel density increases for screens held closer like phones. So one DP might resolve to 160 ppi on a certain phone, and also resolve to 96 ppi on a desktop display 3 feet away.

 


@hen5FD8 wrote:

Here's the odd part. I made a 48px button in photoshop at 72DPI, and it looked exactly the same as a 48px button made at 160DPI.  The size were the same. The density might be different, but the size remained the same. The button sizes looked exactly the same in the Android Emulator.


 

You have a document ppi (72 ppi and 160 ppi), and you have document pixel dimensions (48 px). But what magnification did you use to compare the two ppi values in Photoshop? If they were both viewed at 100% magnification in Photoshop, then nothing is wrong: If they are exactly the same apparent size, that is what to expect, because 100% means one image pixel to one display pixel. Both documents are 48 px, both should appear the same size at 100% magnification, because both are the same pixel dimensions. In other words, if you view both at Photoshop 100% magnification, you are not previewing the difference in density.

 

If you want to see their sizes at a simulated 72 ppi and 160 ppi in Photoshop, you must work out what magnification will simulate that at the ppi resolution of your display, because it won’t be 100% (unless your display is exactly 72 ppi or 160 ppi). View > Actual Size won’t do it either, because that only works for documents measured in inches, not pixels. That means you need to correct the magnification percentage to account for your target ppi (e.g. 160 ppi) corrected for your display ppi (the hardware pixels divided by inches, of the display you’re editing on).

 

If you are using a HiDPI (Windows) or Retina (macOS) display, you must also correct for the scaling factor. The scaling factor accounts for old displays being around 90-120 ppi (1x scaling factor), newer displays being 150+ ppi (2x scaling factor), and closely viewed HiDPI smartphones being 300+ ppi (3x scaling factor).

 

I think this might be the way to work out those calculations with Photoshop:

  1. In Photoshop Preferences, go to the Units & Rulers panel, and look at the New Document Preset Resolutions options.
  2. For Print Resolution, enter your target resolution, which is 160 if you’re targeting DP and not a specific device panel. (It says Print but it really means “final output.”)
  3. For Screen Resolution, enter the actual hardware resolution of your display panel multiplied by its scale factor. If you don't know what it is, divide your display panel’s width in pixels by its width in inches. If it isn’t a HiDPI/Retina display, the scale factor is 1x (no correction). If it is HiDPI/Retina, the scale factor is 2x so double the ppi and enter that.

 

When you want to preview the target DP resolution:

  1. In Photoshop, choose Image > Image Size, disable Resample, and set the Resolution ppi field to 160.
  2. Choose View > Print Size. The image should display at 160 ppi on your specific display if Units & Rulers was set up right. The apparent size on other devices may still vary because they will have different hardware ppi.

 

I don’t know how to do this in Android Emulator. But you should look to see if it has a way to preview the real world size of a 48 x 48 px @160 DP asset at different device resolutions/scale factors.

 

If this is all too confusing, you’ll want to study Device-independent Pixels (DP) and HiDPI scale factors, and how they are different than and compensate for the ppi of specific display panel hardware.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

I've decided to just work purely at 72DPI with pixels. 

I don't have time to deal with stupid inferior android ideologies.  

In the android emulator, if using 48x48PX is too small, I'll just increase the size in photoshop.

Learning about DP is a complete and utter waste of time, it offers NOTHING of value, it doesn't help anything in anyway. It's completely stupid.

I'm not gonna waste hours & days learning stupid inferior Android ideology.

No developer or artist should have to worry about any kind of pixel density ratio. The android devs should fix this all automatically so we don't have to deal with it. They're such crappy developers.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

Android documentation should NOT be telling you to worry about DP, because no matter what, the dimensions of the image stays the same. This makes the concept of DP completely irrevelant.

 

The word DP shoudl be removed from Android vocabulary since knowing of it as a concept makes ZERO difference IN ANY real world application. 

 

99% of software developers don't need to know how a monitor outputs data onto a PC monitor at the programmtic level.  99% of software developers don't need to open up a hex editor.

 

Android Documentation randomly telling you about a worthless concept, as a means to confuse you is plain dumb.

 

No matter what you design in photoshop or what you program for Android. DP will NEVER EVER HELP YOU IN ANYWAY. It accomplishes nothing as a concept. 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines