Understanding Screen Density

Screen density refers to the number of pixels within a physical area of the screen, typically measured as pixels per inch (PPI) or dots per inch (DPI). Higher density screens display sharper, more detailed images.

Key Concepts

PPI (Pixels Per Inch)

The number of pixels that fit into one inch of the screen. Calculated using the screen resolution and physical size:

DPI (Dots Per Inch)

Technically different from PPI (used for printers), but the terms are often used interchangeably for screens. For mobile development, PPI is the more accurate term.

Density-Independent Pixels (DP/PT)

A virtual pixel unit that allows you to define UI elements in a way that's independent of screen density:

• Android: DP (density-independent pixels)
• iOS: PT (points)

Android Density Buckets

Android groups devices into density buckets to simplify resource management:

iOS Scale Factors

iOS uses a simpler scale factor system:

Providing Graphics Assets

Android

Place drawable resources in density-specific folders:

res/
  drawable-ldpi/
  drawable-mdpi/
  drawable-hdpi/
  drawable-xhdpi/
  drawable-xxhdpi/
  drawable-xxxhdpi/

iOS

Use naming conventions for different scales:

image.png      (1x - 100×100)
image@2x.png   (2x - 200×200)
image@3x.png   (3x - 300×300)

Best Practices

• Design at the highest density: Start with xxxhdpi (4x) or @3x and scale down
• Use vector graphics: SVG on Android (VectorDrawable), PDF on iOS
• Test on multiple devices: Verify appearance across different densities
• Optimize file sizes: Use appropriate compression for bitmap images
• Use DP/PT for layouts: Never use pixels for sizing UI elements