Multiple Screen Support

Question

I have some problem with multiple screen support, I work with dp(dpi) for specify the layout_heigth and layout_width and I hope that is the better way to support multiple screen, but when I tried with two smartphone I meet two different result.

I give an example, this is a layout I use:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/cities_main_layout"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent">

       <ListView
          android:id="@+id/citieslist"
          android:layout_width="wrap_content" 
          android:layout_height="320dip"
          android:layout_gravity="center_vertical"
          android:layout_below="@id/cities_main_layout"
       />

       <LinearLayout 
          android:id="@+id/cities_button_layout"
          android:orientation="horizontal"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_below="@id/citieslist"
          android:layout_gravity="center_vertical">   
        <Button 
           android:id="@+id/bycountry"
           android:layout_height="50dip"
           android:layout_width="105dip"
           android:background="@drawable/buttonmarket"
           android:text="@string/button_bycountry"
          />
        <Button 
           android:id="@+id/top10"
           android:layout_height="50dip"
           android:layout_width="105dip"
           android:background="@drawable/buttonmarket"
           android:text="@string/button_top10"
          />
        <Button 
           android:id="@+id/recommended"
           android:layout_height="50dip"
           android:layout_width="105dip"
           android:background="@drawable/buttonmarket"
           android:text="@string/button_recommended"
          />

       </LinearLayout>

    </RelativeLayout>

The button are at the bottom of the layout, and I see two different result:

http://img600.imageshack.us/img600/5513/htcmagicg2.png http://img600.imageshack.us/img600/5513/htcmagicg2.png

http://img441.imageshack.us/img441/6440/samsunggalaxys.png http://img441.imageshack.us/img441/6440/samsunggalaxys.png

In the last smartphone I can see the buttons, instead in the first I cannot...what's wrong?

I have to write a layout for any set of screen??!!!

Answer 1

Your ListView has

android:layout_height="320dip"

Now if the phone screen is smaller, it will not fit.

Try doing this instead: (Edited due to comments. This is displayed correcty in eclipse)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relative"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView 
    android:id="@+id/listview" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#FF0000"
    android:layout_above="@+id/linlay">
</ListView>
<LinearLayout 
    android:id="@+id/linlay"    
    android:orientation="horizontal"
    android:layout_width="fill_parent" 
    android:layout_height="30dip"
    android:background="#00FF00"
    android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>

Thant should fix it I think.

Cheers

Answer 2

As others have indicated, your problem is that you hardwired in a size for the ListView . If you want a business rule of "have the buttons at the bottom and have the ListView fill up the rest", you actually need to write code that implements "have the buttons at the bottom and have the ListView fill up the rest".

There are two main approaches here:

1. Use a LinearLayout parent for the buttons and the ListView . Use android:layout_height="0px" and android:layout_weight="1" for the ListView . Use a regular android:layout_height for the buttons (presumably in their own LinearLayout ) and no android:layout_weight for for them

2. Use a RelativeLayout parent for the buttons and the ListView . Define the buttons as having android:layout_alignParentBottom="true" . Define the ListView as having a ndroid:layout_alignParentTop="true" and android:layout_above="..." , where the ... is the ID of the buttons' LinearLayout .

Answer 3

I would say it's because you are specifically declaring a height for your ListView and then laying the LinearLayout that holds your buttons at the bottom. Try changing it instead of being at the bottom of the ListView to something like

<LinearLayout 
          android:id="@+id/cities_button_layout"
          android:orientation="horizontal"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:alignparentbottom="true"
          android:layout_gravity="center_vertical">   

I'm not entirely sure if align_parent_bottom is the 100% correct spelling of that.

Answer 4

Well, others have beaten me to it while I was typing, haha, but yeah, you're hardwiring a lot of things that shouldn't be, both the ListView and the Buttons. Take a look at this:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cities_main_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >      
    <LinearLayout 
        android:id="@+id/cities_button_layout"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >   
        <Button 
            android:id="@+id/bycountry"
            android:layout_height="50dip"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/buttonmarket"
            android:text="@string/button_bycountry"
            />
        <Button 
            android:id="@+id/top10"
            android:layout_height="50dip"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/buttonmarket"
            android:text="@string/button_top10"
            />
        <Button 
            android:id="@+id/recommended"
            android:layout_height="50dip"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/buttonmarket"
            android:text="@string/button_recommended"
            />
    </LinearLayout>

    <ListView
        android:id="@+id/citieslist"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:layout_above="@id/cities_button_layout"
        />           
</RelativeLayout>

1. You have android:orientation on your RelativeLayout, which isn't actually an attribute that RelativeLayout contains.

2. You should use the layout_weight attribute rather than hardwiring sizes for the Buttons. In my example, all buttons have a width of fill_parent , and a weight of 1. This makes them distribute the space evenly.

3. List the fixed button layout first, setting it to alignParentBottom="true" . Then set the ListView to fill_parent, and layout_above your button layout. This keeps the button layout at the bottom, and makes the ListView take all the space above your buttons.

4. Tada!