Image rendering in mobile apps

Question

I am currently working on an android mobile app and I have encountered a image rendering issue with android mobile which is smaller in size. The images look neat on phones like Nexus, Samsung that have wide screens but the image overlaps on smaller screen phones. I am using ionic to build my code & have included bootstrap as well.

I have included the below code in style part:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

The below code in body:

<div class="col-xs-12 col-md-12 col-sm-12" >
<div id="journey" class="col-xs-2">
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px;padding:5px;position: relative;left:1%;" cursor="pointer" onclick="" /></a>
</div>
<div id="conveyance" class="col-xs-2">
                            <a href="./4s.html "><img src="./images/launch 48.png" class="img_responsive"  style="width:60px;height:70px;padding:5px;" cursor="pointer" /></a>
</div>
<div id="per-diem" class="col-xs-2" >
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive"  style="width:60px;height:70px;padding:5px;"cursor="pointer" onclick="" /></a>
</div>
            <div id="lodging" class="col-xs-2" >
                            <a href=" "><img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px; padding:5px;"cursor="pointer" onclick="" /></a>
</div>
            <div id="misc_1" class="col-xs-2" >
                            <a href=" "><img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px; padding:5px;" cursor="pointer" onclick="" /></a>
</div>
            <div id="end_journey" class="col-xs-2">
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px;padding:5px;"cursor="pointer" onclick="" /></a>
</div>

Can you please help me undersand what you meant by a fiddle to duplicate this issue? — Xhalini, Nov 19 '15 at 12:41
http://jsfiddle.net/ - recreate the problem you have in that website, click save and paste the link here. — odedta, Nov 19 '15 at 16:45
The problem is not in the web browser..it is on mobile phones..The images over lap when the screen width is smaller — Xhalini, Nov 20 '15 at 10:13
Please try to create a fiddle like @odedta suggest and then paste the link. Using the developer tool of the web browser we can emulate the size of a smaller android device screen and try to recreate (and solve) the problem — Dario Picco, Nov 23 '15 at 12:59

score 2 · Accepted Answer · edited May 23 '17 at 11:51

Use dip instead of Px

On a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

How to Support Multiple Screens:

1. Explicitly declare in the manifest which screen sizes your application supports:

By declaring which screen sizes your application supports, you can ensure that only devices with the screens you support can download your application. Declaring support for different screen sizes can also affect how the system draws your application on larger screens—specifically, whether your application runs in screen compatibility mode. To declare the screen sizes your application supports, you should include the element in your manifest file.

2. Provide different layouts for different screen sizes:

By default, Android resizes your application layout to fit the current device screen. In most cases, this works fine. In other cases, your UI might not look as good and might need adjustments for different screen sizes. For example, on a larger screen, you might want to adjust the position and size of some elements to take advantage of the additional screen space, or on a smaller screen, you might need to adjust sizes so that everything can fit on the screen. The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra-large screen should go in layout-xlarge/. Beginning with Android 3.2 (API level 13), the above size groups are deprecated and you should instead use the swdp configuration qualifier to define the smallest available width required by your layout resources. For example, if your multi-pane tablet layout requires at least 600dp of screen width, you should place it in layout-sw600dp/. Using the new techniques for declaring layout resources is discussed further in the section about Declaring Tablet Layouts for Android 3.2.

3. Provide different bitmap drawables for different screen densities: By default, Android scales your bitmap drawables (.png, .jpg, and .gif files) and Nine-Patch drawables (.9.png files) so that they render at the appropriate physical size on each device. For example, if your application provides bitmap drawables only for the baseline, medium screen density (mdpi), then the system scales them up when on a high-density screen, and scales them down when on a low-density screen. This scaling can cause artifacts in the bitmaps. To ensure your bitmaps look their best, you should include alternative versions at different resolutions for different screen densities. The configuration qualifiers (described in detail below) that you can use for density-specific resources are ldpi (low), mdpi (medium), hdpi (high), xhdpi extra-high), xxhdpi (extra-extra-high), and xxxhdpi (extra-extra-extra-high). For example, bitmaps for high-density screens should go in drawable-hdpi/.

Please Refer http://developer.android.com/guide/practices/screens_support.html

If you Want to learn more then refer: What is the difference between "px", "dp", "dip" and "sp" on Android?

Image rendering in mobile apps

1 Answers1