avatarHicran Şevik

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

3389

Abstract

/v2/resize:fit:800/1*vYt1-6ueNYBe8-tvfduRyg.png"><figcaption></figcaption></figure><p id="7c42">To protect the visible size of UI design on different screens that have different densities, we need to design our UI with Density-independent pixels. This measurement unit is independent of the device screen. It scales as per device screen density. It is used to define layout and Views dimension. 1 dp is equal 1 px in <i>baseline density(160 pixels per inch)</i>.</p><p id="c416">👉 <b><i>1 dp= (dpi of your screen/160) px</i></b></p><h2 id="70e7">Scale-independent Pixels</h2><p id="88b0">This measurement unit(sp) is used for TextView size. Compare to <i>dp</i>, sp scales as per device density and user setting preferences in the device.</p><h2 id="8c23">Screen Density with Details</h2><p id="406a">To deal with these diverse devices with different screen resolutions, Android came up with 6 buckets to group the devices of different screen resolutions.</p><p id="50a8"><i>Screen Density </i>is measured in<i> Dots Per Inch(dpi). One dot represents one pixel. The </i>term specifies pixel number in an inch.</p><figure id="167a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*U5Gf_qseigyY6brYpUnOgQ.png"><figcaption>Scale Factor</figcaption></figure><p id="6b28">If we come back to the formula above, we can calculate the scale factor in this way.</p><figure id="83e7"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*69khZmBSFsckx7rknkGOtQ.png"><figcaption></figcaption></figure><p id="ac2d">Let’s create a View that is 100 dp height and see the behavior on devices that are with different screen resolutions.</p> <figure id="effe"> <div> <div>

            <iframe class="gist-iframe" src="/gist/HicranSevik/0fddcbbb105306a6f84be3bca7e125b0.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><figure id="84b9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*9r_U9SzLnEZntFNVIfBAEQ.jpeg"><figcaption></figcaption></figure><p id="5c77">As we see in the image above, we were able to preserve the size because we set with the dp unit.</p><h2 id="b075">Tips &amp; Tricks</h2><p id="7dcb">👾 While we design our app, we need to be aware that a human fingertip is roughly 50 dp wide.</p><p id="fc24">👾 We should avoid using pixel instead of dp units while we design our UI.</p><p id="9770">👾 Create PNG graphic assets for each density to avoid automatic scaling.</p><p id="491a">That’s enough today. Good Bye 🙋</p><div id="f3fe" class="link-block">
      <a href="https://en.wikipedia.org/wiki/Display_size#:~:text=The%20size%20of%20a%20screen,and%20is%20measured%20in%20pixels">
        <div>
          <div>
            <h2>Display size - Wikipedia</h2>
            <div><h3>On 2D displays, such as computer monitors and TVs, the display size (or viewable image size or VIS) is the physical…</h3></div>
            <div><p>en.wikipedia.org</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*nBHILXBohVUjIro1)"></div>
          </div>
        </div>
      </a>
    </div><div id="fa39" class="link-block">
      <a href="http

Options

s://readmedium.com/a-quick-guide-on-android-density-buckets-f3b0cdb0f1fb"> <div> <div> <h2>A quick guide on Android density buckets!</h2> <div><h3>Make your developers life easier using our quick guide!</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*SJlaOYK2DwEMlpsS)"></div> </div> </div> </a> </div><div id="2d73" class="link-block"> <a href="https://mediag.com/blog/popular-screen-resolutions-designing-for-all/"> <div> <div> <h2>Popular Screen Resolutions | Media Genesis " Media Genesis</h2> <div><h3>In today's world, there are a plethora of devices for people to choose from and it can be daunting to try to…</h3></div> <div><p>mediag.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*MTghNlZPho4-X7GW)"></div> </div> </div> </a> </div><div id="971f" class="link-block"> <a href="https://www.vocabulary.com/dictionary/pixel"> <div> <div> <h2>pixel - Dictionary Definition</h2> <div><h3>A pixel is one of the small dots or squares that make up an image on a computer screen. The more pixels there are, the…</h3></div> <div><p>www.vocabulary.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*Tcg6TBV7lBAvOYD3)"></div> </div> </div> </a> </div><div id="295c" class="link-block"> <a href="https://www.creativebloq.com/news/the-ultimate-guide-to-screen-resolution"> <div> <div> <h2>Screen resolution: The ultimate guide</h2> <div><h3>Screen resolution is crucial for designers, photographers and artists. When you're working on digital creations, your…</h3></div> <div><p>www.creativebloq.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*08nDW3UimknQqaXL)"></div> </div> </div> </a> </div><div id="14e3" class="link-block"> <a href="https://readmedium.com/what-is-px-what-is-a-pt-what-is-dp-ecaefefa25a2"> <div> <div> <h2>What is px? What is a pt? What is dp?</h2> <div><h3>iOS’ design measures in pts, Androids in dp, and design for the web is done in px but what do they mean and what is the…</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*UDEc-Cu4Cgi50qfRjza98w.png)"></div> </div> </div> </a> </div><p id="b597"><a href="https://developer.android.com/training/multiscreen/screendensities">https://developer.android.com/training/multiscreen/screendensities</a></p></article></body>

Working With Different Pixel Densities in Android

Besides having different screen sizes (handsets, tablets, TVs, and so on) on Android, there are also different pixel size features. That is, while one device has 160 pixels per square inch, another device fits 480 pixels in the same space. We use the pixel density keyword for this kind of case. Pixel density is a term independent of screen size. To give an example through an image to better understand, in case we ignore dependence such as pixel density, the image quality or image size may deteriorate.

Today, I would like to talk to you about different screen pixel densities and resolution-independent units of measurements.

Before that, let’s talk about a few concepts in order to understand the basics of multiple screens.

Inch

An inch is a unit of length measuring equals one-twelfth of a foot (2.54 cm). The symbol is in or ″.

Screen Size

The size of a screen is usually described by the length of its diagonal, which is the distance between opposite corners, usually in inches.

Pixel (Picture X Element)

A pixel(px) is the smallest portion that makes up an image on a computer screen. We can see the pixel when we zoomed into an image.

Screen Resolution

The screen resolution is the number of pixels a screen can show horizontally and vertically. For instance, the resolution of a screen that displays 1080 pixels vertically, and 1920 pixels horizontally is known as Full HD. HD display has 1920*1080 = 2,083,600 pixels totally.

The higher the number of pixels, the more detailed the image quality. But this is not the only factor. There is also pixel density. In the case of monitors are different screen sizes and the same screen resolution, the smaller monitor has a higher number of pixels per inch than the larger screen. And of course, that means better display quality.

Density-independent Pixels

Let’s imagine a designer creating a button whose width is 4 px and height is 2 px. In the different screens with 160 pixels and 320 pixels per inch, the button will be displayed differently like below.

If we specify our distances/sizes based on pixels, we would have to arrange them for all different devices.

Android solved this problem by introducing the Density-independent pixel (abbreviated dp or dip) keyword. DP units keep things roughly the same physical size on every Android device.

To protect the visible size of UI design on different screens that have different densities, we need to design our UI with Density-independent pixels. This measurement unit is independent of the device screen. It scales as per device screen density. It is used to define layout and Views dimension. 1 dp is equal 1 px in baseline density(160 pixels per inch).

👉 1 dp= (dpi of your screen/160) px

Scale-independent Pixels

This measurement unit(sp) is used for TextView size. Compare to dp, sp scales as per device density and user setting preferences in the device.

Screen Density with Details

To deal with these diverse devices with different screen resolutions, Android came up with 6 buckets to group the devices of different screen resolutions.

Screen Density is measured in Dots Per Inch(dpi). One dot represents one pixel. The term specifies pixel number in an inch.

Scale Factor

If we come back to the formula above, we can calculate the scale factor in this way.

Let’s create a View that is 100 dp height and see the behavior on devices that are with different screen resolutions.

As we see in the image above, we were able to preserve the size because we set with the dp unit.

Tips & Tricks

👾 While we design our app, we need to be aware that a human fingertip is roughly 50 dp wide.

👾 We should avoid using pixel instead of dp units while we design our UI.

👾 Create PNG graphic assets for each density to avoid automatic scaling.

That’s enough today. Good Bye 🙋

https://developer.android.com/training/multiscreen/screendensities

Android
UX
Android Design
Pixel
Density
Recommended from ReadMedium