Android supporting multiple screens and standardizing UI, dp scale differs on some screens

Question

We are working on an android app, and we have encountered an issue where devices in the same density bucket, ie "xxhdpi" do not all look the same, ie the Pixel and Pixel 2. We have a very image heavy UI and are using a Constraint view to organize the placement of several overlaid images. The Navigation drawer at the top of some of these screens further exacerbates the issue, as the margin is thicker with different densities on the same screen size and the rest of the app in squeezed into a smaller frame.

Heres an example of how different the Pixel and Pixel 2 are rendered: Pixel 2 vs. Pixel

We have tried making more specific layouts to match more specific ranges of DPI but the simulator groups the same devices together no matter what we try. These are the layout categories we've tried, where sw320dp for example refers to a minimum screen width .

Is there a way to combat this issue with constraint view features such as a constraint anchor or percentage constraints? Alternatively can we more narrowly define our layout categories or do something about the dp scale not being the same for similar devices? We have already consulted this page as well as numerous stack overflow posts: Android's Guide on Supporting Multiple Screen Sizes .

Any suggestions, comments, or specific questions welcome, thanks in advance to anyone who takes the time to read this.

Answer 1

This is my approach for getting the image to be shown completely without cropping on the edges, hope you get some kind of idea from this to tackle your situation.

Problem here is with wrap_content and match_parent, though pixel and pixel 2 falls in same category that is "xxhdpi" for getting the image from density bucket but they have little bit change with their width, pixel: 143.8 x 69.5 x 8.5 mm (5.66 x 2.74 x 0.33 inches) and pixel2: 145.7 x 69.7 x 7.8 mm (5.7 x 2.7 x 0.31 inches)

So I am guessing you probably have match parent for width and image scale type as center crop so image is scaled accordingly zooming in, so because they have different widths they are zoomed in more on one compared to the other.

I had similar kind of situation so what I did was used webview with match parent as width and wrap content as height then I displayed image in the webview

        WebSettings settings = webView.getSettings();
        settings.setLoadWithOverviewMode(true);

here setLoadWithOverviewMode actually zooms out and fits the image so no matter what you always see the whole image.