Using different layouts for different screen sizes Android

Question

I've been working on a Memory Game for Android and I'm having a litle problem with tha layout.

I have 3 diferent layouts for every type of game (easy, medium and hard) where I have 4x4, 5x5 or 6x6 images on the screen that need to be matched.

I'm using an ImageAdapter to get the images and fill the GridView that I'm using for displaying the iamges on the screen.

Here's the XML file for the Easy game (4x4 images):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <RelativeLayout 
        android:id="@+id/mainBar"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:gravity="center">
         <TextView 
           android:id="@+id/player1"
           android:layout_alignParentLeft="true"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Player1 - "
           />

        <TextView 
           android:id="@+id/player1Score"
           android:layout_toRightOf="@+id/player1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="00 "
           />

          <TextView 
           android:id="@+id/player2Score"
           android:layout_alignParentRight="true"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="00"
           />

        <TextView 
           android:id="@+id/player2"
           android:layout_toLeftOf="@+id/player2Score"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Player2 - "
           />

    <Chronometer
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="02:00" />

    </RelativeLayout>


   <GridView
       android:id="@+id/gridview"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:layout_alignParentBottom="true"
       android:layout_below="@id/mainBar"
       android:gravity="center_vertical|center_horizontal"
       android:numColumns="4">
</GridView>



</RelativeLayout>

The only problem is that when I'm running the app on an emulator with a small screen size it the images look streched....(see IMG#1)..when I would really want to look something like this..(see IMG#2), on every screen no matter of the size!

I'm using different resources (different images for ldpi, mdpi, hdpi).

Answer 1

The problem you are having is that while you are supporting multiple screen densities you are not supporting multiple physical screen sizes. That is why on the smaller screen your images look bigger and begin to distort.

To solve this you can make a seperate layout for each phone size: small, normal, large and xlarge.

However as that is quite tedious I tend to lean towards using a linear layout and weights so that the layout xml scales on all phone sizes.

In this case you would want to make one vertical linear layout with 4 horizontal linear layouts inside.

Answer 2

Use this to find the correct physical screen size:

if ((getResources().getConfiguration().screenLayout & 
    Configuration.SCREENLAYOUT_SIZE_MASK) == 
        Configuration.SCREENLAYOUT_SIZE_LARGE) {
    // on a large screen device ...

}

Source: How to determine device screen size category (small, normal, large, xlarge) using code?