9-Patch drawable dimensions Android. How do different densities handle the non-stretched areas?

Question

Consider the above image. - The dotted line demarcates the 9-Patch png I will slice out of a photoshop file. I need it to create a popup box. - The box incorporates a dropShadow as shown by the measuring tool in this photo. - The pink lines are there to show how I will use the draw9Patch tool to create the 9-Patch.

My question is: If I have a View "Container" with the 9-Patch for a background I need to ensure its children views are always inside the white box. I was going to use padding for this. I was going to set the padding to equal the measuring tool. So if it is 30px in photoshop I'll set layout_paddingLeft"=30dp" for the container. (The design is at MDPI so I assume this conversion is okay). However how do screens of different densities handle the 9path. For instance will the measured area be 30px or 30dip ?

Hesitant

I always thought that the content will stay(be forced, the non stretchable area acting like padding) in the box resulted from the stretch lines intersection. Do you have an example of content overflowing that box or you're just assuming it may overflow? – Herrera

Answer 1

Via the draw9patch tool you can define:

• vertical stretching: the black pixels on the left side
• horizontal stretching: the black pixels on the top side
• vertical content: the black pixels on the right side
• horizontal content: the black pixels on the bottom

Note that stretching pixels don't have to be contiguous, so you can exclude some specific slice from stretching (look at the popup arrow above). At he same time you can make a reasonable idea of where your content will be placed just taking a look at the preview on the right, with the violet areas in. As you can suppose, this way you don't have to specify any padding in your layout: the view will take into account those values using the 9patch you set as background.

The no-stretching areas scale with the pixel density. So, if you set the 9patch above as an mdpi asset, the top-leftmost slice is rendered in a 50x40 pixels area @mdpi, and in 100x80 pixels area @xhdpi. The leftmost stretching areas instead arrange their width according to dpi, while height is arranged according to content. Other stretching slices work in similar way.

In both cases, dealing with a "low resolution" 9patch can lead to ugly pixelation artifacts. A possible solution is to provide a different 9patch for each supported dpi, or to define only the higher ones (xhdpi) and let Android scale them down accordingly.

The content bounds are handled as dp too, so they scale according to pixel density. For example: a left padding defined in the original 9patch as 40px@mdpi, will be translated in 80px@xhdpi, so the content will never flow out the given bounds. Note you can even override the content bounds specified in 9patch via the padding* properties in your layout.

Shafting

"or to define only the higher ones (xhdpi) and let Android scale them down accordingly" help me a lot. – Revolutionary