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!

IMG#1

IMG#2

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

I would suggest making the ldpi images smaller, not to less detailed. — Sam, Jun 26 '12 at 18:02
check the answer http://stackoverflow.com/questions/8428096/design-layout-for-multiple-screens and place images according to drawable folder — rajpara, Jun 26 '12 at 18:03
I've placed images according to drawable folder but it doesn't work! — Alin, Jun 26 '12 at 18:20

score 0 · Answer 1 · answered Jun 27 '12 at 02:13

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.

And how would this resolve my problem. I don't think that changing the RelativeLayout that I'm using with a LinearLayout would change anything! — Alin, Jun 27 '12 at 08:11

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

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?

edited May 23 '17 at 11:54

Community

1
1

answered Jun 27 '12 at 02:40

Jack Satriano

1,999
1
13
17

Detecting which screen size you are using? Which is your problem. – Jack Satriano Jun 27 '12 at 12:37

Using different layouts for different screen sizes Android

2 Answers2