• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Apps DP scaling issues.

I thought using DP in my dimensions would make the UI fit on different screen sizes but I'm having issues. On my Moto Droid, it takes up the full width as I want it to, but on the 320x480 emulator my last box (v1_0) is cut off. Anyone know what I'm doing wrong; how to get them to appear the same on both devices?

Moto Droid, API v2.0.1:
droid.png



320x480 Emulator, API v1.5:
emulator.png




XML:
Code:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
     <View android:id="@+id/v0_0"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_x="10dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
    />
    <TextView android:id="@+id/lbl0_0"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_x="10dp"
        android:layout_y="20dp"
        android:gravity="center"
        android:text=""
    />
     <View android:id="@+id/v0_1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="80dp"
        android:layout_y="80dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl0_1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="80dp"
        android:layout_y="80dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v0_2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="150dp"
        android:layout_y="80dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl0_2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="150dp"
        android:layout_y="80dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v0_3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="220dp"
        android:layout_y="80dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl0_3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="220dp"
        android:layout_y="80dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v0_4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="290dp"
        android:layout_y="80dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl0_4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="290dp"
        android:layout_y="80dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v0_5"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="360dp"
        android:layout_y="80dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl0_5"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="360dp"
        android:layout_y="80dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v0_6"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="430dp"
        android:layout_y="80dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl0_6"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="430dp"
        android:layout_y="80dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v1_6"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="80dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl1_6"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="80dp"
        android:layout_y="20dp"
        android:gravity="center"
    />
    <View android:id="@+id/v1_5"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="150dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl1_5"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="150dp"
        android:layout_y="20dp"
        android:gravity="center"
    />
    <View android:id="@+id/v1_4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="220dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl1_4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="220dp"
        android:layout_y="20dp"
        android:gravity="center"
    />
    <View android:id="@+id/v1_3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="290dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl1_3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="290dp"
        android:layout_y="20dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v1_2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="360dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl1_2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="360dp"
        android:layout_y="20dp"
        android:gravity="center"
        android:text=""
    />
    <View android:id="@+id/v1_1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="430dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
        android:clickable="true"
    />
    <TextView android:id="@+id/lbl1_1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="430dp"
        android:layout_y="20dp"
        android:gravity="center"
        android:text=""
    />
     <View android:id="@+id/v1_0"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_x="500dp"
        android:layout_y="20dp"
        android:background="@drawable/border_pocket"
    />
    <TextView android:id="@+id/lbl1_0"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_x="500dp"
        android:layout_y="20dp"
        android:gravity="center"
        android:text=""
    />
    <TextView android:id="@+id/lblPlayerUp"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_x="20dp"
        android:layout_y="140dp"
        android:gravity="center"
        android:text="P0"
    />
</AbsoluteLayout>
 
First up, avoid using AbsoluteLayout, it's been depreciated, and support for it could be pulled in any upcoming release.

The docs recommend to use RelativeLayout or FrameLayout. Your losing the bottom button because the aspect ratio of WVGA854 on the Droid is different to HVGA, and because your items are place "absolute", they go off the screen.

I would experiment with a few layouts, for example a RelativeLayout to place the outer two buttons, with a two LinearLayouts inbetween and aligned to the outer buttons.

LinearLayouts let you arrange objects horizontally or vertically, but you can specify a weight. If all objects in a LinearLayout have the same weight, they will all get the same size in between the two outer buttons. This would let your buttons resize themselves to the screen.
 
Upvote 0
Thank you very much for letting me know about AbsoluteLayout.

I have adapted my layout to use a combination of Relative and Linears as you suggested. It now works perfectly on all my tested devices.

For anyone interest, my XML is now as follows.
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:padding="10dp">
    <LinearLayout android:id="@+id/llBoard" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <TextView android:id="@+id/lbl0_0" android:layout_width="40dp"
            android:layout_height="100dp" android:gravity="center" android:text="00"
            android:background="@drawable/border_pocket" />
        <LinearLayout android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <TextView android:id="@+id/lbl1_6" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="16"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl1_5" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="15"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl1_4" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="14"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl1_3" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="13"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl1_2" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="12"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl1_1" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="11"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
            </LinearLayout>
            <LinearLayout android:layout_width="wrap_content" android:layout_marginTop="20dp"
                android:layout_height="wrap_content">
                <TextView android:id="@+id/lbl0_1" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="01"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl0_2" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="02"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl0_3" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="03"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl0_4" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="04"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl0_5" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="05"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
                <TextView android:id="@+id/lbl0_6" android:layout_width="40dp"
                    android:layout_height="40dp" android:gravity="center" android:text="06"
                    android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
            </LinearLayout>
        </LinearLayout>
        <TextView android:id="@+id/lbl1_0" android:layout_width="40dp"
            android:layout_height="100dp" android:layout_marginLeft="20dp"
            android:gravity="center" android:text="10" android:background="@drawable/border_pocket" />
    </LinearLayout>
    <TextView android:id="@+id/lblPlayerUp" android:layout_width="fill_parent"
        android:layout_height="80dp" android:layout_below="@id/llBoard"
        android:text="Waiting for game to start" />
</RelativeLayout>
Btw, is there anything in Android that allows me to specify a common attribute to all children? If Android were CSS based it I would be looking at something like
Code:
#LinearLayout #TextView { layout_marginLeft:20dp; }
 
Upvote 0
Glad it's working. Since it is, I wouldn't change it unless you want to risk breaking it and re-fixing, but for next time...

Because you have an outer RelativeLayout, you then have a vertically stacked LinearLayout, with the two horizontal LinearLayouts inside. The more nested layouts you have, the more memory and time your application will take to load.

What you could do to avoid the vertically stacked LinearLayout, is to have the top horizontal LinearLayout aligned to the outer button's top (alignTop="outerButton"), and the bottom LinearLayout aligned to that and the button (alignTop="upperLinearLayout", alignBottom="outerButton").

It works, and I doubt you'll notice much difference with your layout, so I'd just keep that in mind for next time. :)

Btw, is there anything in Android that allows me to specify a common attribute to all children? If Android were CSS based it I would be looking at something like
Code:
#LinearLayout #TextView { layout_marginLeft:20dp; }
See Styles and Themes. I haven't played extensively with them.
 
Upvote 0

BEST TECH IN 2023

We've been tracking upcoming products and ranking the best tech since 2007. Thanks for trusting our opinion: we get rewarded through affiliate links that earn us a commission and we invite you to learn more about us.

Smartphones