DP scaling issues.


Last Updated:

  1. JoshKraker

    JoshKraker Member This Topic's Starter

    Joined:
    Dec 3, 2009
    Messages:
    21
    Likes Received:
    0
    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:
    [​IMG]


    320x480 Emulator, API v1.5:
    [​IMG]



    XML:
    Code (Text):
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:layout_width="fill_parent"
    4.     android:layout_height="fill_parent"
    5.     >
    6.      <View android:id="@+id/v0_0"
    7.         android:layout_width="40dp"
    8.         android:layout_height="100dp"
    9.         android:layout_x="10dp"
    10.         android:layout_y="20dp"
    11.         android:background="@drawable/border_pocket"
    12.     />
    13.     <TextView android:id="@+id/lbl0_0"
    14.         android:layout_width="40dp"
    15.         android:layout_height="100dp"
    16.         android:layout_x="10dp"
    17.         android:layout_y="20dp"
    18.         android:gravity="center"
    19.         android:text=""
    20.     />
    21.      <View android:id="@+id/v0_1"
    22.         android:layout_width="40dp"
    23.         android:layout_height="40dp"
    24.         android:layout_x="80dp"
    25.         android:layout_y="80dp"
    26.         android:background="@drawable/border_pocket"
    27.         android:clickable="true"
    28.     />
    29.     <TextView android:id="@+id/lbl0_1"
    30.         android:layout_width="40dp"
    31.         android:layout_height="40dp"
    32.         android:layout_x="80dp"
    33.         android:layout_y="80dp"
    34.         android:gravity="center"
    35.         android:text=""
    36.     />
    37.     <View android:id="@+id/v0_2"
    38.         android:layout_width="40dp"
    39.         android:layout_height="40dp"
    40.         android:layout_x="150dp"
    41.         android:layout_y="80dp"
    42.         android:background="@drawable/border_pocket"
    43.         android:clickable="true"
    44.     />
    45.     <TextView android:id="@+id/lbl0_2"
    46.         android:layout_width="40dp"
    47.         android:layout_height="40dp"
    48.         android:layout_x="150dp"
    49.         android:layout_y="80dp"
    50.         android:gravity="center"
    51.         android:text=""
    52.     />
    53.     <View android:id="@+id/v0_3"
    54.         android:layout_width="40dp"
    55.         android:layout_height="40dp"
    56.         android:layout_x="220dp"
    57.         android:layout_y="80dp"
    58.         android:background="@drawable/border_pocket"
    59.         android:clickable="true"
    60.     />
    61.     <TextView android:id="@+id/lbl0_3"
    62.         android:layout_width="40dp"
    63.         android:layout_height="40dp"
    64.         android:layout_x="220dp"
    65.         android:layout_y="80dp"
    66.         android:gravity="center"
    67.         android:text=""
    68.     />
    69.     <View android:id="@+id/v0_4"
    70.         android:layout_width="40dp"
    71.         android:layout_height="40dp"
    72.         android:layout_x="290dp"
    73.         android:layout_y="80dp"
    74.         android:background="@drawable/border_pocket"
    75.         android:clickable="true"
    76.     />
    77.     <TextView android:id="@+id/lbl0_4"
    78.         android:layout_width="40dp"
    79.         android:layout_height="40dp"
    80.         android:layout_x="290dp"
    81.         android:layout_y="80dp"
    82.         android:gravity="center"
    83.         android:text=""
    84.     />
    85.     <View android:id="@+id/v0_5"
    86.         android:layout_width="40dp"
    87.         android:layout_height="40dp"
    88.         android:layout_x="360dp"
    89.         android:layout_y="80dp"
    90.         android:background="@drawable/border_pocket"
    91.         android:clickable="true"
    92.     />
    93.     <TextView android:id="@+id/lbl0_5"
    94.         android:layout_width="40dp"
    95.         android:layout_height="40dp"
    96.         android:layout_x="360dp"
    97.         android:layout_y="80dp"
    98.         android:gravity="center"
    99.         android:text=""
    100.     />
    101.     <View android:id="@+id/v0_6"
    102.         android:layout_width="40dp"
    103.         android:layout_height="40dp"
    104.         android:layout_x="430dp"
    105.         android:layout_y="80dp"
    106.         android:background="@drawable/border_pocket"
    107.         android:clickable="true"
    108.     />
    109.     <TextView android:id="@+id/lbl0_6"
    110.         android:layout_width="40dp"
    111.         android:layout_height="40dp"
    112.         android:layout_x="430dp"
    113.         android:layout_y="80dp"
    114.         android:gravity="center"
    115.         android:text=""
    116.     />
    117.     <View android:id="@+id/v1_6"
    118.         android:layout_width="40dp"
    119.         android:layout_height="40dp"
    120.         android:layout_x="80dp"
    121.         android:layout_y="20dp"
    122.         android:background="@drawable/border_pocket"
    123.         android:clickable="true"
    124.     />
    125.     <TextView android:id="@+id/lbl1_6"
    126.         android:layout_width="40dp"
    127.         android:layout_height="40dp"
    128.         android:layout_x="80dp"
    129.         android:layout_y="20dp"
    130.         android:gravity="center"
    131.     />
    132.     <View android:id="@+id/v1_5"
    133.         android:layout_width="40dp"
    134.         android:layout_height="40dp"
    135.         android:layout_x="150dp"
    136.         android:layout_y="20dp"
    137.         android:background="@drawable/border_pocket"
    138.         android:clickable="true"
    139.     />
    140.     <TextView android:id="@+id/lbl1_5"
    141.         android:layout_width="40dp"
    142.         android:layout_height="40dp"
    143.         android:layout_x="150dp"
    144.         android:layout_y="20dp"
    145.         android:gravity="center"
    146.     />
    147.     <View android:id="@+id/v1_4"
    148.         android:layout_width="40dp"
    149.         android:layout_height="40dp"
    150.         android:layout_x="220dp"
    151.         android:layout_y="20dp"
    152.         android:background="@drawable/border_pocket"
    153.         android:clickable="true"
    154.     />
    155.     <TextView android:id="@+id/lbl1_4"
    156.         android:layout_width="40dp"
    157.         android:layout_height="40dp"
    158.         android:layout_x="220dp"
    159.         android:layout_y="20dp"
    160.         android:gravity="center"
    161.     />
    162.     <View android:id="@+id/v1_3"
    163.         android:layout_width="40dp"
    164.         android:layout_height="40dp"
    165.         android:layout_x="290dp"
    166.         android:layout_y="20dp"
    167.         android:background="@drawable/border_pocket"
    168.         android:clickable="true"
    169.     />
    170.     <TextView android:id="@+id/lbl1_3"
    171.         android:layout_width="40dp"
    172.         android:layout_height="40dp"
    173.         android:layout_x="290dp"
    174.         android:layout_y="20dp"
    175.         android:gravity="center"
    176.         android:text=""
    177.     />
    178.     <View android:id="@+id/v1_2"
    179.         android:layout_width="40dp"
    180.         android:layout_height="40dp"
    181.         android:layout_x="360dp"
    182.         android:layout_y="20dp"
    183.         android:background="@drawable/border_pocket"
    184.         android:clickable="true"
    185.     />
    186.     <TextView android:id="@+id/lbl1_2"
    187.         android:layout_width="40dp"
    188.         android:layout_height="40dp"
    189.         android:layout_x="360dp"
    190.         android:layout_y="20dp"
    191.         android:gravity="center"
    192.         android:text=""
    193.     />
    194.     <View android:id="@+id/v1_1"
    195.         android:layout_width="40dp"
    196.         android:layout_height="40dp"
    197.         android:layout_x="430dp"
    198.         android:layout_y="20dp"
    199.         android:background="@drawable/border_pocket"
    200.         android:clickable="true"
    201.     />
    202.     <TextView android:id="@+id/lbl1_1"
    203.         android:layout_width="40dp"
    204.         android:layout_height="40dp"
    205.         android:layout_x="430dp"
    206.         android:layout_y="20dp"
    207.         android:gravity="center"
    208.         android:text=""
    209.     />
    210.      <View android:id="@+id/v1_0"
    211.         android:layout_width="40dp"
    212.         android:layout_height="100dp"
    213.         android:layout_x="500dp"
    214.         android:layout_y="20dp"
    215.         android:background="@drawable/border_pocket"
    216.     />
    217.     <TextView android:id="@+id/lbl1_0"
    218.         android:layout_width="40dp"
    219.         android:layout_height="100dp"
    220.         android:layout_x="500dp"
    221.         android:layout_y="20dp"
    222.         android:gravity="center"
    223.         android:text=""
    224.     />
    225.     <TextView android:id="@+id/lblPlayerUp"
    226.         android:layout_width="40dp"
    227.         android:layout_height="40dp"
    228.         android:layout_x="20dp"
    229.         android:layout_y="140dp"
    230.         android:gravity="center"
    231.         android:text="P0"
    232.     />
    233. </AbsoluteLayout>
    234.  
     

    Advertisement
  2. Doc Savage

    Doc Savage Well-Known Member

    Joined:
    Jan 13, 2010
    Messages:
    45
    Likes Received:
    0
    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.
     
  3. JoshKraker

    JoshKraker Member This Topic's Starter

    Joined:
    Dec 3, 2009
    Messages:
    21
    Likes Received:
    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 (Text):
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:layout_width="fill_parent" android:layout_height="fill_parent"
    4.     android:padding="10dp">
    5.     <LinearLayout android:id="@+id/llBoard"
    6.         android:layout_width="fill_parent"
    7.         android:layout_height="wrap_content"
    8.         android:gravity="center">
    9.         <TextView android:id="@+id/lbl0_0" android:layout_width="40dp"
    10.             android:layout_height="100dp" android:gravity="center" android:text="00"
    11.             android:background="@drawable/border_pocket" />
    12.         <LinearLayout android:layout_width="wrap_content"
    13.             android:layout_height="wrap_content"
    14.             android:orientation="vertical">
    15.             <LinearLayout android:layout_width="wrap_content"
    16.                 android:layout_height="wrap_content">
    17.                 <TextView android:id="@+id/lbl1_6" android:layout_width="40dp"
    18.                     android:layout_height="40dp" android:gravity="center" android:text="16"
    19.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    20.                 <TextView android:id="@+id/lbl1_5" android:layout_width="40dp"
    21.                     android:layout_height="40dp" android:gravity="center" android:text="15"
    22.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    23.                 <TextView android:id="@+id/lbl1_4" android:layout_width="40dp"
    24.                     android:layout_height="40dp" android:gravity="center" android:text="14"
    25.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    26.                 <TextView android:id="@+id/lbl1_3" android:layout_width="40dp"
    27.                     android:layout_height="40dp" android:gravity="center" android:text="13"
    28.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    29.                 <TextView android:id="@+id/lbl1_2" android:layout_width="40dp"
    30.                     android:layout_height="40dp" android:gravity="center" android:text="12"
    31.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    32.                 <TextView android:id="@+id/lbl1_1" android:layout_width="40dp"
    33.                     android:layout_height="40dp" android:gravity="center" android:text="11"
    34.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    35.             </LinearLayout>
    36.             <LinearLayout android:layout_width="wrap_content" android:layout_marginTop="20dp"
    37.                 android:layout_height="wrap_content">
    38.                 <TextView android:id="@+id/lbl0_1" android:layout_width="40dp"
    39.                     android:layout_height="40dp" android:gravity="center" android:text="01"
    40.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    41.                 <TextView android:id="@+id/lbl0_2" android:layout_width="40dp"
    42.                     android:layout_height="40dp" android:gravity="center" android:text="02"
    43.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    44.                 <TextView android:id="@+id/lbl0_3" android:layout_width="40dp"
    45.                     android:layout_height="40dp" android:gravity="center" android:text="03"
    46.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    47.                 <TextView android:id="@+id/lbl0_4" android:layout_width="40dp"
    48.                     android:layout_height="40dp" android:gravity="center" android:text="04"
    49.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    50.                 <TextView android:id="@+id/lbl0_5" android:layout_width="40dp"
    51.                     android:layout_height="40dp" android:gravity="center" android:text="05"
    52.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    53.                 <TextView android:id="@+id/lbl0_6" android:layout_width="40dp"
    54.                     android:layout_height="40dp" android:gravity="center" android:text="06"
    55.                     android:background="@drawable/border_pocket" android:clickable="true" android:layout_marginLeft="20dp" />
    56.             </LinearLayout>
    57.         </LinearLayout>
    58.         <TextView android:id="@+id/lbl1_0" android:layout_width="40dp"
    59.             android:layout_height="100dp" android:layout_marginLeft="20dp"
    60.             android:gravity="center" android:text="10" android:background="@drawable/border_pocket" />
    61.     </LinearLayout>
    62.     <TextView android:id="@+id/lblPlayerUp" android:layout_width="fill_parent"
    63.         android:layout_height="80dp" android:layout_below="@id/llBoard"
    64.         android:text="Waiting for game to start" />
    65. </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 (Text):
    1. #LinearLayout #TextView { layout_marginLeft:20dp; }
     
  4. Doc Savage

    Doc Savage Well-Known Member

    Joined:
    Jan 13, 2010
    Messages:
    45
    Likes Received:
    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. :)

    See Styles and Themes. I haven't played extensively with them.
     

Share This Page

Loading...