I separated the interface of my app in three areas: header, content and footer. The header has a fixed size (it has only one image), while the footer and content have sizes that can vary.
In devices with higher resolutions I thought to insert the header and footer on the screen, and reserve any free space for the content area. In devices with low resolutions thought of putting the content length as little as possible (something like wrap_content) and insert the footer below (requiring the user to perform scroll to view the footer).
The best I got was using RelativeView:
<RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="@+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true" >
(...)
</LinearLayout>
<LinearLayout
android:id="@+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true" >
(...)
</LinearLayout>
<FrameLayout
android:id="@+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/footer"
android:layout_below="@+id/header"
android:lay >
(...)
</FrameLayout>
</RelativeLayout>
For resolutions larger works as expected, the problem is that for small resolutions: the content is less than it should, because it takes the space between the header and footer.
How can I solve the problem? I could not find another way to get content assuming all the free space of the screen (in large resolutions), because I can not simply use fill_parent, since the content is between the header and footer. I also tried using min-height, but without success.
Top level RelativeLayout
layout_height
make that fill_parent
.
Then FrameLayout
remove the layout_above
property, just saying it's below the header should be enough.
Finally, FrameLayout
may be causing the problem as it's normally used when only 1 element is on the screen and it fills the screen. Try replacing this with a LinearLayout
. I've done something exactly like what you want in one of my apps, the layout is (keep in mind in my case I swap out the FrameLayouts
for Fragments
which are LinearLayout
or RelativeLayout
based.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainBack"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/transparent" >
<FrameLayout
android:id="@+id/headerFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@+id/homeAdMsgFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<ListView
android:id="@+id/contactList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/homeAdMsgFrag"
android:layout_alignParentLeft="true"
android:layout_below="@id/headerFrag"
android:background="@color/transparent"
android:cacheColorHint="@color/transparent" >
</ListView>
</RelativeLayout>
Some days before I also faced this issue, to solved what I did that I created Header.xml and footer.xml and included this two xml in my all others activities xmls because this two are common in all others activities.
To meet global resolution issue, I used weightsum and weight, applying weight will fixed your header and footer area and content area too.
This way I done in my one of project to resolve this issue, just try it, hope it will works for you.
EXAMPLE
<LinearLayout
android:weightSum="10"
android:orientation="vertical"
android:id="@+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="@+id/header"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
<FrameLayout
android:id="@+id/content"
android:layout_width="fill_parent"
android:layout_weight="6"
android:layout_height="0dp">
(...)
</FrameLayout>
<LinearLayout
android:id="@+id/footer"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
</LinearLayout>
Thanks.
I did not know the attributes weightsum and weight. I tried to use them, but got the same result when I used the RelativeLayout.
I managed to make the content fill the entire space of the screen, but when there is no sufficient free space is not possible to view all content. Content must assume a minimum size and 'push' the footer down (which is visible only if you use the scroll) - Claudio Henrique da Silva 2012-04-04 16:01