Android Normal-hdpi to Large-hdpi design help needed

Question

I'm having some problems with resolution/density of android layout designs.

For example I'm using like base size in AVD 4" 480x800 hdpi (Normal-Land) and this is the result showed

for the same layout in AVD 7" 800x600 hdpi (Large-Land) shows like this

This is the layout code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/fondo_main"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tittle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center_vertical"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
        android:background="@color/fondo_main"
        android:text="Menu Principal"
        android:textColor="@color/azul_asde"
        android:textSize="25sp" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/roundcorners"
        android:gravity="center" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/buttonnewreg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="fitCenter"
                android:src="@drawable/nuevopac3" />

            <ImageView
                android:id="@+id/buttonviewreg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="fitCenter"
                android:src="@drawable/verpac4" />

            <ImageView
                android:id="@+id/buttonconfig"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="fitCenter"
                android:src="@drawable/config5" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/Textheadwelcome2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Nueva ficha"
                android:textColor="@color/azul_asde"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/Textheadwelcome2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Ver fichas"
                android:textColor="@color/azul_asde"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/Textheadwelcome2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Configuración"
                android:textColor="@color/azul_asde"
                android:textSize="16sp"
                android:textStyle="bold" />
        </TableRow>
    </TableLayout>

</LinearLayout>

The size of images is 100x100 px and I doubt about how to choose the size in pixels of an image to use as a base for HDPI and from there increase to xhdpi or decrease to mdpi

Faced with the same category of pixel density (hdpi) as you can control the size of the images?, Because it is clear that the problem is screen resolution 480x800 against the 800x1200. In spite of 800x1200 use hdpi clearly see that the image is smaller

Thanks

Answer 1

What you observe is a result of both screens having roughly the same dpi (hence usage of the same image resolutions). You will also notice that the fonts are not scaling as the 7" tablet simply has more screen space available vs the 4" phone.

It would be hard though to achieve the exact same look on all devices though. Not all devices have the same aspect ratio nor orientation for that matter.

I assume you don't want to manually set each and every screen element; perhaps you should just focus on the images themselves and fix them with android:scaleType="FIT_CENTER". This might cause some blurring due to bitmap resizing though.

An alternative could be to use vector images, such as SVG with androidSVG library to reduce blurring.