Search code examples
androiddimensionsdpi

Understanding android dimensions


I have two devices the Desire HD (217dpi, 4,3") and the Nexus 7 (216dpi, 7"). I'm actually building the menu and get crazy about the dimensions. I'm using in general dp (Density-independent Pixels).

Our designer wants that the options are a little bigger than default so I added an android:minHeight="100dp" to the base of my ListView item. But it looks very different on the tablet and the mobile. Here is a screenshot I resized the tablet screenshot to 62% so both screenshots are equal height.

two screenshots

However both options are 100dp height but as you can see the gaps are very different on the table they are about 0.5/1/0.5 which looks nice but on the mobile this is 1/1/1 which looks bad. I don't understand why this happens.

I have also a counter as you can see both in the yellow box both are 100% scaled the tablet makes a rectangle with rounded edges while on the mobile it's more like a circle. Both are using the same shape xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="2dp"
            android:color="#fff" />
    <solid android:color="#f00" />
    <padding android:left="4dp"
             android:top="2dp"
             android:right="4dp"
             android:bottom="2dp" /> 
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp" 
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" /> 
</shape>

Why do those images looks so different? I tried to compare the dpi values which are almost the same. I think both devices have the density hdpi. So I cannot use a separate values file based on the dpi, I could use the large prefix but I'm not sure how this would look on a bigger tablet.


Solution

  • I found the reason for this behavior. It is the font size settings on that device. It was set to Huge so all demensions with the unit SP where multiplayed by 1.5. You can check it for your device in the settings with Settings -> Display -> Font Size.

    As I wrote in this answer you can get the scale factor with this simple line of code:

    float scale = getResources().getConfiguration().fontScale;
    

    My solution is to use that scale factor or not to mix up SP with DP.