Android: Problems with different screen sizes not showing the same thing

Question

I am new to Android/Java/Programming in general, so sorry if this is a dumb question.

I have been making a small game for my LG G3, and the layout of a grid looks fine (9x9) which can be found here : https://i.stack.imgur.com/OwT3p.png

However, I have recently tested it on the emulator, which is a Nexus 5, and the layout turns out like this : https://i.stack.imgur.com/dixlA.png (it is now an 8x9 grid and flows over the screen margins.)

I have set all of the button widths and heights to "dp".

Here is the layout XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top|right"
android:background="#ff000000"
android:layout_centerHorizontal="true"
android:id="@+id/fifteen_by_fifteen">

<Button
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:textSize="23sp"
    android:background="@android:color/transparent"
    android:text="@string/back"
    android:layout_gravity="top|right"
    android:textColor="#ffff274a"
    android:id="@+id/back_button"/>


<Button
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:textSize="30sp"
    android:background="@android:color/transparent"
    android:id="@+id/show_unknown_distance_button"
    android:layout_gravity="center_horizontal"
    android:textStyle="bold"
    android:textColor="#ff59e4ff"/>

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="50dp"
    android:rowCount="9"
    android:columnCount="9"
    android:layout_gravity="center">


    <Button
        android:layout_width="44dip"
        android:layout_height="45dip"
        android:id="@+id/zero_zero"
        android:layout_margin="1dip"
        android:layout_gravity="center"
        android:paddingTop="1dip"
        android:paddingRight="2dip"
        android:paddingLeft="2dip"
        android:paddingBottom="1dip"
        android:layout_row="0"
        android:layout_column="0" />

    <Button
        android:layout_width="44dip"
        android:layout_height="45dip"
        android:id="@+id/zero_one"
        android:layout_margin="1dip"
        android:layout_gravity="center"
        android:paddingTop="1dip"
        android:paddingRight="2dip"
        android:paddingLeft="2dip"
        android:paddingBottom="1dip"
        android:layout_row="0"
        android:layout_column="1" />

    <Button
        android:layout_width="44dip"
        android:layout_height="45dip"
        android:id="@+id/zero_two"
        android:layout_margin="1dip"
        android:layout_gravity="center"
        android:paddingTop="1dip"
        android:paddingRight="2dip"
        android:paddingLeft="2dip"
        android:paddingBottom="1dip"
        android:layout_row="0"
        android:layout_column="2" />

So on for 81 buttons.

So what should I do to make the 9x9 grid visible on all devices?

Thanks for any and all help

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

Read this about screen size : https://stackoverflow.com/a/17547325/3552583

For a better "responsive" design, use the weight attribute.

Doc here : http://developer.android.com/guide/topics/ui/layout/linear.html

Edit : Example here : http://www.101apps.co.za/index.php/articles/using-android-s-layout-weight-attribute.html

Good luck ;)

edited May 23 '17 at 12:23

Community

1
1

answered Mar 01 '15 at 21:51

Octopus38

166
1
8

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

You can use the setWeight attribute of a LinearLayout. Weighted layouts will measure the display and each layout will fill the screen according to its relative weight. This is a straightforward approach, once you become familiar with it. However, it can result in a lot of "nested" layouts and weights if you consider margins/padding, etc.

You could use a GridView and set the columns/rows. This has similar advantages to the one above, but usually is useful for cases where you want to scroll. However, the adapter may provide tools for you that make it a better option.

The option with the most control, though, is to use DisplayMetrics to measure your screen size and then set all of the layouts according to the measured size of the screen. Setting dp in a layout usually comes with problems like this.

This will also give you full control over margins, centering, etc. if you want or need that. You can also be sure that it will look proper on both smaller screens and larger screens.

How to get screen display metrics in application class

Last, you might consider using different layouts for hdpi mdpi and xhdpi screen. Or even using dimens attributes.

How to create layout-small-land folder?

http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

Android: Problems with different screen sizes not showing the same thing

2 Answers2