Problems with RelativeLayout

Question

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.

score 1 · Answer 1 · answered Apr 04 '12 at 05:42

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>

score 0 · Answer 2 · edited May 23 '17 at 12:22

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.

Thanks for the reply. 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, Apr 04 '12 at 16:01

Problems with RelativeLayout

2 Answers2