Search code examples
androidimagescaleandroid-relativelayout

Android tall screens issues

I'm having quite a lot of problems with supporting different screen size at the moment, but this is frustrating. I am writing a game and am in the last phase. I have designed a custom keyboard and adjusted it to fit different screens, but I'm currently having problems with higher resolution, taller screens(e.g 540x960, 720x1280). Resources have been provided for every dp.

This is what happens on these screens:

On 540x960 On 540x960

This is my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fontspace="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    <com.example.classes.FontImageButton
        android:id="@+id/qButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="q" />

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/wButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/qButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="w"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/eButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/wButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="e"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/rButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/eButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="r"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/tButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/rButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="t"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/zButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/tButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="z"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/uButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/zButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="u"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/iButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/uButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="i"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/oButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/iButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="o"/>

    <com.example.classes.FontImageButton
        style="@style/button"
        android:id="@+id/pButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/oButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="p"/>

    <com.example.classes.FontImageButton
        android:id="@+id/aButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/qButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="a" />

    <com.example.classes.FontImageButton
        android:id="@+id/sButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/wButton"
        android:layout_toRightOf="@+id/aButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="s" />

    <com.example.classes.FontImageButton
        android:id="@+id/dButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/eButton"
        android:layout_toRightOf="@+id/sButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="d" />

    <com.example.classes.FontImageButton
        android:id="@+id/fButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rButton"
        android:layout_toRightOf="@+id/dButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="f" />

    <com.example.classes.FontImageButton
        android:id="@+id/gButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tButton"
        android:layout_toRightOf="@+id/fButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="g" />

    <com.example.classes.FontImageButton
        android:id="@+id/hButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/zButton"
        android:layout_toRightOf="@+id/gButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="h" />

    <com.example.classes.FontImageButton
        android:id="@+id/jButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/uButton"
        android:layout_toRightOf="@+id/hButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="j" />

    <com.example.classes.FontImageButton
        android:id="@+id/kButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iButton"
        android:layout_toRightOf="@+id/jButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="k" />

    <com.example.classes.FontImageButton
        android:id="@+id/lButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iButton"
        android:layout_toRightOf="@+id/kButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="l" />

    <com.example.classes.FontImageButton
        android:id="@+id/yButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/sButton"
        android:textSize="18sp"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="y" />

    <com.example.classes.FontImageButton
        android:id="@+id/xButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_below="@+id/dButton"
        android:layout_toRightOf="@+id/yButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="x" />

    <com.example.classes.FontImageButton
        android:id="@+id/cButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_below="@+id/fButton"
        android:layout_toRightOf="@+id/xButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="c" />

    <com.example.classes.FontImageButton
        android:id="@+id/vButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/gButton"
        android:layout_toRightOf="@+id/cButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="v" />

    <com.example.classes.FontImageButton
        android:id="@+id/bButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/hButton"
        android:layout_toRightOf="@+id/vButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="b" />

    <com.example.classes.FontImageButton
        android:id="@+id/nButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/jButton"
        android:layout_toRightOf="@+id/bButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="n" />

    <com.example.classes.FontImageButton
        android:id="@+id/mButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/kButton"
        android:layout_toRightOf="@+id/nButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="m" />

    <com.example.classes.FontImageButton
        android:id="@+id/backspaceButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/lButton"
        android:layout_below="@+id/pButton"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="" />

    <com.example.classes.FontImageButton
        android:id="@+id/enterButton"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/kButton"
        android:layout_marginRight="2dp"
        android:text="" />
        </RelativeLayout>
    </LinearLayout>



</RelativeLayout>

Do I need to provide a new design for the keyboard button?

EDIT:

http://pastebin.com/Tx2QjA7E I have added as DerGolem suggested, but no changes.

EDIT1:

http://pastebin.com/kyAk18BK - FontImageButton class

Solution

  • In the end, I have decided to not use xml for this purpose, and I programmatically checked the resolution and resized the layout_width of the FontImageButton accordingly, solving my problem.